Question

我正在尝试动画从页面左侧向右移动然后再返回的图像。

这与此示例非常相似：

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

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

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

Answer 1

请参阅：

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

Is wanting to control the FPS of my animation a good reason to continue using setTimeout in stead of requestAnimationFrame?

requestAnimationFrame at a limited framerate

你基本上不得不考虑必须覆盖内置的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

也许这也有帮助：

在动画功能中，我放置了一个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);

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

2 个答案: