javascript - Kinetic.jsでスケーリングアニメーションを作成するには?

Question

マウスオーバーで形状を拡大し、マウスアウトで元のサイズに縮小する次のコードがあります。いくつか問題があります:

1. スケール量を変更するにはどうすればよいですか?
2. 特定の時間内にアニメーションを終了するにはどうすればよいですか?
3. グリッチを発生させずに 1 と 2 を実行するにはどうすればよいですか。
4. マウス ポインタがシェイプ上を高速で通過すると、一部のフレームが突然ジャンプします。どうすれば修正できますか？

必要なのは、マウスを重ねるとゆっくりと大きくなり、マウスを離すと元のサイズに戻る形状だけです。

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