Javascript 创建迪士尼灰尘风格的光标轨迹

我正在尝试制作一个光标，它会留下一道神奇的灰尘，就像任何迪斯尼电影的介绍中那样：。所以我认为它分为两部分。1.小径和2。类似的落下和消失的痕迹。到目前为止，我已经使基本的轨迹工作得相当好，下面的代码是用于下落轨迹的，本质上是带有css动画的副本

我遇到的问题是它非常不安。我猜css动画对性能来说不是很好，这会导致我的页面出现抖动。我刚刚读过requestAnimationFrame，但对它还不熟悉，所以不知道如何实现它。。在这里如何使用requestAnimationFrame而不是css

我还认为在js中创建动画自定义将允许在下落粒子的动画中也存在随机偏移。。更像是在视频中

window.addEventListener（'mousemove'，函数（e）{
//踪迹
[1、.9、.8、.5、.25、.6、.4、.3、.2].forEach（函数（i）{
var j=（1-i）*50；
var elem=document.createElement（'div'）；
var size=Math.ceil（Math.random（）*10*i）+'px'；
elem.style.position='固定'；
elem.style.zIndex=6；
elem.style.top=e.pageY-window.scrollY+Math.round（Math.random（）*j-j/2）+'px'；
elem.style.left=e.pageX+Math.round（Math.random（）*j-j/2）+“px”；
elem.style.width=尺寸；
elem.style.opacity=“0.5”；
元素样式高度=尺寸；
elem.style.background='hsla'+
Math.round（Math.random（）*160）+'，'+
'60%, ' +
'90%, ' +
i+“）”；
元素style.borderRadius=大小；
elem.style.pointerEvents='none'；
文件.正文.附件（elem）；
setTimeout（函数（）{
文件.body.removeChild（elem）；
}，Math.round（Math.random（）*i*1000））；
});
//下落轨迹
[1,9,8,5,25,6,3,2].forEach（函数（i）{
var j=（1-i）*50；
var elem=document.createElement（'div'）；
var size=Math.ceil（Math.random（）*10*i）+'px'；
elem.style.position='固定'；
elem.style.zIndex=6；
elem.style.top=e.pageY-window.scrollY+Math.round（Math.random（）*j-j/2）+'px'；
elem.style.left=e.pageX+Math.round（Math.random（）*j-j/2）+“px”；
elem.style.width=尺寸；
elem.style.opacity=“0.5”；
元素样式高度=尺寸；
elem.style.animation=“fallingsparkles 1s”；
elem.style.background='hsla'+
Math.round（Math.random（）*160）+'，'+
'60%, ' +
'90%, ' +
i+“）”；
元素style.borderRadius=大小；
elem.style.pointerEvents='none'；
文件.正文.附件（elem）；
setTimeout（函数（）{
文件.body.removeChild（elem）；
}，Math.round（Math.random（）*i*1000））；
});
}，假）
正文{
宽度：100%；
身高：100%；
背景色：#000；
}
@关键帧下落帕克斯{
从{
变换：translateY（0）；
}
到{
变换：translateY（50px）；
}
}
我主要是发布这篇文章供其他人使用，我对代码进行了一些重构。没有任何变化，但更容易理解。我会跟进一个真实的答案


让trailar=[1,9,8,5,25,6,4,3,2]；
函数跟踪（e，i，Callbackn）{
var elem=document.createElement（'div'）；
elem=styleSparkle（elem，e，i）；
if（callbackFn的类型=='function'）{
elem=callbackFn（elem）；
}
元素类列表添加（“火花”）；
文件.正文.附件（elem）；
setTimeout（函数（）{
文件.body.removeChild（elem）；
}，Math.round（Math.random（）*i*1000））；
}
函数styleSparkle（elem，e，i）{
设j=（1-i）*50；
设size=Math.ceil（Math.random（）*10*i）+'px'；
elem.style.top=e.pageY-window.scrollY+Math.round（Math.random（）*j-j/2）+'px'；
elem.style.left=e.pageX+Math.round（Math.random（）*j-j/2）+“px”；
elem.style.width=尺寸；
元素样式高度=尺寸；
元素style.borderRadius=大小；
elem.style.background='hsla'+
Math.round（Math.random（）*160）+'，'+
'60%, ' +
'90%, ' +
i+“）”；
返回元素；
}
window.addEventListener（'mousemove'，函数（e）{
trailar.forEach（（i）=>{trailAnimation（e，i）}）；
trailar.forEach（（i）=>{trailAnimation（e，i，（elem）=>{
elem.style.animation=“fallingsparkles 1s”；
返回元素；
})});
}，假）
正文{
宽度：100%；
身高：100%；
背景色：#000；
}
.闪耀{
位置：固定；
z指数：6；
不透明度：0.5；
指针事件：无；
}
@关键帧下落帕克斯{
从{
变换：translateY（0）；
}
到{
变换：translateY（50px）；
}
}
多么酷的小动画。我认为从长远来看这会很烦人，但还是很酷

我不喜欢这个解决方案的地方是，我必须做一个连续的递归循环，即使没有要设置动画的元素，循环也会继续。可能有一些方法可以避免这种情况，但仅仅展示如何实现
requestAnimationFrame
，就太复杂了。如您所见，使用requestAnimationFrame并不难。您只需调用在中进行计算的相同方法

除了将每个元素添加到主体之外，我还通过
addAnimationProperties
将元素添加到
sparklarr
中，并添加了一些其他属性。最后，我添加了一个全新的方法——
moveSparkles
——用于计算移动和删除元素
calculateInterpolation
根据元素的创建时间、消失时间和当前时间，计算元素应移动的时间百分比

我认为代码是不言自明的