How to run a KineticJS animation once every second and apply easing to it?

Question

I am creating a chronometer for which I already have all the code working. Now I'm trying to tie the rotation of a 'notch' to the passage of seconds. I have the following code-block:

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

                var notch = self.minutesNotchLayer.get('#minutesNotchShape')[0];

                notch.rotate(rotationAngle);

            }, this.minutesNotchLayer);

            minutesNotchAnimation.start();

How can I execute the animation once every second? Also how can I apply custom easing to it? And lastly... how do I control the length of the animation? I find the KineticJS documentation to be really lacking in places, also there are not a lot of comprehensive resources out there that explain the Animation class in depth.

Thanks in advance!

P.S. Here's a fiddle of the complete code in case anyone needs to check it out --> http://jsfiddle.net/k4xA8/

Answer 1

You can't set the animation interval because this object is not doing for that. If you want to make something more accurate (and use easing), it's a lot easier to employ a Tween instead.

By the way, you can use the frame.timeDiff property, or the frame.time in order to control the animation...

     var minutesNotchCount = 0;
        var minutesNotchAnimation = new Kinetic.Animation(function(frame) {
            minutesNotchCount += frame.timeDiff;
            var notch = self.minutesNotchLayer.get('#minutesNotchShape')[0];
            if (minutesNotchCount >= 40) {
                notch.rotate(0.25);
                minutesNotchCount = 0;
            }

        }, this.minutesNotchLayer);

        minutesNotchAnimation.start();