TweenLite

https://greensock.com/docs/v2/TweenLite

TweenLite

是一款超级快速、轻量且灵活的工具。它是 GreenSock 动画平台（GSAP）的基础。一个 TweenLite 实例能处理任意对象（或对象数组）的一个或多个属性。虽然 TweenLite 体积小，但能独立完成大多数小型动画。它也可以结合 TimelineLite 或 TimelineMax 等高级队列工具轻松完成复杂任务。在有其他几个动画框架可供选择的情况下，为何要考虑 GSAP 呢？

  • 速度：本平台经过高度优化，力求达到最佳性能。查看一些速度对比：http://greensock.com/js/speed.html

  • 异常强大的特性集：能过渡对象的所有数字型属性，各类型插件赋予了 TweenLite 过渡十六进制颜色值、贝塞尔曲线、CSS、SVG、变形（morphing）等一系列能力。还能对值进行四舍五入、使用相对值、随意使用 reverse()、自动检测和适应 getter/setter 函数、能使用几乎所有缓动函数、随时 pause()/resume()、通过各类型覆盖模式，能智能管理相同目标对象的冲突补间动画。TweenMax 在 TweenLite 的基础上进行了扩展，添加了更多能力，如 repeat、yoyo、repeatDelay 等。

  • 队列、编组和管理特性：TimelineLite 和 TimelineMax 让创建复杂的补间动画队列或组合变得超级简单。即将多个补间动画作为一个整体进行play()、pause()、restart()或 reverse()等操作。通过时间轴的 time() 或 progress() 方法进行快进或回退，也可以添加标记、更改时间轴的播放速度 timeScale()、时间轴内嵌套时间轴等等。这无疑能对你的动画工作流进行革新，使其更简洁和模块化。

  • 易于使用：设计师和开发者均对本平台的直观性点赞。

  • 支持与可靠性：频繁迭代、专用论坛、忠诚的作者、可靠的跟踪记录、成熟的资助机制和旺盛的社区用户，均支撑着平台的安全性和长期性（与很多开源项目不同）。

  • 可扩展性：基于其插件架构，可以根据项目需要启用相应的额外特性。而自定义开发的插件，因其仅处理特定的特殊属性，能最大限度减少体积和发挥最大性能。

用法

阅读《Jump Start tour》可以快速入门，它以有趣和可交互的方式展示了平台的基础部分。

补间动画最常用的方式是 TweenLite.to()，它允许你定义目标值：

var photo = document.getElementById("photo");
TweenLite.to(photo, 2, { width: "200px", height: "150px" });

上述代码将对 id 为 "photo" 的 <img> 元素的宽高在 2 秒内分别从当前值过渡到 200 和 150。需要注意的是：width 和 height 的值均定义在一个对象字面量（大括号内）中。你可以在里面定义任意多个属性。为了对 CSS 属性做补间动画，你需要使用 CSSPlugin。CSSPlugin 包含了解析和以独特方式处理 CSS 相关属性的特定代码，如识别颜色、transform 等，并且需要管理必要的后缀（"px"、"%" 等）。

若向补间对象传递一个字符串（文本），如 TweenLite.to("#myID", 1, { left: "100px" })，TweenLite 则会使用选择器引擎（优先使用 jQuery、然后使用 document.querySelectorAll()，最后使用 document.getElementById()（自动移除 "#" 前缀））。

所以，一旦 TweenLite 和 CSSPlugin 加载完毕后，即可像下面一样轻松创建补间动画：

//tween the element with ID of "myID"
TweenLite.to("#myID", 2, {backgroundColor:"#ff0000", width:"50%", top:"100px", ease:Power2.easeInOut});

//tween every element with the class "myClass" like this: 
TweenLite.to(".myClass", 2, {boxShadow:"0px 0px 20px red", color:"#FC0"});

对应 Codepen：Animate Multiple Properties

默认情况下，补间动画会立即启动。可通过 delay 属性对其进行延迟启动，或通过 paused 属性使其初始暂停。

target目标对象可以是一个对象数组。例如，下面的补间动画将会对 obj1、obj2、obj3 的 opacity CSS 属性过渡到 0.5，transform 属性旋转到 45 度：

TweenLite.to([obj1, obj2, obj3], 1, {opacity:0.5, rotation:45});

一般情况下，CSS 相关属性需要放在特定对象下：TweenLite.to(element, 1, {css:{left:"100px", top:"50px"}});，这样引擎才能知道哪些属性是属于 CSSPlugin 处理的。但因为在浏览器上对 DOM 元素进行补间动画是非常普遍的，所以 TweenLite 会自动检测目标元素是否是 DOM 元素，若是（且未在 vars 对象内定义 "css" 对象），则 TweenLite 会在补间动画首次渲染时创建 css 对象，将未直接定义在 css 对象上的属性填充到 css 对象，保留其余类似 onComplete、ease、delay 或插件等非 css 相关的属性。

TweenLite.from() 则让你定义初始值而非目标值，即从定义的值过渡到当前值。或使用 TweenLite.fromTo() 定义初始值和目标值。

to()、from()、fromTo() 静态方法很常用，因为它们快捷和避免了一些垃圾回收的麻烦。当然，你也可以使用面向对象的语法，如下：

var tween = new TweenLite(element, 2, {width: 200, height: 150})

甚至：

var tween = TweenLite.to(element, 2, {width: 200, height: 150})

特殊属性、缓动和回调函数（无需引入插件）：

一般来说，vars参数是用于定义目标对象的补间属性的目标值（或 from() 补间动画的初始值）如：{left: "100px", top: "200px", opacity: 0}，但以下这些可选的特殊属性则用于其他目的：

  • delay（Number）：动画开始前需要延迟的秒数（或帧数，基于帧的补间动画）。

  • ease（Ease 或函数或字符串）：不同的缓动函数控制着动画不同的变化速率，呈现不同的“感觉”。如：Elastic.easeOut 或 Strong.easeInOut。为了取得最佳性能，请使用 GreenSock 提供的缓动函数（Linear、Power0、Power1、Power2、Power3、Power4、Quad、Cubic、Quart、Quint 和 Strong 各自的 .easeIn、.easeOut、.easeInOut 均包含在 TweenLite，可以通过加载 EasePack 获取额外的缓动函数，如 Elastic、Back、Bounce、SlowMo、SteppedEase、Circ、Expo 和 Sina）。GreenSock 的 Linear.easeNone 为线性动画。自定义缓动函数的命名风格可以是 "Strong.easeOut" 或 "easeOutStrong"（类似 jQuery 的反向风格）。该属性的默认值 Quad.easeOut。

  • paused（Boolean）：为 true 时，动画会在创建后立即停止。

  • immediateRender（Boolean）：一般情况下，创建后的补间动画会在最近的下一帧（更新循环）中进行渲染，除非指定了 delay。然而，如果想要强制补间动画在创建后立即进行渲染，可将 immediateRender 设为 true。或者想阻止 from() 的立即渲染，可将 immediateRender 设为 false。默认情况下，from() 补间动画的 immediateRender 属性为 true。

  • overwrite（String 或正整数）：该属性用于存在多个目标元素相同的补间动画时，如何控制互相被覆盖的情况。供几个模式可选择，默认值为 "auto"（也可通过 TweenLite.defaultOverwrite 属性更改默认值）：

    • "none"（0 或 false）：没有覆盖会发生。

    • "all"（1 或 true）：所有拥有相同目标元素的补间动画均会被立即覆盖，无论补间动画是否开启或是否拥有冲突的属性。

    • "auto"（2）：当补间动画首次渲染时，会分析其余拥有相同目标元素的补间动画：它们目前是否为活跃/运行状态？若是，则会单独覆盖冲突的过渡属性。未开始的补间动画则会被暂时忽略。例如：当前存在一个活跃的补间动画（过渡着 3 个属性），而新的一个补间动画与其存在着一个相同的过渡属性。那么在这种情况下，其余两个属性会得到保留，而仅会覆盖那个冲突的属性。这是默认模式，且对于开发者来说，这通常是最直观的模式。

    • "concurrent"（3）：当补间动画首次渲染时，会去掉拥有相同目标元素，且当前为活跃状态（正在处理）的补间动画，无论它们是否存在冲突的属性。像是 "all" 和 "auto" 的结合体。适用于当前仅需一个补间动画控制目标元素的情景。

    • "allOnStart"（4）：与 "all" 相同，但会等到补间动画开启时（即在延迟后）才执行覆盖逻辑。所有拥有相同目标元素的补间动画均会被立即覆盖，无论补间动画是否开启或是否拥有冲突的属性。

    • "preexisting"（5）：当一个补间动画首次渲染时，它会终止所有在其之前创建的补间动画（拥有相同目标元素），而不管它们所各自设定的启动时间。例如：分别创建一个延时时间为 10、一个延时时间为 1 和一个延时时间为 2 的三个补间动画（拥有相同目标元素），那么第二个补间动画会终止第一个补间动画，而不会终止第三个（译者注：原文 "the 2nd tween would overwrite the first but not the second"）。"preexisting" 只关心实例的实际创建顺序。当代码执行顺序起关键作用时，这会非常有用。

  • onComplete（Function）：动画完成时的回调函数。

  • onCompleteParams（Array）：传入 onComplete 函数的参数数组。例如：TweenLite.to(element, 1, { left: "100px", onComplete: myFunction, onCompleteParams: [element, "param2"] });若需要在参数列表中引用补间动画实例自身，可使用"{self}"，如：onCompleteParams:["{self}", "param2"]

  • onCompleteScope（Object）：指定 onComplete 函数的作用域（即函数内 "this" 的引用）。

  • onReverseComplete（Function）：动画反向运动到初始位置时所触发的回调函数。例如，当 reverse() 被调用时，补间动画将反向运动到初始位置，当其 time 为 0 时，onReverseComplete 函数会被触发。即使将补间动画实例放置在 TimelineLite 或 TimelineMax 实例中，若 Timeline 实例反向运动且到达初始位置时（译者注：补间动画实例的初始位置）也会触发该函数（译者注：补间动画实例的 onReverseComplete 函数）。

  • onReverseCompleteParams（Array）：传入 onReverseComplete 函数的参数数组。例如 TweenLite.to(element, 1, {left:"100px", onReverseComplete:myFunction, onReverseCompleteParams:[mc, "param2"]});若需要在参数列表中引用补间动画实例自身，可使用"{self}"，如：onReverseCompleteParams:["{self}", "param2"]。

  • onReverseCompleteScope（Object）：指定 onReverseComplete 函数的作用域（即函数内 "this" 的引用）。

  • onStart（Function）：动画启动时的回调函数（即其 time 从 0 变到其他值，可触发多次，即补间动画多次重新启动）。

  • onStartParams（Array）：传入 onStart 函数的参数数组。例如 TweenLite.to(element, 1, {left:"100px", delay:1, onStart:myFunction, onStartParams:[mc, "param2"]}); 若需要在参数列表中引用补间动画实例自身，可使用"{self}"，如：onStartParams:["{self}", "param2"]。

  • onStartScope（Object）：指定 onStart 函数的作用域（即函数内 "this" 的引用）。

  • onUpdate（Function）：动画每次更新都会触发的回调函数（即活跃状态下动画的每一帧）

  • onUpdateParams（Array）：传入 onUpdate 函数的参数数组。例如 TweenLite.to(element, 1, {left:"100px", onUpdate:myFunction, onUpdateParams:[mc, "param2"]}); 若需要在参数列表中引用补间动画实例自身，可使用"{self}"，如：onUpdateParams:["{self}", "param2"]。

  • onUpdateScope（Object）：指定 onUpdate 函数的作用域（即函数内 "this" 的引用）

  • useFrames（Boolean）：若 useFrames 为 true，则补间动画的时刻（译者注：即刻度）是基于帧，而不是秒。因为它被添加到基于帧的根时间轴。这使其 duration 和 delay 均基于帧。补间动画实例的时刻模式总是由其父时间轴决定。

  • lazy（Boolean）：当补间动画首次渲染时会读取其初始值，而 GSAP 默认会自动“延迟渲染”该时刻（tick），这意味着它会将渲染操作（值的写入）放在“时刻（tick）”周期的最后一刻。这避免了 部分浏览器 上因『读/写/读/写』而导致的布局抖动（layout thrashing），从而提升了性能。如果你想禁用某个补间动画的延迟渲染特性，可将其设置为 lazy:false。当然，由于过渡时间为 0 的补间动画默认不执行延时渲染，你可以将其设置为 lazy:true，使其开启延时渲染，如：TweenLite.set(element, {opacity:0, lazy:true});。大多数情况下，你并不需要设置 lazy 属性。想了解更多相关知识，可查看 该视频。

  • onOverwrite（Function）：一个补间动画被另一个补间动画覆盖时的回调函数。以下参数会传入该函数：

    • overwrittenTween（Animation）：被覆盖的补间动画

    • overwritingTween（Animation）：覆盖其他补间动画的补间动画

    • target（Object【仅当覆盖模式为 "auto" 时才会传入该参数。这是因为仅有该模式下，发生覆盖时是部分覆盖，而不是整个补间动画进行覆盖】）：target 对象是由被覆盖的属性组成。通常情况下，它与 overwrittenTween.target 相同，除非它是一个数组，并且覆盖的目标是该数组的子元素。例如：TweenLite.to([obj1, obj2], 1, {x:100}) 与 TweenLite.to(obj2, 1, {x:50})，那么target就是obj2。

    • overwrittenProperties（Array【仅当覆盖模式为 "auto" 时才会传入该参数。这是因为仅有该模式下，发生覆盖时是部分覆盖，而不是整个补间动画进行覆盖】）：由被覆盖的属性名字组成的数组，如 ["x", "y", "opacity"]。

    注意：静态属性 TweenLite.onOverwrite 也是一个用于设置覆盖模式的快捷方式。适用于所有补间动画均会被覆盖的情况（特别是调试）。这省去了为每个补间动画设置 onOverwrite 属性的麻烦（1.14.0 版本及以上可用）。

  • autoCSS（Boolean）：过渡 CSS 相关的 DOM 属性需要 CSSPlugin。一般来说，你需要将 CSS 相关的属性放入 css:{} 对象内，如：TweenLite.to(element, 2, {css:{left:"200px", top:"100px"}, ease:Linear.easeNone});，以表明意图（并告诉 GSAP 将这些值提供给 CSSPlugin）。但由于过渡 CSS 相关属性非常常见，GSAP 内部实现了一些逻辑，允许你省去 css:{} 包装对象（意味着你可以将上面的代码重写为 TweenLite.to(element, 2, {left:"200px", top:"100px", ease:Linear.easeNone});）。默认情况下，GSAP 会检查目标元素是否是 DOM 元素，若是且未定义 css:{} 对象，则会自动创建并填充无需保留（保留的属性有：onComplete、ease、其余插件属性等）和非直接存在于目标元素（如：在元素上创建的自定义属性 "xpos"，是会被添加到 css:{} 对象内，[译者注：原文指自定义属性是不会被加入到 css:{} 对象内，译者自测是会被加入的]）的属性。为阻止 GSAP 自动创建 CSS 包装对象，可简单地设置为 autoCSS:false。该属性很少用到，但如果怀疑 GSAP 将某些非 CSS 相关的属性解析为 CSS 相关，可尝试设置 autoCSS:false 或手动定义 css:{} 对象。总是为 css 相关的属性创建 css:{} 包装对象是完全可以接受的。事实上，这种做法能轻微提高性能，因为这避免执行了补间动画在首次渲染时的一些解析逻辑（难以察觉此处的性能提升，除非同时对数千个 DOM 元素进行补间动画）。

  • callbackScope（Object）：为所有回调函数设置作用域（onStart、onUpdate、onComplete 等）。作用域即回调函数内的 "this" 引用。指定特定回调函数作用域的老旧属性（onStartScope、onUpdateScope、onCompleteScope、onReverseComplete 等）已被弃用，但仍然可用。

插件：

插件拥有很多特点，如：动态添加的特殊属性、提供额外能力而无需将其强制添加至引擎中，保持相对精简均衡。每个插件均与其属性名相关联，并负责处理该属性。例如：CSSPlugin 是与 css 属性名相关联，所以如果插件是活跃状态，它将会拦截下面补间动画的 "css" 属性，并以特殊方式管理它们，以影响 DOM 元素的样式（style）对象：

TweenLite.to(element, 1, {css:{top:"100px", left:"50px", backgroundColor:"#ff0000", fontSize:"12px"}, delay:0.5});

再次声明，CSSPlugin 是特例，TweenLite（1.8.0 版本起）无需将 CSS 相关的属性包装在 css 对象内（虽然可获得最佳性能）。

若 CSSPlugin 未加载，则 TweenLite 会试图从字面上过渡 element.css 属性（并未产生任何效果）。

基于函数的值

除了数值（x:100）、字符串（width: "300px"）、相对值（y:"+=50"），现在还可以通过函数实现更多的可能性，该函数会在补间动画首次渲染时为每个目标元素调用一次，并且该函数返回的任何值都将作为值。这非常适用于随机值和条件逻辑的情况。下面的案例中可以看到它的作用：

对应 Codepen：TweenLite function-based values

参数：index、target

传入函数的两个参数：

  1. index（整数）：目标元素在目标元素数组的位置（下标）。例如，类名 ".box" 对应有 3 个 <div> 元素，然后执行 TweenLite.to(".box", ...)，函数会被调用 3 次（每个目标元素一次），对应的 index 参数将依次是 0、1、2。

  2. target（Object）：目标元素自身（本案例中是 <div> 元素）。

使用 index 参数可轻易地实现自增。有多少种方式就有多少种创意。以下案例将使用 index 参数对每个元素的 x 值进行自增 100。

对应 Codepen：TweenLite function-based values - index target

案例

http://greensock.com/gsap-js/ 上有更多例子、教程和可互动的案例。

GreenSock 官方教程（视频和电子书）

如果你想知道 GSAP 能做什么，可以看看官方视频教程《Learn HTML5 Animation with GreenSock》。它超过 5 小时，由我们的极客大使 Carl Schooff 录制。该教程基于真实项目，详细说明了实现过程中每一步。

注意事项/提示：

  • 将值作为字符串传递，并前置 "+=" 或 "-="，即可进行相对于当前值的补间动画。例如：TweenLite.to(element, 2, {left:"-=20px"}); 是让 left 在当前值的基础上减去 20 像素。而 {x:"+=20"} 则是加上 20。

  • 缓动函数的默认值是 Power1.easeOut，可通过 TweenLite.defaultEase 进行更改。

  • 可通过TweenLite.killTweensOf(yourObject); 在任意时刻取消特定对象的所有补间动画。也可以使用字符串选择器，如 TweenLite.killTweensOf("#myID");

  • 可使用 TweenLite.killDelayedCallsTo(myFunction); 或 TweenLite.killTweensOf(myFunction);取消特定函数的所有delayedCalls 。

  • 若觉得本平台有用，请考虑加入 Club GreenSock。这不仅有助于平台的持续发展，还可以获得会员专属插件、课程和其它福利。可通过 http://greensock.com/club/ 了解更多信息。

