一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农

CDC 在设计圈是个耳熟能详的名字,可并不知道这里还有一群开发达人。


今天给大家介绍一位动画高手


一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农


陈在真

CDC研发中心高级前端开发工程师,兼怪奇鹅研究所资深顾问,一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农,人称陈老SHI。


以下是他受邀作为“中国第五届 CSS 开发者大会”演讲嘉宾,分享的关于 CSS 动画时间的心得。



——

文章大纲


  • 常用属性

    —— 移动盒子

  • K帧分配

    —— 弹跳盒子

  • 时间延长

    —— 波浪弹跳盒子

  • 顺序延迟

    —— 循环波浪弹跳盒子

  • 节奏感

    —— 联动呼应弹跳双盒子

    —— 联动顺接弹跳双盒子

    —— Ipengoo 企鹅动画分析

  • 随机感

    —— 粒子下降反弹实例

    —— 雪花飘落实例

  • 长衡定 

    —— 0.3S分水岭

    —— 多终端的时长基数



   以下干货满满,请重点关注哟   


鉴于 CSS 的更新频率不及 JS 各种迭代高,新的特性组织起来对于分享会比较散,所以我选择一个关于动画时间的主题,基于大家熟悉的常用动画属性,提炼了一些新的用法和思维,用于引导 WEB 侧动画的制作。


如大家所熟悉的,CSS动画里面,最常用的动画属性,非Transition、Animation莫属,而时间属性,逃不过Duration(动画时间)、Delay(延迟时间),官方的属性定义是:

Duration : 定义动画完成一个周期需要多少秒或毫秒。

Delay : 定义动画什么时候开始。


一般我比较偏向于用Animation制作动画,一般性写法为:

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农


第1个0.3s 为动画时间,第2个0.3s为延迟时间,可参考下面盒子平移动画:

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农


动画描述:盒子竖直移动,从下到上,移动40px。动画时间轴如下:

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农

基于一般性动画用After Effect里面的K帧手法,对动画关键帧进行分割,得到盒子弹跳动画如下:

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农


动画描述:盒子弹跳运动,从下到上,幅度40px。

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农


动画关键帧keyframes如下:

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农


具体动画keyframes代码:


该动画从0-100,K6帧,0%保持原始状态,20%做一个挤压的预备动作,40%向上弹跳40px并且做拉伸状,60%回落原地为下次反弹做挤压蓄力,80%反弹再次拉伸,最后100%回落原点保持原始状态与0%呼应。


单元素的动画,可以通过调整关键帧来实现,但多元素互动的需求更为日常,比如,要让3个盒子有序的进行波浪弹跳动画,可以通过加长每个动画的时间长度来实现,具体动画效果效果如下:

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农


animation写法如下:

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农


动画时间轴如下:

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农

但通过加长时间长度的方式来实现波浪弹跳盒子,由于时间长度存在时间差,会导致动画循环 infinite波浪会错乱,效果如下:

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农

解决的方法,是通过延迟delay的方式制造时间差,让动画循环时间统一,从而实现循环波浪弹跳动画,效果如下:

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农


animation写法如下:

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农


动画时间轴如下:

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农

元素之间动画时间可以存在关系,同样,元素之间,动作也会存在关系,通过彼此相互作用产生互动,让元素动画更加生动,比如 双盒弹跳联动,效果如下:

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农


这个动画实例抽样,是平时制作CSS动画较常见的一种关键点呼应的制作手法, animation写法如下:

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农


动画关键帧轴如下:

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农

动画关键帧keyframes如下:

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农


bottom蓝色盒子在0%~75%进行弹跳动画,75%~100%保持静止状态


up红色盒子则是在0%~75%进行1次起跳后,在45%到达最高点,75%回落原点,90% 2次起跳,100%保持原始状态。


两个盒子在0%~75%这个区间内,关键帧保持一致,达到动作呼应的效果。


同样用于制作元素之间相互用的交互动画,还有一种关键点顺接的制作手法,大致效果如下:

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农


animation写法如下:

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农


动画关键帧keyframes如下:

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农


bottom蓝色盒子其实是不动的,动的是外部容器,容器在0%~50%进行弹跳动画,50%~100%保持静止状态


up红色盒子则是在0%~50%保持静止状态,在50%~100%进行弹跳动画


两个动画,关键帧顺接拼接构成一个整体动画,从而达到与呼应不同的视觉效果。


下面再看综合性实例例:Ipengoo,一个H5首页,整体效果如下:

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农


重点放在主体星球,邮筒以及怪奇鹅Ipengoo上,主要html结构如下:

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农

星球及邮筒动画如下:

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农

 


Animation写法如下:

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农


星球延迟0.8s进场,动画时间0.6s ,入场动画在1.4s结束后,进行5s为周期的星球浮动循环动画;邮筒则是延迟1.2s在星球即将结束入场动画时出现,动画时间0.3s,入场后处于静止状态,保持在入场动画是100%位置,延迟2.9s后,执行动画时间为1.2s的循环动画,注意这里邮筒的变换原点transform-origin是在48% 100%位置,即水平方向的中间靠左,垂直方向的底部,不修改的话,是在元素中心点50% 50%处,元素执行动画的时候,会以中心往上下弹动,所以需要修改变换中心点让邮筒以该点为动画变换中心,从下往上运动,稳住脚跟。


而邮筒的mouse则是后续在制作怪奇鹅手臂附属动画的时候添加上的,目的是增加邮筒与怪奇鹅的互动,所以时间是做了延迟2.8s的处理,跟怪奇鹅的循环动画开始时间呼应,同样动画循环的时间是1.2s,而这里的transform-origin则是设置在50% 5%的位置,即 水平方向中间点,垂直方向顶部,动画呈现的效果是,嘴巴下巴一张一合,想要吃怪奇鹅手里的邮件。


右边Ipengoo的动画如下:

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农


Animation写法如下:

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农


怪奇鹅是延迟1.6s出现,即邮筒出现之后,入场动画1.2s,2.8s入场动画完成后,进行动画时间1.2s 的循环动画,变换原点跟邮筒同理,设置在底部中间位置,目的是让怪奇鹅贴着地面弹跳。手与邮件动画时间跟怪奇鹅主体动画时间保持一致,这里则是用到我《CSS3 动画》课程里面动画十四原则讲到的附属动作,对比下面动画:

     一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农    

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农


上面的是单纯怪奇鹅主体动画,下面的则是添加了怪奇鹅手部与邮件的附属动作,对比之下,下面的动画会显得更加夸张且生动,这也就是有时候会发现,为什么做的动画会显得很“硬”不自然的缘故,因为缺少了一些细节,主体动画需要附属动画的承托,才会显得更加自然生动。


附属动画关键帧对比如下:


一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农


动画关键帧keyframes如下:

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农

主体动画是分5个关键帧,但是附属动画关键帧,不一定要完全跟主题动画一致,只要动画节奏感一致即可,这里我在怪奇鹅的主体动画运动后,附属动画压后5%处理,让附属动画视觉上存在一些惯性。而变换上,主要是做旋转处理,变换原点是在怪奇鹅手臂上,让怪奇鹅的手拿着邮件,产生一定幅度的摇摆动画,从而强化衬托出主体的运动幅度。


而眼睛则是在怪奇鹅完成入场动画后,进行动画时间3s的循环动画,这里没有太多必要让眼睛动画跟主体动画保持时间一致,可以适当给予一点随机感。左边的怪奇鹅与右边的整体一致,只不过延迟1.8s入场,两只怪奇鹅错开0.2s,避免同时左右入场,让用户视线混乱,但是循环动画时间保持一致,两只怪奇鹅,其实可以理解为两个波浪弹跳盒子。


主体星球,邮筒以及主⻆怪奇鹅的入场循环时间轴如下:

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农

