Question

好的，解决了。将补间放在单击功能中。

  star.on('click', function() {

    Spin60 = new Kinetic.Tween({
        node: star,
        rotationDeg: star.rotation()+60,
        duration: 1,
        easing: Kinetic.Easings.EaseInOut,
        onFinish: function() {  
            console.log(star.rotation());
        }
    }).play(); 

  });

我正在尝试使用on click事件使用Kinetic.Tween旋转星形元素。第一个补间工作，但连续点击不起作用。这是我的错误，功能的限制，还是我应该使用Kinetic.Animation？

http://jsfiddle.net/2GLF4/

var stage = new Kinetic.Stage({
    container: 'container',
    width: 200,
    height: 200
});

var layer = new Kinetic.Layer();

var star = new Kinetic.Star({
    x: stage.width() / 2,
    y: stage.height() / 2,
    numPoints: 17,
    innerRadius: 30,
    outerRadius: 70,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 4,

});

star.on('click', function () {
    Spin60.play();
});

layer.add(star);
stage.add(layer);


console.log(star.rotation());


var Spin60 = new Kinetic.Tween({
    node: star,
    rotation: +60,
    duration: 3,
    easing: Kinetic.Easings.EaseInOut,
    onFinish: function () {
        console.log(star.rotation());
    }
});

Answer 1

您可以为补间的.finish事件提供回调函数。

补间完成后会触发回调。

myTween.finish(callback)

连续的补间Keneticjs 5.1.0

1 个答案: