TweenLite 使用详解（译文）转载

川长思鸟来 2022-07-28 05:19 76阅读 0赞

# TweenLite参数说明:           1) $target : Object \- 作为目标的对象， MovieClip或者其它对象           2) $duration : Number\- 动画的时间长度（单位：秒）           3) $vars : Object – 对象，通过属性值，来存贮各种属性参数用于缓动。            （如果你使用TweenLite.from() 方法，这里的参数表示缓动的初始值）              Object 该对象所具有的属性：              alpha: alpha  目标对象应该完成 (或开始，当使用 TweenLite.from()时)的透明度级别.如果                        target.alpha 是1，当缓动被执行的时候，你指定参数为 0.5，它将把透明度从 1 缓动                       到 0.5.              x: 改变 MovieClip的 x 位置,把这个值设置成你希望的 MovieClip 的结束位置(如果你使用的是                  TweenLite.from()这个值表示开始位置). ( y scaleX scaleY rotation等属性不重复说明）              特别的属性 (\*\*可选的\*\*):              delay : Number - 延迟缓动 (以秒为单位).              ease : Function - 缓动函数. 例如，fl.motion.easing.Elastic.easeOut 函数。默认的是                         Regular.easeOut函数。              easeParams : Array - 用来存贮缓动公式所需要的额外数据. 当使用 Elastic 公式并且希望控                                 制一些额外的参数，比如放大系数和缓动时间。大多数的缓动公式是不需要参数                                 的，因此，你不需要给其它的缓动公式传递参数。              autoAlpha : Number - 用它来代替 alpha 属性，可以获得一些副加的效果，比如当 alpha                                值缓动到 0时，自动将 visible 属性改为 false。当缓动开始前，autoAlpha 大                               于0时，它将会把 visible 属性变成 true 。              visible : Boolean - 在缓动结束时，想指定 DisplayObject 的 visible 属性，请使用这个参数              volume : Number - 对soundTransform（MovieClip/SoundChannel/NetStream 等）对                           象中的volume属性（音量大小）进行缓动               tint : Number - 改变 DisplayObject 的颜色，设置一个16进制颜色值之后，当缓动结束时，                      目标对象将被变成这个颜色，（如果使用的是TweenLite.from()，这个值将表示目标对                      象开始缓动时的颜色)。举个例子，颜色值可以设定为0xFF0000。              removeTint : Boolean - 要移除 DisplayObject 颜色，将这个参数设成 true 。              frame : Number - 将 MovieClip 缓动到指帧频。              onStart : Function - 在缓动开始时想要执行某个函数，就将函数的引用（通常是函数名）放                            到这里。如果缓动是带延迟的，那么在缓动开始前该函数不会被执行。              onStartParams : Array - 为缓动开始时要执行的函数传递参数。(可选的)              onUpdate : Function - 缓动过程中，每次更新时调用这里指定的函数(缓动开始后，每一帧被                               触发一次)              onUpdateParams : Array - 给 onUpdate 参数指定的函数传递参数 (可选的)              onComplete : Function - 缓动结束时执行的函数。               onCompleteParams : Array - 给 onComplete 参数指定的函数传递参数 (可选的)              persist : Boolean - 值为 true 时，TweenLite 实例将不会自动被系统的垃圾收集器给收走。                           但是当新的缓动出现时，它还是会被重写（overwritten）默认值为 false.              renderOnStart : Boolean - 如果你使用带有延迟缓动的 TweenFilterLite.from() ，并且阻                                     止缓动的渲染（rendering ）效果，直到缓动真正开始，将这个值设为 true.                                   默认情况下该值为 false ，这会让渲染效果立即被执行，甚至是在延迟的时间                                     还没到之前。             overwrite : int - 当前的缓动被创建以后，通过这个参数可以限制作用于同一个对象的其它缓动                            可选的参数值有：                         \- 0 (没有): 没有缓动被重写。这种模式下，运行速度是最快的，但是需要注意避免创                                          建一些控制相同属性的缓动，否则这些缓动效果间将出现冲突。                         \- 1 (全部): (这是默认值，除非 OverwriteManager.init() 被调用过)对于同一对象的                                          所有缓动在创建时将会被完全的覆盖掉。                                TweenLite.to(mc, 1, \{x:100, y:200\});                                TweenLite.to(mc, 1, \{x:300, delay:2\}); //后创建的缓动将会覆盖掉先前创                                     建的缓动（可以起到这样的作用：缓动进行到一半时被中断，执行新的缓动）                        \-2 (自动): (当 OverwriteManager.init() 被执行后,会根据具体的属性值进行选择) 只                                           覆盖对同一属性的缓动。                                    TweenLite.to(mc, 1, \{x:100, y:200\});                                   TweenLite.to(mc, 1, \{x:300\}); //only  "x" 属性的缓动将被覆盖                        \- 3 (同时发生): 缓动开始时，覆盖全部的缓动。                                     TweenLite.to(mc, 1, \{x:100, y:200\});                                     TweenLite.to(mc, 1, \{x:300, delay:2\});                                      //不会覆盖先前的缓动，因为每二个缓动开始时，第一个缓动已经结束了。  举例:            将实例名为 "clip\_mc" 的 MovieClip 透明度降到 50% (0.5) ，并将它 x 轴位置移动到 120 ，   将音量将到 0，缓动总共用时 1.5 秒，代码如下：  import gs.TweenLite;   TweenLite.to(clip\_mc,  1.5 , \{alpha: 0.5 , x: 120 , volume: 0 \});          如果希望使用更高级的缓动函数在 5 内，将 alpha 变到 0.5，将 x 移动 到 120 ，使用    "easeOutBack" 弹性函数，缓动整体延迟 2 秒发生，并且在缓动结束时，执行 "onFinishTween"    函数，并且为这个函数传递几个参数，(一个数值 5 以及对 clip\_mc 的引用)，代码如下：  import gs.TweenLite;   import fl.motion.easing.Back;   TweenLite.to(clip\_mc,  5 , \{alpha: 0.5 , x: 120 , ease:Back.easeOut, delay: 2 , onComplete: onFinishTween, onCompleteParams:\[ 5 , clip\_mc\]\});    function  onFinishTween(argument1:Number, argument2:MovieClip): void  \{      trace( " The tween has finished! argument1 =  "   \+  argument1  \+   " , and argument2 =  "   \+  argument2);   \}   如果你的舞台上的 MovieClip 已经停在了它的结束位置，你只想让它花上5秒种回到这个位置，   (只需要改变 y 属性，比当前位置高 100 像素的位置，让它从那里下落), 代码如下（这次使用   的是 TweenLite.from 译者注):  import gs.TweenLite;   import fl.motion.easing.Elastic;   TweenLite.from(clip\_mc,  5 , \{y: " \-100 " , ease:Elastic.easeOut\});     \- 给参数值加上引号，表示对指定的属性进行相应操作。比如，使用  TweenLite.to(mc,  2 , \{x: " \-20 " \});   它将 mc.x 向左移动 20 像素，与此相同效果的代码是：  TweenLite.to(mc,  2 , \{x:mc.x  \-   20 \});  \- 你可以用别的缓动函数替换 TweenLite 默认的缓动函数: Regular.easeOut.   \- 必须使用 Flash Player 9 或之后版本的播放器 (ActionScript 3.0)   \- 可以对任何 MovieClip 使用 "volume" 缓动,就比如：TweenLite.to(myClip\_mc, 1.5, \{volume:0\});   \- 可以将 MovieClip 设定成某种颜色，使用 "tint" 参数,比如:  TweenLite.to(myClip\_mc,  1.5 , \{tint: 0xFF0000 \});  \- 想要对数组内容进行缓动，将数值放到一个叫 endArray 的数组中即可，例如:  var  myArray:Array  =  \[ 1 , 2 , 3 , 4 \];   TweenLite.to(myArray,  1.5 , \{endArray:\[ 10 , 20 , 30 , 40 \]\});  \- 可以在任何时候终止缓动，使用 TweenLite.killTweensOf(myClip\_mc); 函数。如果想强制终止   缓动，可以传递一个 true 做为第二个参数，比如 TweenLite.killTweensOf(myClip\_mc, true);   \- 取掉延迟回调函数，用 TweenLite.killDelayedCallsTo(myFunction\_func);这项功能可以用来控制   回调函数的优先级。   \- 使用 TweenLite.from() 方法，可以使用对象从别的位置回到当前的位置。例如，你可以将对象在舞   台上摆放整齐（缓动结束时的位置），然后利用缓动，让它们跑到那个位置上去，你可以将缓动的初始   位置值 x 或 y 或 alpha (或者其它你需要的属性)当做参数传递给这个方法函数。  ![复制代码][copycode.gif]  import gs.TweenLite;   import gs.easing. \* ;      stage.addEventListener(MouseEvent.CLICK, onCK);    function  onCK(evt) \{           TweenLite.to(mc,  0.5 , \{x:mouseX, y:mouseY, rotation: 360 \});   \}  ![复制代码][copycode.gif]  在舞台上点击，会让mc 元件旋转并跑动到鼠标位置。   来个应用举例：  ![复制代码][copycode.gif]  import gs.TweenLite;   import gs.easing. \* ;    // 因为 TweenLite 中提供有延迟缓动的参数 delay ，因此不需要使用定时器 timer 类，并且，缓动的开始、中间、结束位置    // 均可以指定相关的处理函数，所以 timer 更加的不需要。     var  pic\_arr:Array  =   new  Array();   pic\_arr.push(  new  Pic1());   pic\_arr.push(  new  Pic2());   pic\_arr.push(  new  Pic3());   pic\_arr.push(  new  Pic4());   pic\_arr.push(  new  Pic5());   pic\_arr.push(  new  Pic6());   //pic类型为MovieClip，注册点在中心    var  originScaleX:Number  =   0.47 ;    var  originWidth:Number  =  pic\_arr\[ 0 \].width  \*  originScaleX;    var  dist  =  originWidth  \+   15 ;       for  ( var  i: int   =   0 ; i < pic\_arr.length; i \++ ) \{            // 指定所有图块的大小及位置             pic\_arr.scaleX  =  pic\_arr.scaleY  =  originScaleX;           pic\_arr.x  =  i  \*  dist  \+   0.5   \*  originWidth  \+   15 ;           pic\_arr.y  =   200 ;            addChild( pic\_arr );   \}    function  pushAside( )\{            // 根据中心图块的大小变化，让周边图块发生移动              var  step  =  pic\_arr\[ 2 \].width / 2 + 0.5 \* originWidth + 15;             pic\_arr\[ 0 \].x  =  pic\_arr\[ 2 \].x  \-  step  \-  dist;           pic\_arr\[ 1 \].x  =  pic\_arr\[ 2 \].x  \-  step;           pic\_arr\[ 3 \].x  =  pic\_arr\[ 2 \].x  \+  step;           pic\_arr\[ 4 \].x  =  pic\_arr\[ 2 \].x  \+  step  \+  dist;           pic\_arr\[ 5 \].x  =  pic\_arr\[ 2 \].x  \+  step  \+   2   \*  dist;   \}    function  fadePic()\{            // 降低透明度             TweenLite.to(pic\_arr\[ 0 \],  1 , \{alpha: 0.5 , ease:Back.easeOut\});           TweenLite.to(pic\_arr\[ 1 \],  1 , \{alpha: 0.5 , ease:Back.easeOut\});           TweenLite.to(pic\_arr\[ 3 \],  1 , \{alpha: 0.5 , ease:Back.easeOut\});           TweenLite.to(pic\_arr\[ 4 \],  1 , \{alpha: 0.5 , ease:Back.easeOut\});           TweenLite.to(pic\_arr\[ 5 \],  1 , \{alpha: 0.5 , ease:Back.easeOut\});   \}    function  lightPic()\{            // 增大透明度             TweenLite.to(pic\_arr\[ 0 \],  1 , \{alpha: 1 , ease:Back.easeOut\});           TweenLite.to(pic\_arr\[ 1 \],  1 , \{alpha: 1 , ease:Back.easeOut\});           TweenLite.to(pic\_arr\[ 3 \],  1 , \{alpha: 1 , ease:Back.easeOut\});           TweenLite.to(pic\_arr\[ 4 \],  1 , \{alpha: 1 , ease:Back.easeOut\});           TweenLite.to(pic\_arr\[ 5 \],  1 , \{alpha: 1 , ease:Back.easeOut\});   \}    function  enLargeMotion()\{            // 中心图块放大的效果             TweenLite.to(pic\_arr\[ 2 \],  0.8 , \{scaleX: 0.8 , scaleY: 0.8 , ease:Back.easeOut,delay: 2 ,onStart:fadePic,onUpdate:pushAside,onComplete:toSmallMotion\});   \}    function  toSmallMotion()\{            // 中心图块缩小的效果             TweenLite.to(pic\_arr\[ 2 \],  0.8 , \{scaleX: originScaleX, scaleY: originScaleX, ease:Back.easeOut,delay: 1 ,onStart: lightPic,onUpdate: pushAside,onComplete:toLeftMotion\});   \}    function  toLeftMotion()\{            // 中心图块向左移动的效果              var  mc:MovieClip  =  pic\_arr\[ 2 \];           TweenLite.to(mc,  0.8 , \{x:mc.x  \-  dist , ease:Back.easeOut,delay: 1 ,onUpdate:pushAside,onComplete:rePlay\});   \}    function  rePlay()\{            // 将数组中的首个图块搬到最后一个位置，同时将该块从舞台左侧移动到舞台右侧              var  mc  =  pic\_arr.shift();           pic\_arr.push( mc );           mc.x  =  pic\_arr\[ 4 \].x  \+  originWidth  \+   15 ;                    // 重新启动缓动效果             enLargeMotion();   \}    // 首次启缓动效果     enLargeMotion();  ![复制代码][copycode.gif]      #

[copycode.gif]: /images/20220727/c44d366224554ce78b0dd5e6fed22660.png