2

从 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。

4

2 回答 2

2

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

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

new Kinetic.Tween({
        node: stone3,
        y: 300,
        /* Eventual easings
        *  duration: 0.5,
        *  easing: Kinetic.Easings.EaseInOut
        */
}).play();
于 2013-05-29T10:01:33.863 回答
2

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

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

TweenLite.to(obj, 2 { setX : 300
                      onUpdate : function () {
                                    obj.getLayer().draw(); }})
于 2013-10-19T13:24:42.477 回答