我如何使用此代码为精灵制作动画以在 JavaScript 屏幕上闪烁 2 种不同的颜色？或者更确切地说，我将如何解决它？

Question

我一直在尝试从 sprite sheet 中为标题屏幕制作动画。我加载了 sprite sheet，但我似乎无法弄清楚为什么动画没有发生。我有一个不需要参数的更新函数运行:

function update(){
     menu.update
}

我的代码开头也有 let frames = 0。我的问题是在沿着这些线绘制动画或其他东西时。它从动画中绘制第 0 帧而不是第 1 帧。我曾尝试将动画师放在 'if' 语句下，但经过几次尝试后，我无法让它停止询问参数 and/or 表达式。（我尝试了一些箭头函数，但我不习惯使用它们，所以我不知道我这样做是对还是错。）

const menu = {
    animation : [
        {sX: 27, sY: 295},
        {sX: 27, sY: 399},
    ],
    x : cvs.width/2 - 118/2,
    y : 100,
    w : 118,
    h : 84,

    frame : 0,


     // Animator
     update : function(){
         // Incrementation % incrementation period (speed)
        this.frame += frames%5 == 0 ? 1 : 0;
        // Iteration of animation--draws 0 then 1 then 0....       
        this.frame = this.frame%this.animation.lenghth;

    },



    draw : function(){
        let animCounter = this.animation[this.frame];

        if(status.current == status.Start){

            ctx.drawImage(sprite, animCounter.sX, animCounter.sY, this.w, this.h, this.x, this.y, this.w, this.h);
        }
    },

   
}

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

Answer 1

这可能是由于一个简单的错字：

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

应改为：

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

这是一个交替河马的演示:-)

var sprite = document.getElementById('source');
var width = 600,
  height = 600,
  cvs = document.getElementsByTagName('canvas')[0],
  ctx = cvs.getContext('2d');
cvs.width = width;
cvs.height = height;

const menu = {
  animation: [{
      sX: 27,
      sY: 295
    },
    {
      sX: 27,
      sY: 399
    },
  ],
  x: cvs.width / 2 - 118 / 2,
  y: 100,
  w: 118,
  h: 84,

  frame: 0,
  frames: 0,

  // Animator
  update: function() {
    // Incrementation % incrementation period (speed)
    this.frame += this.frames % 5 == 0 ? 1 : 0;
    // Iteration of animation--draws 0 then 1 then 0....       
    this.frame = this.frame % this.animation.length;

        this.draw();
    window.setTimeout(function() {
      menu.update();
    }, 300);
  },

  draw: function() {
    let animCounter = this.animation[this.frame];
    //if (status.current == status.Start) {

      ctx.drawImage(sprite, animCounter.sX, animCounter.sY);
    //}
  }

}
menu.update();

<canvas></canvas>
<img id="source"
       src="https://mdn.mozillademos.org/files/5397/rhino.jpg"
       width="300" height="227" style="display:none;">

我如何使用此代码为精灵制作动画以在 JavaScript 屏幕上闪烁 2 种不同的颜色？或者更确切地说，我将如何解决它？

How would I animate a sprite to flash 2 different colors on screen in JavaScript, with this code? Or rather how would I fix it?

javascript

animation

modulo