如何在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>

Answer 1

為此，我建議使用Kinetic.Tween而不是Kinetic.Animation

有關補間的基本用法，請參見本教程： 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();
});

因此，當您將mouseover在十六進制形狀上時，補間將向前播放，並將補間縮放到1.5 （默認值是1.0）。 當您mouseleave ，補間將恢復為十六進制形狀的原始狀態。

jsfiddle

注意：從技術上講，您應該能夠使用scale屬性來代替scaleX和scaleY如下所示：

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

但是由於某種原因，它對我不起作用。 您也可以嘗試一下。