GreenSock Animation Platform(GSAP)使实现javascript动画简单直接.

GSAP是什么

GreenSock Animation Platform包含动画所需的一系列工具:

• TweenLite: 引擎核心, 可以处理所有对象所有属性的动画. 这是一个轻量级且具备核心功能, 可以使用插件进行扩展(如CSSPlugin用于DOM元素样式的动画, ScrollToPlugin用于页面滚动动画)
• TweenMax: 在TweenLite基础上添加了repeat, yoyo, repeatDelay辅助功能, 同时提供了很多常用插件, 如CSSPlugin, 这样就可以避免引入多个文件. 组件关注与功能完备而不是轻量级.
• TimelineLite: 轻量级顺序工具, 用于作为tweens容器. 用于控制,管理动画之间的时序. 也可以在timeline内包含timeline, 这样可以模块化动画.
• TimelineMax: 扩展TimelineLite, 提供了repeat, repeatDelay, yoyo, currentLabel等功能.
• 其他工具,插件等

加载GSAP文件

去GSAP github下载文件引入页面,或者通过官方CDN引入所需文件即可.

TweenMax包含了TweenLite, CSSPlugin, EasePack, TimelineLite, TimelineMax, RoundPropsPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin, 所以引入这一个文件就可以包含所需的所有基本功能

如果关心文件大小, 可以根据需要引入文件.

jQuery插件

GSAP不依赖于jQuery, 但是提供了jquery.gsap插件. 官方推荐使用GSAP原生的API.

基础动画

TweenLite可以在任意javascript对象的数字属性之间进行变化. 也可以通过插件实现css属性等变化.

TweenLite.to([target object], [duration in seconds], [destination values])动画到指定属性

下面的例子定义了一个对象,然后设置属性在2秒内变化到100:

var obj = {
  myProp: 0
}
TweenLite.to(obj, 2, {myProp: 100});

设置id为photo的img宽度,高度在1.5秒内变化到指定值:

var photo = document.getElementById('photo');
TweenLite.to(photo, 1.5, {width: 100, height: 200});

TweenLite.from从指定值动画到当前值

将图片从指定宽度,高度动画到当前值

TweenLite.from('#phpto', 1.5, {width: 100, height: 200});

TweenLite.fromTo设置起始点和终止点

将图片从指定值, 动画到指定值

TweenLite.fromTo('#photo', 1.5, {width: 0, height: 0}, {width: 100, height: 200});

控制动画开始

设置paused: true;或者pause()方法可以阻止动画立即执行, 在需要执行的时候调用

特殊属性

GSAP会识别一些属性作为动画控制属性, 如delay指定动画延迟指定时间之后开始.以下是一些常用属性:

• onComplete
• ease
• overwirte
• paused
• useFrames
• immediateRender
• onStart
• onUpdate
• onCompleteParams

完整列表可以查看TweenLite文档. 其中最常用的是ease和onComplete.

Easing

不同的缓动函数产生不同的视觉效果.官方在线可视化demo

默认ease函数是Power1.easeOut, 通过ease属性修改.

TweenLite.to(photo, 1, {width: 100, ease: Power2.easeOut});
TweenLite.to(photo, 1, {height: 200, ease: Elastic.easeOut});

最常用的函数是:Back.easeOut, Elastic.easeOut, SlowMo.ease, Bounce.easeOut, Linear.easeNone

插件

插件是在TweenLite之外添加的特殊属性, 这样就可以保证动画引擎核心小且高效. 如CSSPlugin解析css相关属性并执行动画, ScrollToPlugin解析scrollTo.*如果使用TweenLite需要单独引入插件文件 如果使用TweenMax需要查看文档是否包含了对应插件, 根据情况引入

ScrollToPlugin

用于滚动window(window.scrollTo(x, y))或者元素滚动条(elem.scrollTop = y;), ScrollToPlugin插件需要单独引入

// 滚动窗口
TweenLite.to(window, 2, {scrollTo: {y: 400}, ease: Power2.easeOut});

滚动DOM元素需要设置样式overflow: scroll;

TweenLite.to(myDiv, 2, {scrollTo: {y: 400}, ease: Power2.easeOut});