KineticJS 和 Tween Timelines，与 GSAP JS 集成

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

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

要操作一个 kineticjs 对象，只需告诉它使用什么 setter，不要忘记绘制该对象。您可以为此使用 onUpdate 回调：

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

Answer 2

GSAP 过渡对我来说也从未真正奏效过。由于 Eric 推出了 KineticJS 版本 4.5.2 的新 Kinetic.Tween 类（4.5.1 也有它们，但舞台上的补间是不可能的），我建议使用这个类进行简单的转换。

使用 Kinetic.Tween 类的 stone3-shape 示例：

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