TweenMax 动画研究

最近 Html5 动画非常火,小溪里也在某一个网页中发现了它的踪迹。DEMO(建议在手机微信或者iPad微信上观看)

我在帝都的前端朋友也有问我,这种Html5动画怎么做。这里我把我的研究成果在这里展示一下。

我的这个 HTML5 动画研究是基于 Tween 的高级版 TweenMax 来做的。

Tween 动画 又称“补间动画”、“中间动画”,最早接触Tween类是在学习Flash时候,使用ActionScript做动画的时候,使用过类Tween。 --【Android】两种动画介绍(Tween动画、Frame动画)

Link to this heading
TweenMax.js 介绍

TweenMax 建立在 TweenLite 核心类以及它的大哥TweenFilterLite 基础之上,它为Tween 家族增加了新的受欢迎的功能(尽管只是锦上添花),从而使家族更加的壮大,比如贝赛尔缓动、暂停/继续能力,简便的连续缓、16进制颜色缓动、以及更多的内容。 --百度百科 tweenmax

当然,TweenLite 更加轻量级,需要调用更多的轻量级 js,只是小溪里有些偷懒,就直接用了TweenMax。

TweenMax.js 官网 (需翻墙) TweenMax.js Docs(需翻墙) TweenMax.js 参数说明 中文翻译

Link to this heading
TweenMax 与 CSS3 动画

小溪里觉得,CSS3 动画适合写一些逻辑比较少、自动循环的小动画,TweenMax.js 是用js来控制CSS的变化,适合写逻辑复杂的动画。

这里奉上使用TweenMax制作的《哈尔的移动城堡》动画 Howl's Moving Castle(需翻墙)

Link to this heading
附上 Demo 及部分代码

TweenMax Demo 网址 PS: DEMO 效果差强人意。建议在Chrome 浏览器的手机模拟器中查看。