我该如何用下面的代码设置一个精灵的动画，使其在JavaScript中在屏幕上闪烁2种不同的颜色？或者更确切地说，我该如何修复它？

我一直在尝试从一个精灵的工作表动画本质上是一个标题屏幕。我已经加载了精灵表，但我似乎不明白为什么动画没有发生。我有一个更新函数，运行时不需要参数：

function update(){
     menu.update
}

我的代码开头还有

let frames=0

。 我的问题是当沿着这些线绘制动画或其他东西时。它从动画中绘制第0帧，但不绘制第1帧。我曾尝试将动画师置于“if”语句下，但几次尝试后，我无法让它停止询问参数和/或表达式。（我尝试了一些箭头函数，但我不习惯使用它们，所以我不知道我所做的是对还是错。）

---

我很确定问题出在“if”语句中，我可以让它与这个sprite表上的另一个sprite一起工作；它没有“if”语句，但除了源位置等之外，其他所有内容都是相同的。

这可能是由于一个简单的输入错误：

this.frame = this.frame%this.animation.lenghth;

应改为：

this.frame = this.frame%this.animation.length; // removed the "h"

这是一个交替使用河马的演示：-）

var sprite=document.getElementById（'source'）；
可变宽度=600，
高度=600，
cvs=document.getElementsByTagName（'canvas'）[0]，
ctx=cvs.getContext（'2d'）；
cvs.width=宽度；
cvs.height=高度；
常量菜单={
动画：[{
sX:27，
sY:295
},
{
sX:27，
sY:399
},
],
x:cvs.width/2-118/2，
y:100，
w:118，
h:84，
帧：0，
帧：0，
//动画师
更新：函数（）{
//增量百分比增量周期（速度）
this.frame+=this.frames%5==0？1:0；
//动画的迭代--绘制0，然后绘制1，然后绘制0。。。。
this.frame=this.frame%this.animation.length；
这个.draw（）；
setTimeout（函数（）{
menu.update（）；
}, 300);
},
绘图：函数（）{
让animCounter=this.animation[this.frame]；
//if（status.current==status.Start）{
ctx.drawImage（sprite，animCounter.sX，animCounter.sY）；
//}
}
}
menu.update（）
可能是因为一个简单的打字错误：

this.frame = this.frame%this.animation.lenghth;

应改为：

this.frame = this.frame%this.animation.length; // removed the "h"

这是一个交替使用河马的演示：-）


var sprite=document.getElementById（'source'）；
可变宽度=600，
高度=600，
cvs=document.getElementsByTagName（'canvas'）[0]，
ctx=cvs.getContext（'2d'）；
cvs.width=宽度；
cvs.height=高度；
常量菜单={
动画：[{
sX:27，
sY:295
},
{
sX:27，
sY:399
},
],
x:cvs.width/2-118/2，
y:100，
w:118，
h:84，
帧：0，
帧：0，
//动画师
更新：函数（）{
//增量百分比增量周期（速度）
this.frame+=this.frames%5==0？1:0；
//动画的迭代--绘制0，然后绘制1，然后绘制0。。。。
this.frame=this.frame%this.animation.length；
这个.draw（）；
setTimeout（函数（）{
menu.update（）；
}, 300);
},
绘图：函数（）{
让animCounter=this.animation[this.frame]；
//if（status.current==status.Start）{
ctx.drawImage（sprite，animCounter.sX，animCounter.sY）；
//}
}
}
menu.update（）