构造函数

TweenLite( target:Object, duration: Number, vars: Object );

创建 TweenLite 补间动画的构造函数。

属性

data（*）：可存储任意数据的地方（若 vars.data 不为空，则在初始化时填入）。

defaultEase（Ease）[静态]：用于改变默认缓动函数的简易方式。

defaultOverwrite（String = "auto"）[静态]：用于改变默认覆盖模式的简易方式。

onOverwrite（Function）[静态]：当任意补间动画被另一个补间动画覆盖时所触发的回调函数（非常适合调试）。

selector（* = document.getElementbyId()）[静态]：当补间动画接收一个字符串作为其目标元素时，使用何种选择器引擎（如 jQuery），如 TweenLite.to("#myID", 1, {x:"100px"})。

target（Object）[只读]：目标元素（或对象数组），即哪个目标元素的属性应用补间动画。

ticker（Object）[静态]：每次引擎更新时调度 "tick" 事件的对象，可以轻易地添加监听器以在每次更新后运行自定义逻辑（适用于游戏开发者）。

timeline（SimpleTimeline）[只读]：父时间轴。

vars（Object）：vars 对象是构造函数的一个参数，存储着诸如 onComplete、onUpdate 等配置变量。

方法

delay( value: Number )：*

获取或设置动画的初始延时时间，即动画启动前的秒数（或帧，基于帧的补间动画）。

delayedCall( delay: Number, callback: Function, params: Array, scope: *, useFrames: Boolean ): TweenLite

[静态] 提供了一种在一定时间（或帧数）后调用函数的简单方式。

duration( value: Number )：*

获取或设置动画的持续时间，不包含任何重复次数（repeats）和重复延迟（repeatDelays）（这两者仅在 TweenMax 和 TweenlineMax 中可用）。

endTime( includeRepeats: Boolean ) : Number

根据父时间轴的本地时间返回动画的完成时间。

eventCallback( type: String, callback: Function, params: Array, scope: * ): *

获取或设置一个回调函数，如 "onComplete"、"onUpdate"、"onStart"、"onReverseComplete" 和 "onRepeat"（onRepeat 仅在 TweenMax 和 TimelineMax 实例有效），可向回调函数传入任意参数。

from( target: Object, duration: Number, vars: Object ): TweenLite

[静态] 用于创建一个反向 TweenLite 实例的静态方法。定义的是初始值，而当前值则被用作目标值。适用于进场动画，因为可以在一开始就设定了补间动画结束时的状态，然后从其它地方过渡至此。

