Javascript 同时使用rAF和setInterval运行的画布动画

我有一个动画，它有不同的组件

走路的人

充满腔室的气体

这些组件中的每一个单独使用时都能很好地工作，但是当我尝试将两者结合起来时，动画根本就不起作用

---

在动画的当前状态下，气体按其应有的方式工作。然而，这个人在视线中忽隐忽现，在某个点上看不见他。

这里的问题是，你每200毫秒画一次这个人，但由于

requestAnimationFrame（paint），浏览器准备好后，画布的其余部分就会马上画出来，这将清除该男子

解决方案如下：
-将助行器的所有绘画内容移动到paint（）-函数中
-将所有变量的声明从
animationFrames
移动到
dy
到walker（）函数外部，您希望它们在函数内部是全局的，而不是局部的（因为您将在paint（）函数中绘制人）而不是同时使用
requestAnimationFrame
和
setInterval
…

requestAnimationFrame
（rAF）会产生更好的性能，因为它尝试将绘图与浏览器刷新周期同步

因此，如果将所有动画放在
requestAnimationFrame
中，则可以获得更好的性能

通过为每个动画创建一个对象（人对象和气体对象），可以使用单个rAF驱动所有动画

每个对象都包含：


当前动画状态（足够绘制对象的信息）

此动画的频率以及为下一帧更新动画所需的数据


下面是一个示例，它每167ms设置一个矩形的动画，每167ms设置一个圆的动画


var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
var actions=[]；
//
动作。推({
下次：0，
延迟：1000/60*10，
fn:rect，
dx:1，
戴:1,，
x:20，
y:20，
选项：{w:20，h:15，角度：0，填充：'skyblue'}
});
//
动作。推({
下次：0，
延迟：1000/60*3，
fn：圆圈，
dx:-1，
戴:1,，
x:200，
y:25，
选项：{r:12，填充：'lightsalmon'}
});
请求动画帧（动画）；
var c=0；
函数动画（时间）{
ctx.clearRect（0,0，cw，ch）；
对于（变量i=0；ia.nextTime）{
a、 下一个时间=时间+延迟；
a、 x+=a.dx；
a、 y+=a.dy；
}
}
请求动画帧（动画）；
}
函数rect（r）{
ctx.fillStyle=r.options.fill；
ctx.fillRect（r.x，r.y，r.options.w，r.options.h）；
}
功能圈（c）{
ctx.beginPath（）；
弧（c.x，c.y，c.options.r，0，Math.PI*2）；
ctx.closePath（）；
ctx.fillStyle=c.options.fill；
ctx.fill（）；
}
body{背景色：象牙色；填充：10px；}
#画布{边框：1px纯红；}
如果我将整个“var walker=setInterval（function（）{…”移动到绘图函数中，那么这将导致该人在屏幕上极快地移动，有办法吗？是的，只移动行
ctx.drawImage（tileSheet，sourceX，sourceY，252380，x，y，73120）；
到绘图函数中-函数。将setInterval的内容保留在原来的位置。这样，这个人会很快地一次又一次地重新绘制，但他每200ms只会收到新的坐标和精灵索引。