kineticjs - 如何为图像的简单动画设置帧速率

Question

我正在尝试为从页面左侧到右侧然后再返回的图像设置动画。

它与此示例非常相似：

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-animate-position-tutorial/

我已经在移动设备和台式机上尝试过我的应用程序，但我得到了非常不同的帧速率。有没有办法为这样的简单动画设置帧速率，以便图像从一侧移动到另一侧的时间在所有设备和浏览器上总是相同的？

我看到您可以为 Sprites 设置它，但不能为动画设置它。

Answer 1

看：

https://github.com/mrdoob/three.js/issues/642

想要控制动画的 FPS 是否是继续使用 setTimeout 而不是 requestAnimationFrame 的好理由？

requestAnimationFrame 以有限的帧速率

您基本上是在考虑必须覆盖内置的 requestAnimationFrame 功能（旨在尽可能快地制作动画），并改为创建计时器，但目前 kineticjs 中没有内置功能来设置动画的帧速率。

您可以进入从 kineticjs 网站下载的 .js 文件，并弄乱以下代码：

Kinetic.Animation._animationLoop = function() {
    var that = this;
    if(this.animations.length > 0) {
        this._runFrames();
        Kinetic.Animation.requestAnimFrame(function() {
            that._animationLoop();
        });
    }
    else {
        this.animRunning = false;
    }
};
Kinetic.Animation._handleAnimation = function() {
    var that = this;
    if(!this.animRunning) {
        this.animRunning = true;
        that._animationLoop();
    }
};
RAF = (function() {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || Kinetic.Animation.fixedRequestAnimFrame;
})();

Kinetic.Animation.requestAnimFrame = function(callback) {
    var raf = Kinetic.DD && Kinetic.DD.moving ? this.fixedRequestAnimFrame : RAF;
    raf(callback);
};
}

Answer 2

也许这也有帮助：

在 Animation 函数中，我放置了一个 if 查询以确保动画仅在 x 秒后起作用：

            var lastTime = 1000;
    var frameRate = 500;

    var anim = new Kinetic.Animation(function(frame) {

        if(frame.time > (lastTime + frameRate)){
            **YOUR CODE HERE** 

            lastTime = frame.time;
        }


    }, this.layer);