Question

我有以下代码，应该在鼠标悬停时放大一个形状，然后在mouseout上将其缩放回原始大小。我有一些问题：

如何更改比例金额？
如何在一定时间内结束动画？
如何在不造成故障的情况下执行1和2。
当鼠标指针快速越过形状时，一些帧会突然跳跃。我该如何解决这个问题？

我所需要的只是一个在鼠标悬停时慢慢变大的形状，然后在鼠标移出时恢复原来的大小。

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

但由于某种原因，它对我不起作用。如果你愿意的话，你可以试一试。

如何在Kinetic.js中创建缩放动画？

1 个答案: