CSS3动画实践 – 2017京东集团开年大会项目有趣的动画实现

2017京东集团开年大会在 2 月 10 日终于开始了,当然,也结束了。 微信朋友圈里纷纷表示: 成功保持工作几年来从来没有中过奖的记录。 完美错过所有大奖,新的一年大家工作顺利。 一如既往,成功避开所有奖项 虽然没有中奖,但是大家在年会等待开奖期间还是有不少好玩的东西可以消遣的。下面就为大家介绍两个基于 CSS3 做的动画效果:一个是在朋友圈广为扩散、略显逼格的「京彩AR」,一个是严肃认真、指导场内人员的「员工参会电子手册」。 先睹为快吧: 京彩AR 员工参会电子手册         京彩AR 要做好一个 CSS3 动画,既要关注性能,流畅不卡顿,适配各种分辨率的手机屏幕,还需要关注作品是否自然,动画过渡流畅生动。在接到项目需求时,我们的内心是崩溃的,不过幸好有友爱的设计师和强力的前端指导,最终完成了所有动画效果。 设计师 「 陈秀峰 」美女给的设计稿如下,包括初始加载动画、仿微信锁屏消息通知、仿微信聊天界面以及一个加载动画的 gif 演示图。 页面中存在宇航员 Joy、星球、消息块以及若干修饰元素。根据页面所需动画效果的粒度和页面结构,我们将设计稿按下面指示切出素材。 宇航员 Joy 宇航员 Joy 部分的动画最为复杂,它的元素很多,组织好各个元素的出场,在场及退场的时间和顺序是一个极具挑战的。首先我们将元素分布画出来: 我们将距离屏幕最近的左下角星球作为太空运行中心,其余的星球和流星围绕中心运转。对于星球、流星、火箭等这里基本采用的是直线运动,主要是控制运动的速度和直线的角度,还有就是元素前后关系。两点决定一个直线的的轨迹,所以设定各个元素的起始点、终止点以及帧动画运动的时间,例如流星位移利用 translate3d 更改 X 和 Y 的坐标值,将元素移出视窗外。

而宇航员 Joy 脚下的火焰,则利用了精灵动画来处理,首先切一个完整的精灵图,然后用背景图的位移 background-position 来控制动画效果。

我们利用 animation属性的 steps 函数做关键帧的划分,这个函数和接下来要讲的贝塞尔函数是 animation-timing-function 的两个可选函数,实际使用中我们经常会忽略 steps 函数的使用。 […]

© 2017 JDC. All Rights Reserved.