最近逛从网的时候，偶然发现一张挺有意思的Gif图。

这个动画能不能在Web实现呢？答案是可以

先放项目地址：https://github.com/malash/illusion-number

我想到的实现思路一共有三种：

1. 将图形分为一个个小矩形(显示原理类似LED显示屏只不过不是按边显示而是按块)，每个小矩形分别用transform和animation实现旋转和位移动画。
2. 将图形按照面划分，在同一平面上的图形使用CSS3的clip-path绘制，再使用transform和animation实现旋转和位移动画。
3. 使用HTML5的Canvas绘制。

第一种是本项目Illusion Number所选用的实现方法。效果如下：

技术方面使用Javascript生成DOM结构并计算矩形块的显示、位置、所需变化动画的class名，由于动画中每个数字的变化所用到的矩形块较多且位置不一，所以采用给定开始和结束图形后Javascript自动计算变化过程中矩形块的方法，可参见setBitmap方法；由于动画效果较多，直接写CSS劳动量过大，因此需要一个更强大的CSS。一开始我选用了PostCSS+PreCSS，它比Sass更轻、更可配置，但当我写到一半时发现PreCSS无法解析@keyframes中出现的变量，无奈只得换回了Sass开发；此外项目使用Gulp作为自动化构建工具，使用Bower发布。

第二种实现方法我也进行了尝试，但由于clip-path在非Safari浏览器中存在一些Bug，最终放弃了这个思路。

第三种实现方法还未进行尝试。

最后，虽然我实现了这张Gif中的动画，但我至今不知道此图的作者是谁，所以如果任何人知道的话请联系我，谢谢！