How to create an scaling animation in Kinetic.js?

Question

I have the following code that is supposed to scale up a shape on mouseover and then scale it back to its original size on mouseout. I have a few problems:

1. How do I change the scale amount?
2. How do I end the animation in a certain time?
3. How do I do 1 and 2 without causing a glitch.
4. When the mouse pointer passes over the shape fast, some frames jump suddenly. How do I fix that?

All I need is a shape that get's bigger slowly when it is moused over, and then returns to its original size when mouse is out.

    <div id="container"></div>
    <script src="js/kinetic.min.js" charset="utf-8"></script>
    <script defer="defer" type="text/javascript">
        function zoomHex() {
        }
        var stage = new Kinetic.Stage({
            container: 'container',
            width: 500,
            height: 500
        });
        var shapesLayer = new Kinetic.Layer();
        var hex = new Kinetic.RegularPolygon({
            x: 250,
            y: 250,
            sides: 6,
            radius: 80,
            fill: '#00D2FF',
            stroke: '#00D2FF',
            strokeWidth: 30,
            lineJoin: 'round'
        });
        var zoomIn = new Kinetic.Animation(function(frame) {
            var period = 1000;
            var duration = 1000;
            zoomAmount = 1;
            var scale =frame.time / period;
            hex.setScale(frame.time / period + zoomAmount);
            if(frame.time > duration) {
                zoomIn.stop();
                this.frame.time = 0;
            }
        }, shapesLayer);
        var zoomOut = new Kinetic.Animation(function(frame) {
            var period = 1000;
            var duration = 1000;
            zoomAmount = 2;
            hex.setScale(frame.time / period - zoomAmount);
            if(frame.time > duration) {
                zoomOut.stop();
                this.frame.time = 0;
            }
        }, shapesLayer);
        hex.on('mouseover', function() {
            zoomIn.start();
            //zoomIn.stop();
        });
        hex.on('mouseleave', function() {
            zoomOut.start();
            //zoomOut.stop();
        });
        shapesLayer.add(hex);
        stage.add(shapesLayer);
    </script>

Answer 1

For this purpose, I would suggest using a Kinetic.Tween instead of a Kinetic.Animation

See this tutorial for basic tween usage: http://www.html5canvastutorials.com/kineticjs/html5-canvas-linear-transition-tutorial-with-kineticjs/

var tween = new Kinetic.Tween({
  node: hex, 
  duration: 1, // <--2) How do I end the animation in a certain time?
  scaleX: 1.5 // <-- 1) How do I change the scale amount?
  scaleY: 1.5 // <-- 1) How do I change the scale amount?
});

//3) How do I do 1 and 2 without causing a glitch.
//4) When the mouse pointer passes over the shape fast, some frames jump suddenly.
hex.on('mouseover', function() {
  tween.play();
});
hex.on('mouseleave', function() {
  tween.reverse();
});

So when you mouseover the hex shape, the tween will play forward and tween the scale to 1.5 (from 1.0 which is the default scale). When you mouseleave the tween will reverse back to the original state of the hex shape.

jsfiddle

NOTE: Technically, you should be able to use the scale property instead of scaleX and scaleY like this:

var tween = new Kinetic.Tween({
  node: hex, 
  duration: 1, //time in seconds
  scale: 1.5 //should scale both x and y
});

But for some reason, it didn't work for me. You can give it a shot though if you'd like.