CODEWITHSUNDEEP
kineticjs
angio
angio

Reputation: 83

How to set the framerate for a simple animation of an image

I am trying to animate an image going from the left side of the page to the right and then back again.

It is very similar to this example:

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

I have tried my application on both mobile and desktop and I get a very different framerate. Is there any way to set the framerate for simple animations like this so that the time for the image to move from on side to the other always will be the same on all devices and browsers?

I saw that you can set it for Sprites but not for animations.

Upvotes: 0

Views: 1603

Answers (2)

Manuel Gruschka
Manuel Gruschka

Reputation: 72

Maybe this helps also:

Inside the Animation function I placed a if query to be sure, only that the animation only works after x seconds:

            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);

Upvotes: 1

SoluableNonagon
SoluableNonagon

Reputation: 11755

See:

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

You're basically looking at having to over-ride the built-in requestAnimationFrame functionality (which is made to make animations as fast as possible), and creating timers instead, but currently, no functionality built into kineticjs to set framerate for an animation.

You can go into the .js file you download from the kineticjs site and mess with this code: 

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);
};
}

Upvotes: 1

Related Questions