`

[转]TweenMax的用法和参数说明

阅读更多

TweenMax 参数说明(中文):

本文源自独自行走的天空的博客,他的博客里面还有TweenLiteTweenFilterLite的翻印,如果有兴趣的话可以去他的博客: http://dzxz.blog.5d.cn.

 

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()

  中止(杀死)所有的缓动(以及可选的完成部分缓动)

  暂停/继续 全部的缓动

 

参数:

 1) $ target : Object - 目标 MovieClip (或其它对象),对它的属性进行缓动

 2) $ duration : Number - 动画的时间长度(单位:秒)

 3) $ 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) 位置属性 1 (通常为 "x")

          2) 位置属性 2 (通常为 "y")

          3) 旋转属性 (通常为 "rotation")

          4) 旋转的度数(可选的 - 让它更容易的正确瞄准 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 缓动进行了一半,缓动结束)

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

 

分享到:
评论

相关推荐

    TweenMax中文手册与参数说明

    ### TweenMax中文手册与参数说明 #### 一、概述 TweenMax是一款强大的动画库,它在TweenLite和TweenFilterLite的基础上构建而成,继承并融合了两者的特性与功能,为开发者提供了更为丰富的动画处理手段。相比起其...

    TweenMax.js+svg实现的星空中飞船火箭动画效果源码.zip

    在压缩包中的"使用须知.txt"文件可能包含了关于如何部署和自定义这个动画的说明,包括如何导入TweenMax.js库,如何调整SVG元素以适应自己的设计,以及可能的参数设置和事件监听器的使用。 总的来说,通过TweenMax....

    TweenMax湖面上倒影动画特效.zip

    TweenMax湖面上倒影动画特效.zip是一个包含网页特效资源的压缩包,主要涉及jQuery和CSS技术,用于创建湖面倒影的动态效果。这个特效在网页设计中可以增添视觉吸引力,提升用户体验。以下是对该特效及其相关技术的...

    TweenMax.js+svg实现憨态可掬的弹性糖果状熊猫动画源码.zip

    3. **创建动画**:使用TweenMax.to()或TweenMax.fromTo()方法,指定动画的起始和结束属性,以及持续时间、缓动函数等参数。 4. **应用动画**:将动画绑定到SVG元素上,可能包括移动、旋转、缩放、改变颜色等操作。 5...

    jQuery全屏对称分割卡片式轮播图插件

    `readme.html`可能包含插件的使用说明和注意事项;`jQuery之家.url`可能是链接到jQuery学习资源的快捷方式;`js`、`css`和`img`目录分别包含了必要的JavaScript文件、CSS样式表和图片资源。 总之,这款jQuery全屏...

    TweenMax实现弹性滑动进度条特效特效代码

    在提供的文件列表中,"使用帮助.txt"可能包含了如何运行和自定义此特效的详细步骤,"谷普下载.url"和"说明.url"可能是指向更多资源或教程的链接,而"1004"可能是一个示例文件,比如HTML、CSS或JavaScript文件,包含...

    超酷超炫粒子效果

    `README.md`通常是一个文档,用于介绍项目的背景、安装步骤、使用方法等信息,帮助用户理解和使用项目。在这个项目中,它可能包含了如何运行粒子效果、配置参数或者调整粒子行为的说明。 `www.jq22.com.txt`可能是...

    SVG交互式温度计滑块拖动特效.zip

    除了SVG和TweenMax.js,项目中的"说明.htm"文件可能是对特效的详细说明,包括如何集成到自己的项目中、如何调整参数以及可能的自定义选项。而"jiaoben6083"文件可能包含了JavaScript代码,这部分代码负责处理用户的...

    SVG宇宙航天火箭动画特效.zip

    TweenMax库提供了简便的方法来设置这些动画参数,例如`.to()`方法用于将某个对象的属性从当前值平滑地过渡到指定值,`.from()`方法则是从指定值过渡到当前值,时间、缓动函数和回调函数等都可以自定义,以达到预期的...

    fl.transitions,fl.tweens包等都有

    这两个包提供了许多类和方法,帮助开发者创建出平滑、动态的用户界面,增强应用程序的视觉体验。以下是关于这两个包及其相关知识点的详细说明: **fl.transitions包** `fl.transitions` 包包含了一系列的类,这些类...

    HTML5层叠图片跟随鼠标移动特效特效代码

    在实际开发中,"使用帮助.txt"可能提供了关于如何配置和使用这个特效的指导,"谷普下载.url"和"说明.url"可能是指向更多资源和详细说明的链接。而"jiaoben7038"可能是一个示例文件或脚本,用于展示具体实现这个特效...

    HTML5 SVG星空飞船火箭动画特效

    接着,使用TweenMax的动画方法,定义火箭的运动路径、速度、旋转角度等参数。此外,还可以添加一些额外的效果,比如星光闪烁、火箭尾焰的动态效果,以增强视觉冲击力。 在"说明.htm"文件中,可能包含了如何在网页中...

    greensock 常用指南

    本篇指南将介绍GreenSock中几个常用的类和方法,包括TweenLite、TweenMax、TimelineLite和TimelineMax,并对它们的常见用途和用法进行说明。 TweenLite是GreenSock中轻量级的动画引擎,它适用于快速的、基本的动画...

    7种基于GSAP的SVG Loader加载动画特效

    - **readme.html**:通常包含项目介绍、使用说明和开发者信息,对于理解整个项目非常有帮助。 - **jQuery之家.url**:可能是一个链接到jQuery相关的资源或教程,尽管GSAP不依赖jQuery,但两者在某些场景下可以结合...

    网格线条液晶灯管HTML5特效特效代码

    HTML5作为现代网页开发的基石,提供了丰富的功能和API,使得开发者能够创建出更...在实际开发过程中,参照提供的“使用帮助.txt”和相关链接(如“谷普下载.url”和“说明.url”)可以帮助更好地理解和应用这个特效。

    HTML5层叠图片跟随鼠标移动特效

    4. **使用TweenMax动画**:调用TweenMax的`to()`或`fromTo()`方法,定义图片从当前状态到目标状态的动画过程。可以设置动画时长、缓动函数(决定动画速度变化的模式)等参数,以实现平滑的过渡效果。 5. **处理动画...

Global site tag (gtag.js) - Google Analytics