更新

Question

将kineticjs从4.0.5升级到4.5.1后，我得到了

Uncaught TypeError: Object #<Object> has no method 'transitionTo'

以下代码适用于以前的版本：

gameLayer.transitionTo({
        duration: '0.5',
        opacity: 1,
        callback: function() {
            intervalId = setInterval(reDraw, 33);
            isInteractive = true;

        }
    });

什么是transitionTo

中4.5.1的替代功能？

更新

我在Github上打开了issue，根据the guy transitionTo已被删除，并被Tween替换

此致

Answer 1

您可以使用onFinish属性，如下所示：

 var tween = new Kinetic.Tween({
    node: rect, 
    duration: 1,
    x: 400,
    y: 30,
    rotation: Math.PI * 2,
    opacity: 1,
    strokeWidth: 6,
    scaleX: 1.5,
    onFinish: function() {console.log('onFinish');}
  });

Answer 2

另一种选择是TweenLite。它具有比经典Kinetic过渡更多的功能，所以它们已被弃用，TweenLite完全适应KineticJS形状。

这是一个教程，向我们展示了如何使用这些过渡。

http://www.html5canvastutorials.com/kineticjs/html5-canvas-linear-transition-tutorial-with-kineticjs/

  var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 200
  });
  var layer = new Kinetic.Layer();
  var rect = new Kinetic.Rect({
    x: 100,
    y: 100,
    width: 100,
    height: 50,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 2,
    opacity: 0.2
  });

  layer.add(rect);
  stage.add(layer);

  var tween = new Kinetic.Tween({
    node: rect, 
    duration: 1,
    x: 400,
    y: 30,
    rotation: Math.PI * 2,
    opacity: 1,
    strokeWidth: 6,
    scaleX: 1.5
  });

  // start tween after 20 seconds
  setTimeout(function() {
    tween.play();
  }, 2000);

未捕获的TypeError：Object＃<object>没有方法'transitionTo'</object>

更新

2 个答案: