TweenMax参数说明
TweenMax 建立在 TweenLite 和 TweenFilterLite 基础之上,因此,又揉合了这二者的功能,使得功能更加的齐备,但是如果说易用性,觉得还是 TweenLite 来得方便一些。我的译文是从 TweenLite 开始的,接着是 TweenFilterLite 最后是 TweenMax ,这也恰好是这个类发展的轨迹,沿着这个轨迹一路读过来,会觉得容易理解很多。
TweenMax 建立在 TweenLite 核心类以及它的大哥 TweenFilterLite 基础之上,它为 Tween 家族增加了新的受欢迎的功能(尽管只是锦上添花),从而使家族更加的壮大,比如贝赛尔缓动、暂停/继续能力,简便的连续缓、16进制颜色缓动、以及更多的内容。
TweenMax
采用了与它的兄弟相似的易于学习的语法结构。实事上,因为它扩展自它们,TweenMax 可以做任何 TweenLite 和/或者 TweenFilterLite 能做的事,还加上了更多的特色。那么为什么要建立 3 个类,而不是 1 个呢?问的好,我的目标是:效率最大化,尺寸最小化。坦白的说,TweenLite 可能是所有的程序员在 90%
的项目中都需要用到的,而它仅有 3k。相对它的功能来说,它是非常高效和紧凑的。
但是如果你需要对滤镜进行缓动,或者更丰富的图像效果,比如说饱和度(saturation)、对比度(contrast)、色相(hue)、调色等等进行控制, 那就装上 TweenFilterLite 总共 6k 。还想要的更多? No problem !TweenMax 已经在总共 8k 的大小里面塞满了足够多的功能。
想查看相关的功能对比图,请访问 TweenMax.com 以获取更多信息。
( TweenMax 类包中直接包含有独立的 TweenLite 和 TweenFilterLite 类,因此下载这一个包就可以了,在 Flash 类路径中添加的时候,也只需要添加这一个路径就可以了—-译者注)
TweenMax 创造了一种全新的功能,叫做 “bezierThrough”(暂译为贝塞尔通路),这个功能允许你定义一些点,通过贝塞尔曲线连接这些点,(通常的控制点只是用来拉近曲线,这里的点直接在曲线的路径上)。当然,如果你愿意,你可以用更正规的贝塞尔曲线。目前,TweenMax增加了下列功能(相对于 TweenFilterLite 而言):
- 进行贝塞尔缓动(包括指定通路 THROUGH 点和运动对象的自动方位导航(在贝塞尔曲线中移动时,对象的旋转角度是自动控制的,译者注))
- 连续的缓动 或称为 序列化的缓动
- 对对象数组(数组中存放了不同的对象,译者注)中的对象进行统一的缓动,使用 allTo() 和 allFrom()
- 缓动中的 暂停/继续 功能,使用 pause() 和 resume() 方法,或者 “paused” 属性 (比如 myTween.paused = true)
- isTweening 静态方法,用来判断一个对象是否正在进行缓动(比如 TweenMax.isTweening(my_mc))
- 跳转至缓动的任何时段,使用 “progress” 属性。输入一个 0 到 1 之间的数值。 progress 值为零,将会把缓动的进程跳转到初始阶段,值为 1 时,跳转至 100% 完成状态,值为 0.5 时,将转至缓动过程的半山腰位置。
- 例如: myTween.progress = 0.5;
- 对 16 进制的颜色进行缓动,使用 hexColors 属性
- 获取缓动效果的实例数组,该数组中包括了加在一个指定的目标对象上的所有的缓动效果的实例,该数组可以容纳 TweenMax 和 TweenLite 和 TweenFilterLite 三种类型的缓动实例。
- 例如:
TweenMax.getTweensOf(my_mc);
// (如果my_mc
上使用了不止一个的缓动效果,那么这里将返回一个数组,数组中是不同的缓动效果的实例,可以用来对每个缓动进行实时的控制,译者注) - 获取 TweenMax (和 TweenLite 和 TweenFilterLite) 的实例数组,使用用静态函数 getAllTweens()
- 中止(杀死)所有的缓动(以及可选的完成部分缓动)
- 暂停/继续 全部的缓动
参数
target : Object
– 目标 MovieClip (或其它对象),对它的属性进行缓动duration : Number
– 动画的时间长度(单位:秒)vars : Object
-一个包含了多种属性的对象,用来存贮缓动结束时的各种属性值(如果你使用 TweenLite.from() 方法,这里的参数表示缓动的初始值)。
例如:
alpha: 目标对象在缓动结束时的 alpha (不透明度的级别)值。(当使用TweenMax.from()时,表示开始缓动时的 alpha 值)
举个例子,如果 target_obj.alpha
是 1,当这个缓动代码被执行时,将 alpha 参数设成 0.5 ,它将实现从 1 到 0.5 的渐变缓动。
x: 想要改变 MovieClip 的 x 位置,只需要将这个参数值设成你希望的缓动结束时的值即可。(如果使用 TweenMax.from(),则表示缓动开始时的 x 值)
专有属性
- 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 。
- volume : Number – 改变 MovieClip 或者 SoundChannel 的音量,将缓动结束时的音量值写在这里即可。(如果使用 TweenMax.from(),这里的值表示缓动开始时的音量).
- tint : Number – 改变可显示对象(DisplayObject)的色调/颜色,将缓动结束时的16进制值颜色值(比如0xFF0000)写在这里即可。(如果使用 TweenMax.from(),这里的值表示缓动开始时的颜色值).
- 如果想要移除颜色,传一个 null 做为颜色值即可。
- frame : Number – 将 MovieClip 缓动到指定的帧频
- bezier : Array – Bezier 缓动,允许你以非线性的方式进行缓动。例如,将一个 MovieClip 从原始的 (0,0) 的位置,向右移动500像素,到(500,0),在缓动的中间向下弯曲。只需要向贝赛尔数组中传递多个对象,每一个都是一个控制点(关于控制点是如何工作的请参考 Flash 的 curveTo() 绘图方法相关说明)。在这个例子中,假设我们的控制点是 x/y 坐标
- 250,50。把
my_mc
放到 0,0 位置,然后执行下面的代码:TweenMax.to(my_mc, 3, {_x:500, _y:0, bezier:[{_x:250, _y:50}]});
- bezierThrough : Array – 与上面的贝赛尔数组相似,但是它接收的不是控制点,而是贝赛尔曲线要经过的位置点。与控制点相比,这样的用法更加直观。
- orientToBezier : Array (或者 Boolean 类型) – 设计师/开发人员经常用到的一个效果,让 MovieClip/Sprite 自动调整自身的方向(改变 rotation),使之符合贝赛尔路径的方向(就像是汽车在曲折的道路上需要不断调整方向一样—-译者注)。orientToBezier
使得这一切变得简单。为了更精确的调整 rotation 属性,TweenMax 需要 4 方面的信息:- 位置属性 1 (通常为 “x”)
- 位置属性 2 (通常为 “y”)
- 旋转属性 (通常为 “rotation”)
- 旋转的度数(可选的 – 让它更容易的正确瞄准 MovieClip )
- 当 orientToBezier 属性为数组时,该(容器)数组中的每个元素是包含了一组数据的数组(形如[[x1,y1,rota1,ang1],[x2,y2,rota2,ang2]]—-译者注)。
- 为了获得最大的灵活性,你可以向容器数组中传递任意数量的数组,逐个的指定旋转属性。这在进行 3D 工作进会很方便,因为你可以旋转多个坐标轴。如果进行的是标准的 2D x/y 坐标系贝赛尔缓动,只需要传递一个布尔值 true ,然后 TweenMax 将会使用一个典型的数组设置
[["x", "y", "rotation", 0]]
。 - 提示:不要忘了这里存在着容器数组(注意:数组前后有两层方括号)
- hexColors : Object – 尽管 16 进制颜色是一种技术上使用的数字,但当你试途按照数字增减的老办法来缓动时,你会发现颜色的变化并不平滑。为了更恰当的进行颜色缓动,通常需要独立的对红、绿、蓝的成分进行缓动。TweenMax 把这一切变得简单。将一个 16 进制颜色值缓动到另一个 16 进制颜色值,只需要使用这个 TweenMax 中专用的 hexColors 属性即可。
这个属性必须是一个对象,该对象具有相关的颜色属性,属性名称与目标对象中使用的 16 进制颜色属性的名称相同。比如,如果my_obj
对象具有一个“myHexColor”属性,想让它在两秒种内缓动为红色 (0xFF0000),需要这样做: TweenMax.to(my_obj, 2, {hexColors:{myHexColor:0xFF0000}});
(内层花括号括起来的部分,表示的就是一个包含有 myHexColor属性的对象—-译者注)- 可以传递任意数量的 hexColor 属性。
- onStart : Function – 在缓动开始时想要执行某个函数,就将函数的引用(通常是函数名)放到这里。当缓动是带延迟的,这一点会非常有用。
- onStartParams : Array – 为缓动开始时要执行的函数传递参数。(可选的)
- onUpdate : Function – 缓动过程中,每次更新属性值时,会执行这里指定的函数(缓动开始后,每一帧被触发一次)。
- onUpdateParams : Array – 给 onUpdate 参数指定的函数传递参数 (可选的)
- onComplete : Function – 缓动结束时执行的函数。
- onCompleteParams : Array – 给 onComplete 参数所指定的函数传递参数(可选的)
- renderOnStart : Boolean – 当使用带有延迟缓动的 TweenFilterLite.from() ,并且希望阻止缓动的渲染(rendering)效果,直到缓动真正开始,将这个值设为 true.默认情况下该值为 false,这会让 TweenMax.from() 渲染效果立即被执行,甚至是在延迟尚未结束之前。
- overwrite : Boolean – 如果不希望当前的缓动效果自动覆盖到其它的影响同一属性的缓动,请确保这个值设为 false。
- blurFilter : Object – 应用模糊滤镜,需要传递一个具有下列(一个或多个)属性的对象做为参数:blurX(横向的模糊度), blurY(纵向的模糊度), quality(品质,默认值为2)
- glowFilter : Object – 应用发光滤镜,需要传递一个具有下列(一个或多个)属性的对象做为参数:alpha(通明度),blurX , blurY , color(颜色),strength(强度), quality,inner(内侧发光),knockout(挖空)
- colorMatrixFilter : Object – 应用颜色矩阵滤镜,需要传递一个具有下列(一个或多个)属性的对象做为参数:colorize(色调),amount(总量),contrast(对比度),brightness(亮度),saturation(饱和度),hue(色相),threshold(阀值),relative(相关性),matrix(颜色矩阵)
- dropShadowFilter : Object – 应用阴影滤镜,需要传递一个具有下列(一个或多个)属性的对象做为参数:alpha, angle(角度), blurX, blurY, color, distance(距离), strength, quality
- bevelFilter : Object – 应用斜角滤镜,需要传递一个具有下列(一个或多个)属性的对象做为参数:angle, blurX, blurY, distance, highlightAlpha(高亮区的透明度),
highlightColor(高亮区的颜色),shadowAlpha(阴影区的透明度), shadowColor(阴影区的颜色), strength(强度), quality
关键属性
- progress : Number (范围0 – 1,为 0 表示缓还未开始,0.5 缓动进行了一半,1 缓动结束)
- paused : Boolean (逻辑值)
关键方法:
- TweenMax.to(target:Object, duration:Number, vars:Object):TweenMax
- TweenMax.from(target:Object, duration:Number, vars:Object):TweenMax
- TweenMax.allTo(targets:Array, duration:Number, vars:Object):Array
- TweenMax.allFrom(targets:Array, duration:Number, vars:Object):Array
- TweenMax.sequence(target:Object, tweens:Array):Array
- TweenMax.getTweensOf(target:Object):Array
- TweenMax.isTweening(target:Object):Boolean
- TweenMax.getAllTweens():Array
- TweenMax.killAllTweens(complete:Boolean):void
- TweenMax.killAllDelayedCalls(complete:Boolean):void
- TweenMax.pauseAll(tweens:Boolean, delayedCalls:Boolean):void
- TweenMax.resumeAll(tweens:Boolean, delayedCalls:Boolean):void
- pause():void
- resume():void
示例:
对 MovieClip 进行连续的缓动,先用2秒钟时间让透明度降到 50%,然后用1秒钟时间滑落到 y 坐标为300的位置,使用如下的代码:
import gs.TweenMax;
TweenMax.sequence(clip_mc, [{time:2, alpha:0.5}, {time:1, y:300}]);
使用 Back.easeOut 函数对影片剪辑 clip_mc
进行缓动,缓动持续 5秒钟,alpha 值变到 0.5,x 坐标变到 120,延迟 2秒钟执行,缓动结束后,调用“onFinishTweenusing”,并且为这个函数传递几个参数(数值5 和 对clip_mc
的引用),代码如下:
import gs.TweenMax;
import fl.motion.easing.Back;
TweenMax.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);
}
如果舞台上的影片剪辑已经处于期望的缓动结束时位置,而你希望它从其它位置用 5 秒钟的时间回到当前位置,(比如从比当前位置高 100 像素或屏幕外更高的地方,通过改变 y 属性,下落到当前位置)可以使用下面的代码:
import gs.TweenMax;
import fl.motion.easing.Elastic;
TweenMax.from(clip_mc, 5, {y:"-100", ease:Elastic.easeOut});
备注
给参数值加上引号,表示对指定的属性进行相应操作。比如,使用TweenMax.to(mc, 2, {x:"-20"});
它将 mc.x 向左移动 20 像素,与此相同效果的代码是:
TweenMax.to(mc, 2, {x:mc.x - 20});
可以对任何 MovieClip 使用 “volume” 缓动,就比如:
TweenMax.to(myClip_mc, 1.5, {volume:0});
可以将 MovieClip 缓动成某种色调或颜色,使用 “tint” 属性,比如:
TweenMax.to(myClip_mc, 1.5, {tint:0xFF0000});
想要对数组内容进行缓动,将数值放到一个叫 endArray 的数组中即可,例如:
var myArray:Array = [1,2,3,4];
TweenMax.to(myArray, 1.5, {endArray:[10,20,30,40]});
可以在任何时候终止缓动,使用 TweenMax.killTweensOf(myClip_mc);
函数。如果想强制终止缓动,可以传递一个 true 做为第二个参数,比如
TweenMax.killTweensOf(myClip_mc, true);
去除延迟回调函数,用 TweenMax.killDelayedCallsTo(myFunction_func);
这项功能可以用来控制回调函数的优先级。
使用 TweenMax.from() 方法,可以使目标对象运动回它所在的位置。比如,你可以将对象在舞台上摆放整齐(缓动结束时的位置),然后利用缓动,让它们跑到那个位置上去,你可以将缓动初始位置的 x 或 y 或 alpha (或者其它你需要的属性)当做参数传递给这个方法函数。
TweenMax参数说明的更多相关文章
- flex TweenLite
本贴已在 AS天地会转发,大家可以参考:http://bbs.actionscript3.cn/viewthread.php?tid=11090&pid=91142&page=1&am ...
- TweenLite参数用法中文介绍
TweenLite是一个缓动的类包,功能强大,并且易于使用,为了更多的(E文欠佳的.初学的)朋友了解它,使用它,特此翻译了一下TweenLite类文档中的说明文件,主要是对参数的说明,希望对大家有用. ...
- TweenMax动画库学习(六)
目录 TweenMax动画库学习(一) TweenMax动画库学习(二) TweenMax动画库学习(三) Tw ...
- TweenMax动画库学习(五)
目录 TweenMax动画库学习(一) TweenMax动画库学习(二) TweenMax动画库学习(三) Tw ...
- TweenMax动画库学习(四)
目录 TweenMax动画库学习(一) TweenMax动画库学习(二) TweenMax动画库学习(三) Tw ...
- TweenMax动画库学习(一)
目录 TweenMax动画库学习(一) TweenMax动画库学习(二) TweenMax动画库学习(三) Tw ...
- TweenMax动画库学习(二)
目录 TweenMax动画库学习(一) TweenMax动画库学习(二) TweenMax动画库学习(三) Tw ...
- TweenMax动画库学习(三)
目录 TweenMax动画库学习(一) TweenMax动画库学习(二) TweenMax动画库学习(三) ...
- TweenMax动画库学习
之前在做HTML5移动端开发的时候,用的都是Animate.css,这个插件封装的的确很好,但是在做一些缓动方面的动画,它也有一定的不足之处,比如手要写一个连续的动画,需要不停的去重复写函数,使得代码 ...
随机推荐
- C#模拟鼠标键盘控制其他窗口(一)
编写程序模拟鼠标和键盘操作可以方便的实现你需要的功能,而不需要对方程序为你开放接口.比如,操作飞信定时发送短信等.我之前开发过飞信耗子,用的是对飞信协议进行抓包,然后分析协议,进而模拟协议的执行,开发 ...
- LNMP环境搭建笔记
说明:前面尝试的在ubuntu12.04上搭建的LAMP环境由于开发的需要需要对php的版本进行升级,然而通过apt-get库安装的php的版本是5.3.10,不能满足开发需要.此笔记安装的php的 ...
- druid 配置
连接池配置,以及相关配置 <bean id="logFilter" class="com.alibaba.druid.filter.logging.Slf4jLog ...
- CSS书写规范、命名规范、网易CSS框架NEC
网易CSS框架NEC:http://nec.netease.com/ NEC框架的CSS规范: CSS规范 - 分类方法 CSS规范 - 命名规则 CSS规范 - 代码格式 CSS规范 - 优化方案 ...
- Shell入门教程:Shell的基本结构
shell程序的基本组成结构 shell结构大体是由设定变量.内置命令.shell的语法结构.函数组成. 使用实例说明:test.sh #!/bin/bash #说明使用/bin/bash作为这个脚本 ...
- C和指针 第八章 数组
8.1 数组名和指针 int a; int b[10]; a称为一个标量,表示一个单一的值,变量的类型是整数. b是数组,b[1]的类型是整数,b是一个指针常量,表示数组第一个元素的地址.b的类型取决 ...
- 2.mongoDB add user in v3.0 问题的解决(Property 'addUser' of object admin is not a func)
问题:创建mongodb帐户时,出错 > db.addUser('jyu', 'aerohive') 2015-08-05T20:03:02.767+0800 E QUERY TypeE ...
- js中的事件委托或是事件代理详解
起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...
- opendrive
opendrive和其他许多网盘一样.注册拥有5G的免费空间.每天1G的免费外链流量.更重要的是,他能够给你提供一个直接外链!这是国内外许多网盘都没有的.当你上载了一个MP3,你想用直接外链的形式在博 ...
- node04-buffer
目录:node01-创建服务器 node02-util node03-events node04-buffer node05-fs node06-path node07-http node08-exp ...