Three.js+TweenMax帮你实现骚气的H5动画广告

GSAP的TimeLineMax库可以很方便的管理时间轴动画，但是GSAP提供了TweenLite.js、TweenMax.js、TimelineLite.js和TimelineMax.js 4个文件，不用一脸懵逼，下面就介绍一下这些引用库文件都是做什么的。

• TweenLite 是GSAP的主体核心，它用于创建基本动画，是其他各类模块的基础。一般都会搭配plugins/CSSPlugin以实现DOM元素的动画（也就是我们最熟悉的动画了）。
• TimelineLite 是一个叫做时间轴的动画容器，它用于对多个动画进行有序的组织与控制。
• TimeLineMax 是TimelineLite的升级版，在TimelineLite的基础之上，可以有更高级的组织与控制。
• TweenMax 是GSAP集合包，除前面3个之外，还包括plugins里的常用插件以及easing里的缓动函数补充。

因此，如果想要简单地引入GSAP的主体功能，使用TweenMax.js这一个文件即可。而如果要争取更小的库文件大小，应该使用TweenLite.js（必需）+ 其他文件的组合。下面是它们的重叠包含关系图。

搞明白这些概念之后，剩下的就简单了，只需要打开 文档 ，做几个Deom就什么都会了（毕竟更深的东西暂时也用不到）。下面给出一个简单的时间轴实现代码，只需要to to to to…..就完成了，是不是很容易。

12345

var tl = new TimelineLite();tl.to($box, 1, {x:50,y:0}).to($box, 1, {x:50,y:50}).to($box, 1, {x:-50,y:50}).to($box, 1, {x:-50,y:0});

GSAP还非常贴心的给出了一份包含丰富参考代码的 备忘单（Cheat Sheet）。

真正的3D动画webGL库—threejs

在H5内想实现空间变换和推拉的效果，面对很多素材的大型场景时，灵巧的css3 3d空间变换显得十分吃力。为了更好的效率和流畅的体验，可以选用webGL来绘制3D场景，通过3DMAX、玛雅等工具建模后导入3d模型进行外部模型加载