KTween补间引擎的应用入门

       第三方的补间动画引擎Ktween（大家可以到这里下载）。近段时间也涉及到一些动画方面的脚本编写，使用Flash中的Tween类其实可以实现，但是在Flex中要使用这个类是挺麻烦的（注：我的项目中并没有使用Flex SDK）。最后经朋友介绍才开始接触Ktween类库。Ktween是一个第三方的补间动画脚本库，它是一个轻量级的脚本库，在效率方面比Tween高（有一篇文章有讲到关于Ktween与各种动画脚本库的比较）。下面我们先来看看Ktween的类库的结构。

       我们把KTWeen下载下来后解压可得到如下图所示的文件结构，其中net.kawa.tween包中有三个类，分别是KTJob、KTManager和KTween类。其中KTJob类是负责更新和控制实现补间动作的目标对象的状态。KTManager类则是负责管理和控制所有补间动作的功能类，使用此类可以轻松地实现多种补间动作混合使用，稍后在例子中我会举例说明。而KTween类则可以看作是KTManager的一个代理类，提供了一些简易接口来实现动画。

       对于net.kawa.tween.easing包中的所有类都是缓动方式类。包中的每一个类都提供了不同的缓冲实现方式。以方便不同的动画效果。

       而net.kawa.tween.util包中仅包含两个类，一个是KTUtil和KTColorTransformUtil。KTUtil类的作用主要是重置对象状态，如Filter、ColorTransform、Point等对象。可以看到类里面定义的都是静态方法而且都是以reset开头。至于KTColorTransformUtil类则是用于生成ColorTransform指定状态如亮度、颜色和灰度。不过这里我们不讨论这两个类的使用方法，其实他们的使用方法很简单，大家有兴趣可以自己尝试。

‍

面我将结合例子开始一步一步讲述Ktween的使用步骤。我们先启动Flex或Flash，然后新建ActionScript项目（Flash则新建影片），然后在文档类中新建一个Sprite对象，并为这个Sprite画上一个圆形。这部分的代码如下：

    public class demo extends Sprite    {        public function demo()        {            _circle=new Sprite();            _circle.graphics.beginFill(0x000000);            _circle.graphics.drawCircle(0,0,20);            _circle.graphics.endFill();            _circle.x=100;            _circle.y=100;            addChild(_circle);        }        private var _circle:Sprite;    }

    测试一下就可以看到一个黑色的圆形在场景中，现在我们就开始使用KTween来进行一些简单的动画，在使用KTween前我们要先引用KTween脚本库，如果你下载的压缩包解压到你当前项目中的话那你可以不需要进行这步操作。否则你需要到“项目属性--构建路径--源路径”面板中添加KTween所处的目录路径。库文件进行引用后，现在我们就让小球开始动起来。下面的代码中我把小球做一个水平移动从(100,100)移动到(200,200)，相对于其它引擎只能在单个属性上进行动画应用为说方便很多。代码如下：

  KTween.to(_circle,2,{x:200,y:200},Quart.easeOut);

    就这样一行代码就可以现实球的移动了。我们可以看到to的函数原型如下：

  function to(target:*,duration:Number, to:Object, ease:Function=null, callback:Function=null):KTJob

    此方法的第一个参数是动画的目标对象，在这里因为要移动的是球，所以就是_circle对象。而第二个是动画的持续时间，以秒为单位。而第三个参数就是动画对象的终止状态。所谓的终止状态简单来说就是在动画播放结束后目标对象属性的取值。我在这里设置了x为200，也就是说等执行动作完毕后_circle的x属性的值就是200。这个参数的取值有一点需要注意的是参数中的属性名称一定要跟你的目标对象中的属性要相对应，否则会造成程序异常。第四个参数就是缓冲的实现方式，其对应easing包中的任意一种缓动类。第五个参数为一个回调的方法，这个方法会在动作执行完毕后调用。例如我要在_circle移动结束后在控制台输出ok，则可以写成如下形式：

  protectedfunction endMove():void {    trace(“ok”);  }  KTween.to(_circle,2,{x:200},Quart.easeOut,endMove);

    对于to函数其的作用有必要在这里跟大家说明一下，顾名思义他就是使目标对象从当前状态过渡到下一状态。与to函数对应的函数有from（此函数的声明和to函数结构一样这里就不再讲述了），他就是从前一状态过渡到当前状态。这两个函数都要借助到目标对象的当前状态，那如果我需要从某一个状态过渡到另外一个状态的时候，这两个函数就不能够满足要求了。这时候我们可以使用KTween.fromTo函数来实现，他的作用就是让目标对象从一个状态过渡到另外一个状态，因此他的函数声明相对于to函数而已也多了一个from的参数用来指定起始状态。原型如下：

  function fromTo(target:*,duration:Number, from:Object, to:Object, ease:Function = null,callback:Function = null):KTJob;

    其余的参数意义和to函数一样，这里就不再细述了。我们现在知道一个动画执行完毕后会调用callback函数。但是如果想要获取到指定动画对象在执行动画时特定的状态呢（如动画开始、执行、结束等）？这时候可以监听to、from或fromTo函数返回的KTJob对象的事件来识别动画所处的状态。KTJob的事件列表如下：a

