0

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

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

1 回答 1

1

为此，我建议使用 aKinetic.Tween而不是 aKinetic.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
});

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

于 2013-09-09T14:50:05.190 回答