Question

从版本4.5.1开始，旧的Transition类已经退役，“KineticJS推荐无缝集成的GreenSock动画平台”。

我正在使用KineticJS编写一个画布游戏，它非常依赖于旧的Transition类，但是我已经阅读了GSAP的能力，我非常渴望升级。

我的问题是，当我尝试使用最简单的TweenLite函数时，我的画布完全忽略它们。我猜我必须遗漏一些明显的东西，因为我没有看到其他人报告问题。

有谁知道如何让TweenLite和TimelineLite与Kinetic合作？任何帮助将不胜感激！

（我将在目前的代码示例中包含以下代码示例。）

   //Basic Kinetic setup: 

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

var layer1 = new Kinetic.Layer();

layer1.add(levelOne);
              .
              .
    //The KineticJS shape I'm trying to tween   

    var stone3 = new Kinetic.Circle({
        x: 664,
        y: 528,
        radius: 10,
        fill: 'white',
        stroke: 'black',
        strokeWidth: 2,
        draggable: true
    });

              .
              .

     var levelOne = new Kinetic.Group();
     levelOne.add(stone3);

              .
              .

     TweenLite.to(stone3, 2, {top:"300"});  //has absolutely no effect

我正在使用

 <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

导入GSAP。

Answer 1

GSAP的转变对我来说也没有真正起作用。由于Eric已经推出了新的Kinetic.Tween-class版本4.5.2（4.5.1也有，但舞台上的补间不可能）KineticJS，我建议使用这个类进行简单的过渡。

使用Kinetic.Tween-class的stone3形状示例：

new Kinetic.Tween({
        node: stone3,
        y: 300,
        /* Eventual easings
        *  duration: 0.5,
        *  easing: Kinetic.Easings.EaseInOut
        */
}).play();

Answer 2

问题有点老，但因为我遇到了同样的问题。答案很简单。 gasp支持方法和属性。它会自动确定使用的内容：

要操纵kineticjs对象，只需告诉它使用什么setter，并且不要忘记绘制对象。您可以使用onUpdate回调：

TweenLite.to(obj, 2 { setX : 300
                      onUpdate : function () {
                                    obj.getLayer().draw(); }})

KineticJS和Tween Timelines，与GSAP JS集成

2 个答案: