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说明相关推荐

  1. TweenMax动画库学习(三)

    目录               TweenMax动画库学习(一)            TweenMax动画库学习(二)            TweenMax动画库学习(三)           ...

  2. flash TweenMax用法

    二,TweenMax主类: 这里分几个大块来介绍,分别是:第三个参数特有属性(29个),PlugIn(17个),公共属性(10个),公共方法(20个). 1,第三个参数特有属性(29个): 这29个参 ...

  3. 【TweenMax】实例TimelineMax

    依赖JQ <script src="./../js/jquery-2.1.4.min.js"></script> <script src=" ...

  4. GreenSock (TweenMax) 动画案例(二)

    实现效果 动画分解 1.灯光闪烁 2.文字出现 3.水流 4.心电图 知识点 1.AI(可尽情骚扰UI欧巴) 2.SVG(了解基本的知识点) 3.TweenMax(GreenSock) 4.CSS a ...

  5. JS动画 | 用TweenMax实现收集水滴效果

    之前在CodePen上接触了TweenMax, 被它能做到的酷炫效果震撼了. (文末放了5个GSAP的效果GIF) 最近要做一个"收集水滴"的动效, 于是就试用了一下TweenMa ...

  6. 使用TweenMax更方便的创建连续的运动。

    示例 as自带的Tween早就不用了 Tweener实现这个也需要通过onComplete事件,多个连续的动作很麻烦 TweenMax就简单多了 代码 package   {     import c ...

  7. (转)TweenMax动画库学习(四)

    上一节我们主要聊了TweenMax动画库中的seek()完成指定的动画(无过渡).time() 动画已执行的时间.clear():清除所有动画等方法的使用,接下来我们继续学习TweenMax动画库中的 ...

  8. AS3.0常用第三方类库:TweenMax

    一,主要代码结构: com.greensock包里面,首先最主要的就是TweenMax.as:然后一个常用的是 com.greensock.easing.*;里面包含了15个缓动,下文再一一介绍:另外 ...

  9. html 文字悬停翻转,html5+TweenMax.js鼠标悬停文字翻转动画特效

    8种动画效果十分流畅的html5+TweenMax.js鼠标悬停文字翻转动画特效,支持英文字母和中文汉字. 查看演示 下载资源: 14 次 下载资源 下载积分: 20 积分 js代码 const le ...

  10. TweenMax学习笔记整理

    因为要做一个案例,里面用到了很多动画,TweenMax真的是一个很强大的动画库,所以就学了一点里面的方法,现在整理出来 官网:https://greensock.com/tweenmax 注意:这个动 ...

最新文章

  1. jexcel可以合并单元格么_含金量超高的3个文本、字符合并实用技巧解读!
  2. 关于python3的readlines(),read()和readline()简介
  3. volatile的正确使用姿势
  4. python获取路径时,如果要想使用外部定义的字符串变量,需要注意(附带isfile)
  5. MTK平台调试LCD步骤浅析
  6. matlab实心黑点怎么活,matlab画实心圆点
  7. XP系统计算机桌面图标不见,xp如何显示桌面图标?windows xp系统桌面图标消失的解决方法...
  8. ppt如何替换其他mo ban_一次性解决PPT初学者的20个常见问题,赶紧收藏
  9. 腾讯低代码平台实战体验
  10. U8二开之界面增加按钮处理事件
  11. Perf -- Linux下的系统性能调优工具,第 2 部分
  12. python——实例详细弄懂if __name__ == ‘__main__‘用法
  13. 扫码支付是如何实现的?
  14. 非计算机专业二级c语言,2017年计算机二级C语言基本知识
  15. 每日计划(2)——大二
  16. python 自定义函数计算相应在不同k值时的cp值_Python版_实验二:K近邻算法分析与应用 - 作业.doc...
  17. 【转】国家天文大地网
  18. 计算用户输入的日期离1900年1月1日相距多少天
  19. [网络篇]ESP8266-SDK教程(三)之TCP通信Server-Client
  20. JAVA计算机毕业设计学生会管理系统2021Mybatis+源码+数据库+lw文档+系统+调试部署

热门文章

  1. 自定义函数 | R语言偏相关分析及绘图
  2. 微信公众平台版面设计需要服务器,公众号版面设计,微信公众号中排版怎么弄...
  3. 无法在此iPhone上激活Touch ID,怎么解决?
  4. 搜索引擎优化SEO专业术语总结(新手篇)
  5. android禁止弹出保存此图片,安卓手机相册总是出现陌生图片?教你彻底清除!...
  6. Flutter InkWell Ink组件
  7. 阿里云win2016服务器部署jdk+tomcat填坑
  8. 本科毕业论文怎么避免查重?
  9. 全智通A+常见问题汇总解答—A+打印本次派工单,结果显示所派工项目
  10. PDF文件提取单独页面