写在前面
记得以前 facebook 做过一款 HTML5 游戏。开场动画是一块软体类似豆腐的东西一起摇摆。类似的效果如下面的 gif 所示:
facebook 当时使用的是 createjs 下的子项目 easeljs 和 tweenjs 去制作,基于 Canvas 的动画。基本的原理主要是:循环运动 Canvas 抽象的 DisplayObject 的 skewX 和 scaleY 来实现软体摇摆。
目前来看 transformjs 也能做到,因为 transformjs 也能运动 skewX 和 scaleY。先来看看 facebook 的方式。