integration - KineticJS 和 Tween 时间线，与 GSAP JS 集成

Question

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

我正在使用 KineticJS 编写一个 Canvas 游戏，该游戏很大程度上依赖于旧的 Transition 类，但在阅读了 GSAP 的功能后，我非常热衷于升级。

我的问题是，当我尝试使用最简单的 TweenLite 函数时，它们会被我的 Canvas 完全忽略。我猜我一定错过了一些明显的东西，因为我没有看到其他人报告问题。

有谁知道如何让 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(); }})