1. 首页
  2. IT资讯

鼠标彩色轨迹动画

“u003Cdivu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fa05b5abc1b0e4a28b2cb1035169b973d” img_width=”638″ img_height=”311″ alt=”鼠标彩色轨迹动画” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E我想做一些能给我的网站增加一些创意的东西,在看到另一个开发人员在他们的网站上实现类似的东西后,我想我会试一试。我的第一次尝试要简单得多,只是从最后一个点到新点画一条线,然后淡出整个画布。在这里查看版本1。u003Cu002Fpu003Eu003Cpu003E然而,这个方法有一些问题,而且非常不灵活,所以我最终着手制作一个更好的版本,跟踪所有活动点并单独对其进行动画处理。也许有点复杂,但手工操作可以进行更多的定制,而不会显著降低性能。u003Cu002Fpu003Eu003Cpu003E新版本的工作原理是跟踪数组中的所有可见点,并在每个(requestAnimation)帧上更新所有可见点:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F82f78856a13342e587c0b694d1a2f21b” img_width=”1600″ img_height=”750″ alt=”鼠标彩色轨迹动画” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E每个点的颜色和宽度都不同,具体取决于它的生存时间,直到达到设置的最大生存期并死亡(从队列中删除)。这使得痕迹在消失前“淡出”成不同的颜色。在我的例子中,我的观点是从紫色到蓝色,因为它符合我的网站主题:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002Fe534f96993154bfd97952a163cb468ee” img_width=”1594″ img_height=”488″ alt=”鼠标彩色轨迹动画” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E我的另一个担心是移动设备;不管出于什么原因,一些移动设备似乎在触摸u002F拖动时发出鼠标移动事件,这导致移动用户出现奇怪的、跳动的光标轨迹。由于智能手机在任何情况下(通常)都没有光标,所以我决定,如果用户在启动之前没有附加指针设备,在启动之前通过检查matchMedia条件来禁用动画:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F884f35d2057643b4be75c4e2684e8907″ img_width=”1596″ img_height=”142″ alt=”鼠标彩色轨迹动画” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E(令人惊讶的是,它有98.12%的支持率,我以前怎么没有听说过呢) 不管怎样,把所有这些放到一个组件中,你会得到一个漂亮的鼠标轨迹动画!完整代码如下:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F6fba887a81064a8eb63b9a318e4c0bab” img_width=”1280″ img_height=”3524″ alt=”鼠标彩色轨迹动画” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E谢谢你的阅读,希望你觉得这有用!u003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:鼠标彩色轨迹动画

主题测试文章,只做测试使用。发布者:熱鬧獨處,转转请注明出处:http://www.cxybcw.com/10842.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code