前端技术：css3自定义动画的时间获得与元素绘制

　　最近工作之余，参考gif图片(点击我预览)，用css3写了个demo来模拟这个gif图动画，最终效果点击我，请用chrome预览。

　　制作过程中，有几个小点觉得可以分享交流下：

　　1/动画关键帧时间点的获得，用于近似地模拟整个动画效果;

　　2/特殊元素的绘制;

　　时间点的获得

　　1.以上面gif图为例，将该gif图下载到本地，然后用photosh时间点op cs6打开，在图层窗口中可以看到动画组成的相关图层，如下图所示：

　　每个图层代表一帧;

　　共205个图层(205帧);

　　假设我们希望仿照这个gif来创建一个10s的动画，则各动画事物个体的animation-duration值为10s;

　　接下来逐个设置各事物个体的动画。

　　2.以从图层1(第一帧)开始，先出现的事物个体先解决。

　　观察发现，图层1到图层6中，出现一个红色矩形(第一个出现的事物个体)，且这个过程都是顺时针旋转+变大，到了图层7，红色矩形开始逆时针旋转+变小;因此，图层6就成了关键帧(即原动作的结束，即将开始新动作)。按比例来算，(图层6/图层205)=0.0292682927，取2.92%，这个2.92%就是我们用animation时所需的时间点：

　　接下来，红色矩形在图层6到图层12时进行逆时针旋转+变小，在图层13到图层15时静止，在图层16到图层24时则是顺时针旋转+变大，因此有

　　(图层12/图层205)约等于0.058536，取5.85%

　　(图层15/图层205)约等于0.07317，取7.3%

　　(图层24/图层205)约等于0.11707，取11.7%

　　同样的方法持续分析，最终算到图层205，可得红色矩形的每个动作时间点，

　　此时运行结果所得就是红色矩形在整个10s内的全部动画;

　　3.以计算完第一个红色矩形后，回到图层1，继续寻找下一个出现的事物个体(比如图层4开始出现一个白色矩形)，然后分别计算各个体在10s内的所有时间点，最终所有事物个体的动画视觉上叠在在一起，就完成了这个作品的整体动画。

　　有现成的gif图做参考，用上述方法获取动作的时间点算是比较方便，但实际工作中往往很多时候并没有现成的gif图，如何获得各关键帧的时间点?

　　方法1：先制作gif图，通过gif图用上述方法模拟获得;

　　方法2：感性地边写边调，需要很多耐心，但完成后会很有成就感;

　　方法3：利用现成的css3动画制作软件，例如sencha animator ;

　　方法4：waiting for you.

　　特殊元素的绘制

　　动画制作往往会遇到特殊形状(有别于常规的点/线/圈/圆/多边形)的元素，除了用图片外，可尽量尝试使用css3来绘制，具体情况具体分析;

　　比如这个demo中出现的线圈小碎片。

　　这种纯色背景的动画里，在一个html标签的background-image属性里用线性渐变linear-gradient()和径向渐变radial-gradient() 这两个取值即可完成这个图案的绘制。

　　b/c/d分别用线性渐变linear-gradient()画，a用径向渐变radial-gradient()来画，然后在background-image中叠加a/b/c/d这四个图案即可。

　　元素绘制的方法多种多样，视实际情况而定，一般借助伪对象/内外阴影box-shadow/多种背景图案的叠加background-image/ 线性渐变linear-gradient()/径向渐变radial-gradient()来绘制具体图案，用transform属性和border-radius(包括上下左右四个角的radius)来完成元素外形的变形。

　　结语

　　上例中的原gif图高达378kb，而用css3来模拟，则html+css文件只需20.2kb;各浏览器下可以尝试共用一套html和css，让支持css3的浏览器用css3来画这类动画，不支持css3的浏览器用一张gif图完成动画;

　　玩动画的乐趣在于可以让时间和空间相遇结合，这是件很美丽而优雅的事情，让事物在合适的时间出现在合适的位置做合适的事情，让自己很好地过了回导演瘾。