首页新随笔管理(转载) TweenLite 使用详解（译文）

首页新随笔管理(转载)
TweenLite 使用详解（译文）
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 = 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_arr2.width/2 + 0.5 * originWidth + 15;
pic_arr[0].x = pic_arr2.x - step - dist;
pic_arr1.x = pic_arr2.x - step;
pic_arr3.x = pic_arr2.x + step;
pic_arr4.x = pic_arr2.x + step + dist;
pic_arr[5].x = pic_arr2.x + step + 2 * dist;
}
function fadePic(){
//降低透明度
TweenLite.to(pic_arr[0], 1, {alpha:0.5, ease:Back.easeOut});
TweenLite.to(pic_arr1, 1, {alpha:0.5, ease:Back.easeOut});
TweenLite.to(pic_arr3, 1, {alpha:0.5, ease:Back.easeOut});
TweenLite.to(pic_arr4, 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_arr1, 1, {alpha:1, ease:Back.easeOut});
TweenLite.to(pic_arr3, 1, {alpha:1, ease:Back.easeOut});
TweenLite.to(pic_arr4, 1, {alpha:1, ease:Back.easeOut});
TweenLite.to(pic_arr[5], 1, {alpha:1, ease:Back.easeOut});
}
function enLargeMotion(){
//中心图块放大的效果
TweenLite.to(pic_arr2, 0.8, {scaleX:0.8, scaleY:0.8, ease:Back.easeOut,delay:2,onStart:fadePic,onUpdate:pushAside,onComplete:toSmallMotion});
}
function toSmallMotion(){
//中心图块缩小的效果
TweenLite.to(pic_arr2, 0.8, {scaleX: originScaleX, scaleY: originScaleX, ease:Back.easeOut,delay:1,onStart: lightPic,onUpdate: pushAside,onComplete:toLeftMotion});
}
function toLeftMotion(){
//中心图块向左移动的效果
var mc:MovieClip = pic_arr2;
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_arr4.x + originWidth + 15;
//重新启动缓动效果
enLargeMotion();
}
//首次启缓动效果
enLargeMotion();
复制代码

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

标记文本

删除文本

引用文本

H₂O is是液体。

2¹⁰ 运算结果是 1024.

插入链接与图片

链接: link.

图片:

带尺寸的图片:

居中的图片:

居中并且带尺寸的图片:

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block
var foo = 'bar';

生成一个适合你的列表

• 项目
  • 项目
    • 项目

1. 项目1
2. 项目2
3. 项目3

• 计划任务
• 完成任务

创建一个表格

一个简单的表格是这么创建的：

项目	Value
电脑	$1600
手机	$12
导管	$1

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列	第二列	第三列
第一列文本居中	第二列文本居右	第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

TYPE	ASCII	HTML
Single backticks	'Isn't this fun?'	‘Isn’t this fun?’
Quotes	"Isn't this fun?"	“Isn’t this fun?”
Dashes	-- is en-dash, --- is em-dash	– is en-dash, — is em-dash

创建一个自定义列表

Markdown

Text-to- HTML conversion tool

Authors

John

Luke

如何创建一个注脚

一个具有注脚的文本。¹

注释也是必不可少的

Markdown将文本转换为 HTML。

KaTeX数学公式

您可以使用渲染LaTeX数学表达式 KaTeX:

Gamma公式展示 $\Gamma (n)=(n-1)!\forall n\in \mathbb{N}$ 是通过欧拉积分

$$\Gamma (z)={\int }_0^{\infty }{t}^{z-1}{e}^{-t}dt.$$

你可以找到更多关于的信息 LaTeX 数学表达式here.

新的甘特图功能，丰富你的文章

• 关于 甘特图 语法，参考 这儿,

UML 图表

可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：:

这将产生一个流程图。:

• 关于 Mermaid 语法，参考 这儿,

FLowchart流程图

我们依旧会支持flowchart的流程图：

• 关于 Flowchart流程图 语法，参考 这儿.

导出与导入

导出

如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。

导入

如果你想加载一篇你写过的.md文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，
继续你的创作。

---

1. 注脚的解释 ↩︎