TweenMax.js 适用于全平台高性能专业级动画插件

Question

TweenMax.js 适用于移动端和现代互联网的超高性能专业级动画插件，Tweenmax 是 GreenSock 动画平台的核心，配合其他插件可动画 CSS 属性、滤镜效果、颜色、声音、色彩、帧、饱和度、对比度、色调、色系、亮度、贝塞尔。

GreenSock 动画平台核心工具

TweenLite TweenLite 是 GSAP 最基础的核心工具，其优点是快速、轻量级和灵活的功能，简单配置即可制作出丰富的动画效果。 TweenLite 还是 TimelineLite 和 TimelineMax 的默认生成的动画对象。	TweenMax TweenMax 在 TweenLite 的基础上添加了 stagger，repeat()，yoyo()等功能。 TweenMax 不仅仅是升级版的TweenLite，它还包含了许多额外的工具和插件以及时间轴，其功能非常全面。
TimelineLite TimelineLite是一个轻量级，直观的时间轴类，用于构建和管理TweenLite、TweenMax、TimelineLite 和 TimelineMax 实例的序列。您可以将 TimelineLite 实例视为一个容器，可以随时放置 tween 或其他 timeline 在其中。	TimelineMax TimelineMax 提供 TimelineLite 完全相同的功能以及有用（但非必要）的功能，如repeat、repeatDelay、yoyo、currentLabel()、tweenTo()、tweenFromTo()、getLabelAfter()、getLabelBefore()、getActive() 等等。 TimelineMax 是 GSAP 最强大，功能最多的排序工具。

GreenSock 动画平台的基础插件

CSSPlugin CSSPlugin用于在TweenMax中对DOM元素的CSS相关属性进行动画，如width, height, margin, padding, top, left以及2D、3D变形等。	BezierPlugin 制作贝塞尔曲线动画。	ScrollToPlugin 提供页面滚动或元素内滚动动画。
TextPlugin 文字动画插件，文字逐个显示的动画效果。	Draggable 拖动插件。	CustomEase 自定义时间曲线。
ModifiersPlugin 修饰返回值插件。	AttrPlugin DOM属性动画插件。	ColorPropsPlugin 颜色相关属性动画插件。
CSSRulePlugin 样式表CSS样式动画插件。	RoundPropsPlugin 动画数值四舍五入整数插件。	DirectionalRotation Plugin 动画旋转方向控制插件。
RaphaelPlugin Raphael属性动画插件。	PixiPlugin Pixi.js对象动画插件。	EaselPlugin EaselJS动画属性插件。

GreenSock 动画平台的商业插件

SplitText SplitText 插件是GreenSock 动画平台用于将文本打散成数组从而进行动画。	Physics2DPlugin Physics2DPlugin 是GreenSock 动画平台用于进行物理动画的拓展插件，包括重力、速度、加速度、摩擦力动画等等。	DrawSVGPlugin DrawSVGPlugin是GreenSock 动画平台用于描绘SVG路径的插件。可以对SVG 的<path>, <line>, <polyline>, <polygon>, <rect>, <ellipse> 进行绘图动画。
MorphSVGPlugin MorphSVGPlugin是GreenSock 动画平台用于SVG变形的插件，可以在各形状之间进行平滑的变形动画。	GSDevTools GreenSock 动画调试工具。	ThrowPropsPlugin 投掷插件。
ScrambleTextPlugin 文字加密动画插件，使用随机字符对DOM元素中的文本进行加密。	PhysicsPropsPlugin 对象属性物理动画插件。	CustomWiggle 自定义摆动动画插件。
CustomBounce 自定义弹跳动画插件。

GreenSock 动画平台的特性

性能好速度快

性能最为重要，特别是在装载低性能CPU的移动设备上。

丝滑流畅的HTML5动画是所有动画引擎的目标，而GreenSock动画平台甚至超出“行业标准”10倍。这是无数次优化的结果，以确保你的互动项目的响应速度，效率和顺畅。

功能强大

GreenSock 动画平台是专业的动画工具，包含的许多强大功能使其他动画引擎看起来就像是小儿科。这些功能包括颜色，贝塞尔曲线，CSS属性，目标数组，页面滚动，获取/设定动画属性，自定义回调函数，以秒或帧为时间单位，毫不费力地构建序列，反向播放/反复播放和yoyo等等。

兼容

HTML5，SVG，jQuery，Canvas，CSS，新浏览器，旧浏览器，RequireJS，EaselJS，移动设备等等这些都没问题。可以在现代浏览器中加上各种3D变换（缩放，倾斜，旋转，x和y轴运动），甚至兼容IE6而不需要笨重的浏览器前缀和hack。我们来操心兼容性，因此你不需要，解决了这个HTML5动画最头痛的问题。

