热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

TweenLite使用详解(译文)转载

TweenLite参数说明:1)$target:Object-作为目标的对象,MovieClip或者其它对象2)$duration:Number-动画的时间长度&#x

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 (或者其它你需要的属性)当做参数传递给这个方法函数。

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});
}

在舞台上点击,会让mc 元件旋转并跑动到鼠标位置。
来个应用举例:

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 &#61; 0; i<pic_arr.length; i&#43;&#43;) {
        
//指定所有图块的大小及位置
        pic_arr.scaleX &#61; pic_arr.scaleY &#61; originScaleX;
        pic_arr.x 
&#61; i * dist &#43; 0.5 * originWidth &#43; 15;
        pic_arr.y 
&#61; 200
        addChild( pic_arr );
}
function pushAside( ){
        
//根据中心图块的大小变化&#xff0c;让周边图块发生移动
        var step &#61; pic_arr[2].width/2 &#43; 0.5 * originWidth &#43; 15;
        pic_arr[0].x &#61; pic_arr[2].x - step - dist;
        pic_arr[
1].x &#61; pic_arr[2].x - step;
        pic_arr[
3].x &#61; pic_arr[2].x &#43; step;
        pic_arr[
4].x &#61; pic_arr[2].x &#43; step &#43; dist;
        pic_arr[
5].x &#61; pic_arr[2].x &#43; step &#43; 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 &#61; pic_arr[2];
        TweenLite.to(mc, 
0.8, {x:mc.x - dist , ease:Back.easeOut,delay:1,onUpdate:pushAside,onComplete:rePlay});
}
function rePlay(){
        
//将数组中的首个图块搬到最后一个位置&#xff0c;同时将该块从舞台左侧移动到舞台右侧
        var mc &#61; pic_arr.shift();
        pic_arr.push( mc );
        mc.x 
&#61; pic_arr[4].x &#43; originWidth &#43; 15;        
        
//重新启动缓动效果
        enLargeMotion();
}
//首次启缓动效果
enLargeMotion();


推荐阅读
  • Java序列化对象传给PHP的方法及原理解析
    本文介绍了Java序列化对象传给PHP的方法及原理,包括Java对象传递的方式、序列化的方式、PHP中的序列化用法介绍、Java是否能反序列化PHP的数据、Java序列化的原理以及解决Java序列化中的问题。同时还解释了序列化的概念和作用,以及代码执行序列化所需要的权限。最后指出,序列化会将对象实例的所有字段都进行序列化,使得数据能够被表示为实例的序列化数据,但只有能够解释该格式的代码才能够确定数据的内容。 ... [详细]
  • 抽空写了一个ICON图标的转换程序
    抽空写了一个ICON图标的转换程序,支持png\jpe\bmp格式到ico的转换。具体的程序就在下面,如果看的人多,过两天再把思路写一下。 ... [详细]
  • JDK8新特性详细介绍[java入门]
    本文由java零基础入门栏目为大家介绍JDK8中的一些新特性,欢迎大家来纠错指正!JDK8中的新特性主要有:1、函数式编程;2、Lambda表达式;3、函数式接口;4、方法引用;5 ... [详细]
  • 本文介绍了[从头学数学]中第101节关于比例的相关问题的研究和修炼过程。主要内容包括[机器小伟]和[工程师阿伟]一起研究比例的相关问题,并给出了一个求比例的函数scale的实现。 ... [详细]
  • 成功安装Sabayon Linux在thinkpad X60上的经验分享
    本文分享了作者在国庆期间在thinkpad X60上成功安装Sabayon Linux的经验。通过修改CHOST和执行emerge命令,作者顺利完成了安装过程。Sabayon Linux是一个基于Gentoo Linux的发行版,可以将电脑快速转变为一个功能强大的系统。除了作为一个live DVD使用外,Sabayon Linux还可以被安装在硬盘上,方便用户使用。 ... [详细]
  • 本文讨论了在openwrt-17.01版本中,mt7628设备上初始化启动时eth0的mac地址总是随机生成的问题。每次随机生成的eth0的mac地址都会写到/sys/class/net/eth0/address目录下,而openwrt-17.01原版的SDK会根据随机生成的eth0的mac地址再生成eth0.1、eth0.2等,生成后的mac地址会保存在/etc/config/network下。 ... [详细]
  • 本文介绍了机器学习手册中关于日期和时区操作的重要性以及其在实际应用中的作用。文章以一个故事为背景,描述了学童们面对老先生的教导时的反应,以及上官如在这个过程中的表现。同时,文章也提到了顾慎为对上官如的恨意以及他们之间的矛盾源于早年的结局。最后,文章强调了日期和时区操作在机器学习中的重要性,并指出了其在实际应用中的作用和意义。 ... [详细]
  • Redis底层数据结构之压缩列表的介绍及实现原理
    本文介绍了Redis底层数据结构之压缩列表的概念、实现原理以及使用场景。压缩列表是Redis为了节约内存而开发的一种顺序数据结构,由特殊编码的连续内存块组成。文章详细解释了压缩列表的构成和各个属性的含义,以及如何通过指针来计算表尾节点的地址。压缩列表适用于列表键和哈希键中只包含少量小整数值和短字符串的情况。通过使用压缩列表,可以有效减少内存占用,提升Redis的性能。 ... [详细]
  • 模板引擎StringTemplate的使用方法和特点
    本文介绍了模板引擎StringTemplate的使用方法和特点,包括强制Model和View的分离、Lazy-Evaluation、Recursive enable等。同时,还介绍了StringTemplate语法中的属性和普通字符的使用方法,并提供了向模板填充属性的示例代码。 ... [详细]
  • STL迭代器的种类及其功能介绍
    本文介绍了标准模板库(STL)定义的五种迭代器的种类和功能。通过图表展示了这几种迭代器之间的关系,并详细描述了各个迭代器的功能和使用方法。其中,输入迭代器用于从容器中读取元素,输出迭代器用于向容器中写入元素,正向迭代器是输入迭代器和输出迭代器的组合。本文的目的是帮助读者更好地理解STL迭代器的使用方法和特点。 ... [详细]
  • 本文讨论了如何使用GStreamer来删除H264格式视频文件中的中间部分,而不需要进行重编码。作者提出了使用gst_element_seek(...)函数来实现这个目标的思路,并提到遇到了一个解决不了的BUG。文章还列举了8个解决方案,希望能够得到更好的思路。 ... [详细]
  • 本文介绍了如何使用n3-charts绘制以日期为x轴的数据,并提供了相应的代码示例。通过设置x轴的类型为日期,可以实现对日期数据的正确显示和处理。同时,还介绍了如何设置y轴的类型和其他相关参数。通过本文的学习,读者可以掌握使用n3-charts绘制日期数据的方法。 ... [详细]
  • 本文整理了Java中org.apache.solr.common.SolrDocument.setField()方法的一些代码示例,展示了SolrDocum ... [详细]
  • 巧用arguments在Javascript的函数中有个名为arguments的类数组对象。它看起来是那么的诡异而且名不经传,但众多的Javascript库都使用着它强大的功能。所 ... [详细]
  • 一维数组与二维数组互相转换一、二维数组转一维数组1.1使用reduce实现vararr1[[1,2],[3,4],[5,6],[7]];func ... [详细]
author-avatar
天堂寨旅游2013_668
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有