事件名称

说明

init

初始化事件，当动画开始时触发。

change

变更事件，在执行动画过程中，目标对象的属性值变更时触发。

complete

完毕事件，动画执行完毕时触发。

close

关闭事件，动画执行完毕后KTJob将会被关闭释放，此时触发。

cancel

取消事件，动画取消时触发。

       对于单个对象动画到此已经讲述完毕，对于多个对象执行动画其实原理一样，只要多次调用KTween的to、from或者fromTo就能够实现。下面我们来探讨这篇文章中剩下的最后一个问题，刚才上面说的to、from和fromTo方法都是一调用就马上执行动画的，那么如果我想做一个相对复杂一点的动画我需要在设定的事件之内执行某些动画，而且这些动画都是有一个先后顺序的，那么只用上面提供的三种方法就显得有点力不从心了（注：也可以实现但是时间方面要我们自己把握）。幸好KTween为我们提供了一个叫queue的方法，此方法允许我们添加一系列的动画序列，并且可以设置动画的延时执行，可以让动画按照我们设想的时间来进行执行。下面我们先看看此方法的声明：

  function queue(job:KTJob, delay:Number= 0):void;

       从上面的声明可以看出来，该方法和to、from或fromTo不同的地方是他需要接收一个KTJob作为他的第一个参数，我们都知道KTJob类对象是负责目标对象的动画执行和状态监控的。这个方法不再想前面说到的方法那样帮我们构造KTJob对象了，现在由我们自己来构造KTJob对象并传递进动画序列中。至于KTJob对象的构造和设置也非常简单，稍后在下面的例子中将会看到。至于第二个参数就是解决我上面说的那个问题的关键，他是用来指定动画的延时播放的，以秒为单位。为了方便理解我把上面的例子稍微修改一下，小球大概的动画是先从{100,100}移动到{200,200}，然后再由{200,200}移动回{100,100}。代码如下：

  var job1:KTJob=new KTJob(_circle);  job1.duration=2;  job1.ease=Quart.easeOut;  job1.to={x:200,y:200};  var job2:KTJob=new KTJob(_circle);  job2.duration=2;  job2.ease=Quart.easeOut;  job2.to={x:100,y:100};  KTween.queue(job1);  KTween.queue(job2,2);

    从代码中可以看出来，KTJob构造时需要指定动画的目标对象，然后其属性均与KTween中to、from或者fromTo中的参数相对应，这样理解起来就不难了。等创建后调用queue加入到序列中执行动画。小球就会按照你设置的动画来进行播放。