每一个动画场景,都会有一条与之对应的时间轴,轴上的元素,入场延迟,入场动画时间,循环动画延迟,循环动画时间,都需要有规划的安排好,元素与元素之间是存在着呼应,还是顺接关系,需要在规划的时候理清,这样再多元素,也可以让动画有序进行,创造出整体动画的节奏感。


那一直连续的动画循环,是否合适?看下面的动画:

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农


动画关键帧keyframes如下:

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农


怪奇鹅的动画关键帧在0%~80%之间,是处于运动状态,但是80%~100%,是处于静止状态,让动画处于动画时间20%的短暂停顿,因为连续的动画会让用户眼睛产生视觉疲劳,需要适当的停顿,与预备动作类似,让用户能够有休息思考的时间。


CSS动画可以通过时间关键帧的操作制造出节奏感,那能不能制造出随机感呢?

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农


不用JS,单纯用CSS就可以制作小颗粒掉落反弹的随机感,html结构很简单,只需要8个标签作为载体,通过时间与延迟控制来实现,html结构如下:

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农


动画关键帧keyframes如下:

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农


drop_1的关键帧拆分,从0%~50%是粒子从上往下掉落,50%~53%接触到弧形表面,出现短暂缓冲停顿,53%~70%呈向上反弹,并且同时出现水平方向的X向量,向左移动,85%~100%粒子透明度从1~0,慢慢消失,drop_2的关键帧分拆跟drop_1一致,唯一不同的是,反弹后出现的X轴向量,是跟drop_1是反向的,因为粒子掉落在弧面两边后,反弹角度是一左一右的,完成关键帧拆分后,究竟随机感是怎么通过时间实现呢?


Animation写法如下:

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农


通过错开各个粒子的延迟时间,让粒子开始动画的时间分散,等出现初始的随机后,粒子循环时间也进行时间长度的随机,其实这里就是波浪盒子时间延长处理方法的另一处应用,具体可以参考粒子循环时间轴如下:

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农

从上面这张循环时间轴图,我们可以看到,粒子之间由于动画时长不一致,会让所有粒子循环动画的结束与开始,在短时间内都不会对齐到一条线上,除非是各粒子动画时长的最小公倍数,而在这最小公倍数时间内,各粒子的掉落对于用户而言,可以理解为随机的。


另外一个随机的粒子,可以参考雪花飘落的效果,也是用同样的手法,制造的随机感:

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农


很多时候,会感觉动画节奏感有点慢,或者太快了,具体的时间怎么去恒定?有没有一个时间的基数作为参考呢?

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农

每个小球,从左到右,动画时间分别是0.1s、0.2s、0.3s、0.4s、0.5s,0.1s会让人感觉太快了,而0.5s则是相反,感觉太慢了,0.2s~0.4s区间视觉上会比较舒适,可以通过下图,加深下理解:

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农

图片摘自《UI动效基本规则总结》


0.2s~0.4s还是比较感性的参考,理性一点的话,可以参考 《Material Design》里面关于动画时间的分析。


在移动端过渡时长,基准是300ms,即0.3s,根据情况可做如下调整:

  1. 幅度大、复杂的、全屏过渡动画可能需要更长的持续时间,可以长达 375ms

  2. 元素进入屏幕需要的时长为 225ms

  3. 元素离开屏幕需要的时长为 195ms

  4. 超过 400ms 的过渡动画可能会感觉太慢。


在平板上,过渡时长会比手机上长30%。


在可穿戴设备,过渡时长会比手机上的短30%。


具体动画时间在各个设备上的时间体现,参考如下:

一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农





一位风度翩翩夹杂着猥琐眼神和神秘微笑的少年码农



快乐工作,快乐生活

Happy work , Happy life


/


Join us





本篇文章来源于微信公众号: 腾讯CDC体验设计

UI/UX

U享会|春运专场下篇—从共赢&数据视角窥见运营设计

2019-4-18 9:30:00

UI/UX

淘宝场景下的互动关系设计探索

2019-4-22 16:52:40

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索