KineticJS和Tween时间轴，与GSAP JS集成 [英] KineticJS and Tween Timelines, integrating with GSAP JS

问题描述

从版本4.5.1开始，旧的Transition类已淘汰，并且"KineticJS建议无缝集成的GreenSock动画平台".

as of version 4.5.1 the old Transition class has been retired and "KineticJS recommends the GreenSock Animation Platform which integrates seamlessly".

我正在使用KineticJS编写一个画布游戏，该游戏在很大程度上依赖于旧的Transition类，但已经阅读了我非常渴望升级的GSAP功能.

I am writing a canvas game using KineticJS which relied quite heavily on that old Transition class but having read up on GSAP's abilities I'm quite keen to upgrade.

我的问题是，当我尝试甚至使用最简单的TweenLite函数时，它们也会被我的画布完全忽略.我猜想我肯定缺少明显的东西，因为我还没有看到其他人报告过问题.

My problem is that when I try using even the simplest TweenLite functions they are completely ignored by my canvas. I'm guessing I must be missing something obvious because I haven't seen anyone else reporting problems.

有人知道如何使TweenLite和TimelineLite与Kinetic一起使用吗?任何帮助将不胜感激！

Does anyone know how to get TweenLite and TimelineLite to work with Kinetic? Any help would be greatly appreciated!

(我将在下面提供一些代码示例，这些代码示例如下).

(I'll include code samples below of what I currently have).

   //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.

推荐答案

问题有点老了，但由于我遇到了同样的问题.答案很简单.喘气支持方法和属性.它将自动确定使用什么:

question is a bit old, but as i just had the same problem. the answer is simple. gasp supports methods and properties. it will automatically determine what to use:

要操纵一个dynamicjs对象，只需告诉它要使用什么设置器，别忘了绘制该对象.您可以为此使用onUpdate回调:

To manipulate a kineticjs object just tell it what setter to use, and don't forget to draw the object. you could use the onUpdate callback for that:

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

这篇关于KineticJS和Tween时间轴，与GSAP JS集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！