TweenMax使用方法

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

• 下载免费greensock-js文件包和破解版商业插件
• 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秒。

• HTML
• CSS
• JS
• 展示

<div id="obj"></div>

#obj{
  position:relative;
  left:200px;
  top:20px;
  width:50px;
  height:50px;
  background:#6fb936;
  border-radius:5px;
}

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