fromTo( target: Object, duration: Number, fromVars: Object, toVars: Object ): TweenLite

[静态] 用于创建一个可定义初始和结束值的 TweenLite 实例的静态方法（与 to() 和 from() 补间动画不同，这两者均基于目标元素的当前值作为初始值或结束值）。

getTweensOf(target: *, onlyActive: Boolean): Array

[静态] 返回一个数组，该数组包含特定目标元素（或目标元素组合）的所有补间动画。前提是目标元素未被垃圾回收所释放，这通常在补间动画完成后几秒内发生。

invalidate(): *

[override] 清除所有初始化数据（如补间动画的初始值/结束值）。若想重新启动补间动画而不还原任何先前记录的初始值，那么这将非常有用。

isActive(): Boolean

判断动画目前是否处于活跃状态（即进度条在此实例的时间范围内移动，并且没有暂停，其祖先时间轴同理）。

kill( vars: Object, target: Object): *

根据参数完全取消整个或部分动画。

killDelayedCallsTo( func: Function ):

[静态] 立刻取消特定函数的所有delayedCalls。

killTweensOf( target: Object, onlyActive: Boolean, vars: Object ):

[静态] 取消特定对象的所有补间动画（或特定补间动画属性），也可以取消特定函数的所有 delayedCalls。

lagSmoothing( threshold: Number, adjustedLag: Number ):

当引擎的两个更新时刻间距过长时，该函数允许你针对此情景作出处理，调整核心时刻机制以补偿和避免“跳帧”。

pause( atTime: *, suppressEvents: Boolean ): *

暂停实例，可快进至特定时间。

paused( value: Boolean ): *

获取和设置动画的暂停状态，判断动画当前是否存于暂停状态。

play( from: *, suppressEvents: Boolean ): *

开始正向播放，可快进至特定时间（默认情况下，将从当前进度开始播放）。

progress( value: Number, suppressEvents: Boolean ): *

获取或设置动画的进度，取值范围为 0~1（不包含 repeats）。0 代表初始位置，0.5 代表中间位置，1 代表结束位置（完成）。

render():

强制所有活跃补间动画进行一次渲染。对于多个 from() 补间动画，你需要强制立刻渲染（即使是 "lazy" 的补间动画），以避免下一渲染时刻前的短暂延时。

restart( includeDelay: Boolean, suppressEvents: Boolean ): *

重新正向播放。

resume( from: *, suppressEvents: Boolean ): *

在不改变方向（正向或反向）的情况下恢复播放，可首先快进至特定时间。

reverse( from: *, suppressEvents: Boolean ): *

反向播放，动画的所有方面都反向，包括缓动函数。

reversed( value: Boolean ): *

获取或设置动画的反向状态，判断动画是否反向播放。

seek( time: *, suppressEvents: Boolean ): *

直接快进至特定时间，无论实例是否是暂停或反向。

set( target: Object, vars: Object ): TweenLite

[静态] 立刻为目标对象设置属性——本质是一个过渡时间为 0 的 to() 补间动画，只不过名字更直观而已。

startTime( value: Number ): *

获取或设置动画在其父时间轴上的开始时间（在延迟时间之后）。

time( value: Number, suppressEvents: Boolean ): *

获取或设置进度条的本地位置（本质是当前时间），单位为秒（或帧，基于帧的动画），不小于 0 且不大于动画的持续时间。

timeScale( value: Number ): *

用于缩放动画时间的因子，其中 1 为正常速度（默认），0.5 = 半速，2 = 两倍速度，以此类推。

to( target: Object, duration: Number, vars: Object ): TweenLite

[静态] 用于创建一个指定目标值的 TweenLite 实例的静态方法（初始值为当前值）。

totalDuration( value: Number ): *

获取或设置动画的总持续时间，其包含所有重复次数（repeats）和重复延迟时间（repeatDelays）（这两者仅在 TweenMax 和 TimelineMax 中可用）。

totalProgress( value: Number, suppressEvents: Boolean ): *

获取或设置动画总进度（包含重复次数（repeats）），取值区间为 0~1，0 代表初始位置，0.5 代表中点位置、1 代表结束位置（完成）。

totalTime( time: Number, suppressEvents: Boolean ): *

根据总持续时间（totalDuration）获取或设置进度条的位置，包含所有重复次数（repeats）和重复延迟时间（repeatDelays）（这两者仅在 TweenMax 和 TimelineMax 中可用）。

上一页DOCS Home下一页TweenMax

最后更新于