TweenMax使用方法

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

加载文件

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

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

  -- 核心工具,可初始化TweenLite对象
  -- 基础插件,用于制作CSS365体育官网-ribo88_365手机体育投注_365体育在线国外网址2D,3D365体育官网-ribo88_365手机体育投注_365体育在线国外网址
  -- 基础插件,用于制作贝塞尔曲线
  -- 核心工具,创建时间轴管理365体育官网-ribo88_365手机体育投注_365体育在线国外网址
  -- 拓展的时间曲线,例如bounce

建议在开发中使用TweenMax这个全功能的js文件,它包括了GreenSock365体育官网-ribo88_365手机体育投注_365体育在线国外网址平台的大部分核心功能。
使用TweenMax上面的加载可以简约为:

制作365体育官网-ribo88_365手机体育投注_365体育在线国外网址

365体育官网-ribo88_365手机体育投注_365体育在线国外网址的三要素:

例:制作一个简单的CSS365体育官网-ribo88_365手机体育投注_365体育在线国外网址。

制作CSS365体育官网-ribo88_365手机体育投注_365体育在线国外网址需要用到CSSPlugin(已经包含于TweenMax)。
使用TweenMax的to()方法,将一个id为"obj"的DOM元素的CSS属性的left属性从当前值过渡到500px,从而产生移动效果。持续时间3秒。

  • HTML
  • CSS
  • JS
  • 展示
#obj{
  position:relative;
  left:200px;
  top:20px;
  width:50px;
  height:50px;
  background:#6fb936;
  border-radius:5px;
}
TweenMax.to("#obj", 3, {left:500});
重播

?

left属性365体育官网-ribo88_365手机体育投注_365体育在线国外网址需要position:reletive支持,如需相对位置移动可使用x(CSS3的2D365体育官网-ribo88_365手机体育投注_365体育在线国外网址)更为简便

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