CUED-迅雷用户体验设计中心

CSS3自定义动画的时间获得与元素绘制

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

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

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

2/特殊元素的绘制;

 

时间点的获得

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

    gif图在ps中的图层展示

    每个图层代表一帧;

    共205个图层(205帧);

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

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

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

 

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

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

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

方法3:利用现成的css3动画制作软件,例如Sencha Animator ;

方法4:waiting for you.

 

特殊元素的绘制

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

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

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图完成动画;

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

相关标签

  1. 屠夫 说:

    如果楼主能出视频教程 岂不是在设计界要火 呵呵 超赞!!!!!!!!!!!!!!!!

  2. tcdona 说:

    效果很酷

  3. 纸片 说:

    不错哦!

  4. Tommy 说:

    COOL!!

  5. Tomdy 说:

    让事物在合适的时间出现在合适的位置做合适的事情 支持!

  6. happyTIME_2 说:

    碉堡

  7. junjun 说:

    必须得膜拜下,这动画效果太棒了!!!

  8. leon 说:

    专业啊!!前来支持!

发表你的评论