Illusion Number

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

Illusion Number

这个动画能不能在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中的动画,但我至今不知道此图的作者是谁,所以如果任何人知道的话请联系我,谢谢!

一条评论

回复 新闻头条 取消回复