中国第五届CSS大会分享:CSS TIME

懵懂少年有幸受邀参加3.30中国第五届CSS大会分享,感谢业界大咖的不嫌弃,鉴于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%。

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

感谢大家能耐心浏览到这,感谢CSS大会的主办方邀请以及腾讯技术工程公众号的约稿,以下为本次分享的文章大纲:

  1. 常用属性        ——移动盒子
  2. K帧分配       ——弹跳盒子
  3. 时间延长        ——波浪弹跳盒子
  4. 顺序延迟         ——循环波浪弹跳盒子
  5. 节奏感        ——联动呼应弹跳双盒子        ——联动顺接弹跳双盒子        ——Ipengoo 企鹅动画分析
  6. 随机感 

              ——粒子下降反弹实例

              ——雪花飘落实例

    7. 时长衡定 

              ——0.3S分水岭

              ——多终端的时长基数

原文发布于微信公众号 - 腾讯技术工程(Tencent_TEG)

原文发表时间:2019-04-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

编辑于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券