动画任何东西

是的，任何东西。没有预定义的属性列表可供选择。任何对象的任何数字属性都可以进行补间，如果该属性需要特殊处理（如颜色，过滤器，非数字值等），则可能要使用插件。

轻量级和可扩展

模块化，灵活且超高效，相对轻量化。GreenSock 动画平台以TweenLite为核心搭配其他插件。将TweenLite压缩到一个令人惊讶的小文件中。

没有依赖关系

GreenSock 动画平台不建立在jQuery之类的任何第三方工具之上的（尽管用jQuery作为选择器时效果很好）。这样可以最大限度地缩短加载时间并提高性能。

高级排序

你可以不仅限于“一个接一个”的动画排序。你可以按你想要的尽可能多的重叠动画。
在其他时间轴内嵌入时间轴、插入间隙，回调，标签，交错补间动画等等。
你可以精确控制时间和前所未有的灵活性，以最少的代码创建富有表现力的动画。

许可

除了非常具体的商业用途（转售给多个客户）之外，GreenSock的许可证完全免费，因此GreenSock的许可证使其非常易于使用且对商业友好，同时提供小型融资机制以维持持续的支持，增强和创新。

TweenMax 使用方法

greensock-js 文件包是免费开源部分，包含有核心工具、过渡时间曲线、基本插件、拓展插件等。此外，GreenSock还有一些商业插件。greensock-js文件包可以免费下载或使用CDN加载，商业插件不提供CDN，可以下载破解版或者购买授权后使用正版。

加载文件

必须要加载核心工具TweenLite.min.js或者TweenMax.min.js。此外还需要加载其他需要的插件，例如基础插件，时间轴，拓展时间曲线，商业插件等。

加载了相应的插件后即可使用相应的功能。

<script src="js/greensock-js/TweenLite.min.js"> </script>  -- 核心工具，可初始化TweenLite对象
<script src="js/greensock-js/plugins/CSSPlugin.min.js"> </script>  -- 基础插件，用于制作CSS动画2D，3D动画
<script src="js/greensock-js/plugins/BezierPlugin.min.js"> </script>  -- 基础插件，用于制作贝塞尔曲线
<script src="js/greensock-js/TimelineLite.min.js"> </script>  -- 核心工具，创建时间轴管理动画
<script src="js/greensock-js/easing/EasePack.min.js"> </script>  -- 拓展的时间曲线，例如bounce

建议在开发中使用TweenMax这个全功能的js文件，它包括了GreenSock动画平台的大部分核心功能。
使用TweenMax上面的加载可以简约为：

<script src="js/greensock-js/TweenMax.min.js"> </script>

制作动画

动画的三要素：

• 1.动画目标对象
• 2.动画的持续时间
• 3.变化的属性

例：制作一个简单的CSS动画。

制作CSS动画需要用到CSSPlugin（已经包含于TweenMax）。
使用TweenMax的to()方法，将一个id为"obj"的DOM元素的CSS属性的left属性从当前值过渡到500px，从而产生移动效果。持续时间3秒。

TweenMax.to("#obj", 3, {left:500});

left属性动画需要position:reletive支持，如需相对位置移动可使用x(CSS3的2D动画)更为简便

TweenMax.to("#obj", 3, {x:200});//在原有位置向右移动200px
TweenMax.to("#obj", 3, {x:200, y:100});//向右移动200px的同时向下移动100px

GreenSock 动画平台文件组成

以下表格展示了GreenSock动画平台包含的文件，CDN，免费文件，商业文件。

包含于 TweenMax

核心工具

• TweenLite
• TweenMax
• TimelineLite
• TimelineMax

基础插件

• Attr
• Bezier
• CSS
• DirectionalRotation
• RoundProps

核心时间曲线(包含于TweenLite)

• Linear
• Power0
• Power1 (a.k.a. "Quad")
• Power2 (a.k.a. "Cubic")
• Power3 (a.k.a. "Quart")
• Power4 (a.k.a. "Strong" or "Quint")

拓展时间曲线(EasePack)

• Back
• Bounce
• Circ
• Elastic
• Expo
• ExpoScaleEase
• Sine
• RoughEase
• SlowMo
• SteppedEase

拓展插件

• ColorProps
• CSS
• Rule
• Easel
• Modifiers
• Pixi
• ScrollTo
• Text

其他工具

• Draggable Requires CSSPlugin
• CustomEase Requires GreenSock account (free)

商业插件

• DrawSVG
• Physics2D
• PhysicsProps
• ScrambleText
• CustomBounce
• Requires CustomEase
• CustomWiggle
• Requires CustomEase
• GSDevTools
• MorphSVG
• SplitText
• ThrowProps
• Commercial license