您好,欢迎您来到UED用户体验网!
为你,我们建了一个平台 服务于用户体验+运营
HBUED.COM全国最具影响力的UED发言平台
原创投稿
您当前位置:UED用户体验网首页 >> 前端开发 >> 实例分析CSS3自定义动画和元素绘制

实例分析CSS3自定义动画和元素绘制

2013-06-28 13:16:34 来源:河北用户体验社区-HBued.com 浏览:2052
内容提要:来源于迅雷UED,和大家分享一起进步

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

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

http://hbued.com/html5/anli1.html

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

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

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

转载<< 实例分析CSS3自定义动画和元素绘制 >>请注明来源于互联网最具影响力的UED发言平台!用户体验网 - Hbued.com

关注HBUED创始人微信号:只需用手机微信扫一扫!

我们提供最全的互联网招聘信息、高端人脉信息、用户体验分析研究、互联网产品定位、网站运营推广等信息,关注HBUED掌门人的微信,可以直接与其沟通交流!

互联网人脉库入驻

优先被名企高薪发现你信息

我是高端互联网人士要入驻

名企高薪招聘发布

帮企业第一时间免费找人脉

我是互联网企业要发布招聘

爆料本地互联网事

每天爆料最新的身边互联网

我有最新互联网新闻要爆料

最新企业项目宣传

帮你针对互联网精准宣传

我要宣传我的最新创业项目

你可能感兴趣的文章




© 2008-2016 Hbued.com 版权所有 著作权与商标声明 | 关于我们 | 我要投稿 | 关于创始人 | 商务合作 | QQ群:66206675 | 谢绝IE6.0浏览器

UED用户体验网 | 互联网+ | 用户体验 | 互联网资讯 | 网站运营 | 移动互联网 | 电子商务 | 创业访谈 | 互联网大佬 | 互联网人脉库 | 产品经理 | 产品设计 | 交互设计 | 视觉设计 | 前端开发 | 互联网招聘 | 热门话题