手把手教你实现「京喜工厂」的CSS动画效果

时间 2020-05-15

标签手把手实现工厂 css 动画效果栏目悠闲生活繁體版

原文原文链接

本文做者@吴冠禧。javascript

0 契机与背景

今年Q1（2020年第一季度）参与了京喜事业部「京喜工厂」业务的前端开发。用户能够经过「京喜工厂」参与口罩、抽纸、大米等商品的“在线生产”，既能趣味造物，又能免费领奖品。目前能够经过「京喜」小程序首页访问该活动。css

活动在上线一个月后，PV达到千万的量级，引人注目。有很多前端同窗好奇里面涉及到的动画实现，文本应运而生。html

「京喜工厂」项目包括了微信小程序原生页面和H5页面这两个平台，项目中使用了大量的 CSS 动画，在两个平台都可完美运行，还没有发现明显的兼容性问题。前端

本文就部分所涉及到的动画效果进行复盘和总结。在真实的项目实战中，手把手教你深刻学习 CSS 动画的原理和实现细节。java

「京喜工厂」活动首页的截图效果以下：git

0.0 计算机动画原理

动画是指由许多帧静止的画面，以必定的速度（如每秒16张）连续播放时，肉眼因 视觉暂留 产生错觉。要达成最基本的视觉暂留效果至少须要 10帧/秒，普通电影是 24帧/秒，普通显示器刷新频率是 60帧/秒。github

下面的两个Gif都是用相同的6帧组成，可是播放速度不同，10帧/秒就有点动画的效果，2帧/秒就会有卡顿的感受。web

10帧/秒:	2帧/秒:

1 CSS 能作多复杂的动画？

1.1 动画展现

京喜工厂小人走路动画（4倍速播放）：canvas

1.2 动画描述与分析

整个动画大致上就是小人按照从右侧进入工厂，绕着工厂内一圈的方式最后从右侧出去：小程序

走路过程当中会有走路的动做：

注意从右走到左时吗，小人朝向右；从左走到右时，小人朝向左：

路径过程当中会有几个驻留点，每一个点驻留一小段时间，作工做中的动做：

2 为何要用 CSS 作复杂动画？（竞品对比 SVG 、Javascript 、CSS）

咱们先来对比一下。

2.1 SVG

SVG 原生支持 SMIL(Synchronized Multimedia Integration Language), SMIL 容许你：

（1）变更一个元素的数字属性（x、y……）<animate>

（2）变更变形属性（translation或rotation）<animateTransform>

（3）变更颜色属性 <animate> || <animateColor>(已废弃)

（4）物件方向与运动路径方向同步(路径动画) <animateMotion>

其实都算是常规的动画能力，可是配合一些 SVG 专有的特性会产生一些奇妙和效果，例如描边动画就是利用 stroke-dasharray 和 stroke-dashoffset 实现的。另外，同为路径动画 SMIL 的 <animateMotion> 就比 CSS 的 offset-path 兼容性好不少。

微信小程序：微信小程序不支持 SVG 及 SMIL 。

2.2 Javascript

理论上， Javascript 能作任何动画。通常来讲 Javascript 动画能够分为 操纵 DOM 属性的动画 和 操纵 canvas api 的动画，这两种都的原理都是经过 window.requestAnimationFrame() 或者 window.setTimeout() 这类时间控制函数实现每 16.7ms 显示一帧画面，从而达成 60帧/秒的动画。另外，还有 Web Animations API，将浏览器动画引擎向开发者打开，并由JavaScript进行操做。它是将来对网络上动画化的支持最有效的方式之一，它使浏览器能够进行本身的内部优化。可是兼容性较差。

微信小程序：微信小程序实现了本身的一套 WX Ainmation API，不兼容 web 标准。

2.3 CSS

CSS 动画都是声明式，使用 @keyframe 建立关键帧，浏览器就会自动计算出每 16.7ms 内的画面变化，这些计算不是用 JS ，从而避免 GC 。CSS 动画还有一个好处是能够利用 translateZ 开启 GPU 硬件加速，并且在 2020 年的当下，CSS 动画的兼容性能够说是很是好了。

有点遗憾的是 CSS 在路径动画 offset-path 上的兼容性仍是比较差。

微信小程序：微信小程序支持 CSS 动画。

选择

考虑到项目主要运行在 H5 和微信小程序平台上，综合兼容性和本身的熟练度，最后仍是选择用 CSS 动画。

3 CSS 动画的分类

按照 animation-timing-function（时间函数）的不一样，将 CSS 动画分红「线性变化动画」和「非线性变化动」:

「线性变化动画」是指 animation-timing-function = linear(直线) || cubic-bezier-timing-function(贝塞尔曲线)。
「非线性变化动画」是指 animation-timing-function = step-timing-function(分段)。

3.1 线性变化动画

推荐一个贝塞尔曲线的可视化网址：✿ cubic-bezier.com

3.2 非线性变化动画

非线性变化动画，一般用来作「帧动画」。一般是设计师输出一组序列帧图片做背景图，动画时控制 background-position 属性，并经过 step-timing-function 实现跃迁效果。

什么意思？我来举个小人走路的例子：

其实就两张图，分别是抬左脚和抬右脚（120 X 160），用工具将它们合成在一张图里（120 X 320）。

代码以下：

<div class="anim linear"></div>
<div class="anim steps"></div>
复制代码

.anim{
  width:120px;
  height:160px;
  background-image:url(./spirit.png); /* 合成图 */
  background-position:0 0;
  background-size:100% auto;
}

.liear{
  animation:anim-walk 0.4s linear 0s infinite;
}

.steps{
  animation:anim-walk 0.4s steps(1) 0s infinite;
}

@keyframes anim-walk{
  0% {background-position:0px 0px;}
  50% {background-position:0px -160px;}
  100% {background-position:0px 0px;}
}
复制代码

效果：

linear:	steps:

在 CSS 代码里，咱们定义了一个叫 anim-walk 的一组关键帧，关键帧 0% 时 background-position-y 是 0， 50% 时为 -160 ，100% 时又回到 0。从效果图里能够看出，不一样的 animation-timing-function 设置对动画效果的影响。

linear 由于是线性变化，因此 0 ～ -160 ～ 0 之间的数据计算出来就是 0 ～ -40 ～ -80 ～ -120 ～ -160 ～ -120 ～ -80 ～ -40 ～ 0
steps 由于是非线性变化，因此 0 ～ -160 ～ 0 之间的数据计算出来就是 0 ～ 0 ～ 0 ～ 0 ～ -160 ～ -160 ～ -160 ～ -160 ～ 0

3.3 路径动画( CSS 怎么作曲线路径动画？)

在京喜工厂项目里，小人是要在工厂的几个点内移动。

3.3.1 CSS offset-path

最简单的方法是用 offset-path，用法在张鑫旭的这篇文章写得很是详细了：offset-path-css-animation。

缺点是兼容性较差，这里就不详细说明了。

3.3.2 利用时间函数为贝塞尔曲线的反作用

在京喜工厂项目里小人移动的路径能够从下面这个设定图，标注的圆点都是要停留工做的。

能够肯定的是，这些标注的圆点位置在 CSS 动画里确定是一个关键帧，而圆点与圆点之间的直线路径还好办，那曲线呢？

这里我用到「CSS分层动画」和「时间函数为贝塞尔曲线的反作用」。简单来讲，就是经过使用两个或多个元素实现动画效果（分层），咱们能够更加细粒度地控制某个元素的路径，沿着 X 轴运动使用一种 timing-function ，沿着 Y 轴运动使用另外一种 timing-function 。

假设有 A[0,0]、B[100,100] 两点。从 A 移动到 B ，咱们能够分拆成 X 轴的变化量，和 Y 轴的变化量。直线移动时，就是 X 轴与 Y 轴的累计变化量是同样的：

<div class="anim-x">
  <div class="anim-y">
  </div>
</div>
复制代码

.anim-x{
  animation: anim-x 1000ms 0s linear infinite;
}
.anim-y{
  animation: anim-y 1000ms 0s linear infinite;
}
@keyframes anim-x {
  0%{ transform:translate3d(0 , 0 , 0) }
  100%{ transform:translate3d(100px , 0 , 0) }
}
@keyframes anim-y {
  0%{ transform:translate3d(0 , 0 , 0) }
  100%{ transform:translate3d(0 , 100px , 0) }
}
复制代码

反过来，若是 X轴与 Y轴的累计变化量不同，就会走出曲线：

<div class="anim-x">
  <div class="anim-y">
  </div>
</div>
复制代码

.anim-x{
  animation: anim-x 1000ms 0s ease-in infinite;
}
.anim-y{
  animation: anim-y 1000ms 0s ease-out infinite;
}
@keyframes anim-x {
  0%{ transform:translate3d(0 , 0 , 0) }
  100%{ transform:translate3d(100px , 0 , 0) }
}
@keyframes anim-y {
  0%{ transform:translate3d(0 , 0 , 0) }
  100%{ transform:translate3d(0 , 100px , 0) }
}
复制代码

这篇文章把原理写得很详细：CSS分层动画可让元素沿弧形路径运动

3.4 组合起来

路径动画的问题解决了，小人走路和工做的帧动画也准备好，下面还有两个小问题：

（1）小人走路和工做的帧动画不能同时出现。

（2）路径动画从左走到右时小人的朝向，应该与从右走到左时相反。

这里的解决方法也是「CSS分层动画」和「非线性动画」。

再加多一层转向动画，一层控制「小人走路帧动画」的动画、一层控制「小人工做帧动画」的动画，这三个控制动画都是「非线性动画」。

大概的代码能够这样写：

<div class="anim-turn">
  <div class="anim-walk"></div>
  <div class="anim-work"></div>
</div>
复制代码

.anim-turn{
  animation: anim-turn ${allTime}ms 0s steps(1) infinite;
}
.anim-walk{
  animation: anim-walk-opacity ${allTime}ms 0s steps(1) infinite,anim-walk 0.4s steps(1) 0s infinite;
}
.anim-work{
  animation: anim-work-opacity ${allTime}ms 0s steps(1) infinite,anim-working 0.4s steps(1) 0s infinite;
}

@keyframes anim-turn { // 转向动画
  0% {transform:scale(1,1)} // 正向
  50% {transform:scale(-1,1)} // 反向
  100% {transform:scale(1,1)} // 正向
}

@keyframes anim-walk-opacity { // 控制「小人走路帧动画」的动画
  0% {opacity:1}
  50% {opacity:0}
  100% {opacity:1}
}

@keyframes anim-work-opacity { // 控制「小人工做帧动画」的动画
  0% {opacity:0}
  50% {opacity:1}
  100% {opacity:0}
}
复制代码

再加上 X轴和 Y轴的分层 CSS：

<div class="anim-x">
  <div class="anim-y">
    <div class="anim-turn">
      <div class="anim-walk"></div>
      <div class="anim-work"></div>
    </div>
  </div>
</div>
复制代码

.anim-x{
  animation: anim-x ${allTime}ms 0s linear infinite;
}
.anim-y{
  animation: anim-y ${allTime}ms 0s linear infinite;
}
.anim-turn{
  animation: anim-turn ${allTime}ms 0s steps(1) infinite;
}
.anim-walk{
  animation: anim-walk-opacity ${allTime}ms 0s steps(1) infinite,anim-walk 0.4s steps(1) 0s infinite;
}
.anim-work{
  animation: anim-work-opacity ${allTime}ms 0s steps(1) infinite,anim-working 0.4s steps(1) 0s infinite;
}

@keyframes ...
复制代码

3.5 写个可视化工具，提高效率

上面只是简单的写了这个动画的简单架构，而具体的动画数据 @keyframes 才是重点，并且这些关键帧确定不是手写。

工欲善其事，必先利其器。

因此咱们来用 Vue 打造一个可视化工具[doge]。

大概长这样子：

基本操做是「添加关键帧」、「调整每一个关键帧的属性」、「生成测试动画」、「输出动画CSS」。

「添加关键帧」:

「调整每一个关键帧的属性」:

「生成测试动画-输出动画CSS」:

工具的具体实现略过，这里说一些关键细节：

（1）如何画出动画路径？

（2）动画时间怎么算？

3.6 画出动画路径

在路径动画里，每两个关键帧肯定了一段时间内元素的起点与终点，而时间函数着决定了这段时间内 X轴与 Y轴的变化量，咱们能够将这段时间平均分为 N 端，而后分别求出这 N 端时间终点时元素的位置，用直线连起来就能够获得一条近似的曲线。

举个例子:

<div class="anim-x">
  <div class="anim-y">
  </div>
</div>
复制代码

@keyframes anim-x {
  0%{ transform:translate3d(0 , 0 , 0); animation-timing-function:linear}
  100%{ transform:translate3d(300px , 0 , 0) }
}
@keyframes anim-y {
  0%{ transform:translate3d(0 , 0 , 0); animation-timing-function:cubic-bezier(0,.26,.74,1) }
  100%{ transform:translate3d(0 , 300px , 0) }
}
.anim-x{
  animation: anim-x 1000ms 0s;
}
.anim-y{
  animation: anim-y 1000ms 0s;
}
复制代码

在这个例子里，元素的 X轴从 0 ～ 300 ， animation-timing-function 是 linear, Y轴从 0 ～ 300， animation-timing-function 是 cubic-bezier(0,.26,.74,1)，而后将时间长度定义为 1，平均分为 100 段，使用 for 循环求出不一样进度时的 X 和 Y：

const moveTo = [0,0];
  const step = 100;
  const dX = 300;
  const dY = 300;
  const timeFunX = "linear";
  const timeFunY = "cubic-bezier(0,.26,.74,1)";
  if (Math.abs(dX) > 0 || Math.abs(dY) > 0) {
    ctx.moveTo(moveTo[0],moveTo[1]);
    for(let i = 0;i <= step;i ++) {
      const x = getTimeFunctionValue(timeFunX,i/step) * dX + moveTo[0]; // 求出 timeFunX(linear) 对应时间进度下的 x
      const y = getTimeFunctionValue(timeFunY,i/step) * dY + moveTo[1]; // 求出 timeFunY(cubic-bezier(0,.26,.74,1)) 对应时间进度下的 y
      ctx.fillRect(x, y, 1, 1);
      if (i % 10 === 0) {
        ctx.font = "16px serif";
        ctx.fillText(`(${x},${(y).toFixed(2)})`, x + 20, y + 20);
      }
    }
  }
复制代码

效果以下：

剩下就是这个 getTimeFunctionValue(时间函数,时间进度[0,1]) 应该怎么写？

首先要把 linear 和其余的贝塞尔曲线分开， linear 其实就是一条直线，时间进度输入任何值，都返回相同的值。

function getTimeFunctionValue(timeFunctionName = "linear",x = 0){
  ...
  if (timeFunctionName === "linear") return x;
  ...
}
复制代码

贝塞尔曲线呢？先来补习一下 CSS 动画里的贝塞尔曲线时间函数。

3.7 CSS 动画里的贝塞尔曲线时间函数

「贝塞尔曲线」是一种参数函数。计算机中应用比较普遍的是「三次贝塞尔曲线」。

P0、P一、P二、P3四个点在平面或在三维空间中定义了三次方贝塞尔曲线。曲线起始于P0走向P1，并从P2的方向来到P3。通常不会通过P1或P2；这两个点只是在那里提供方向信息。P0和P1之间的间距，决定了曲线在转而趋进P2以前，走向P1方向的“长度有多长”。

曲线的参数形式为：

CSS 动画里的贝塞尔曲线时间函数是一个简化版的「三次贝塞尔曲线」，P0 固定为 [0,0]， P3 固定为 [1,1]。

并且其直角坐标系是区别于几何坐标(x,y)，而是有其余意义的，横轴表明的是「时间进度（time）」，取值为[0% ~ 100%]。竖轴表明的是属性的「变化程度(progression)」，这个取值通常会在[0% ~ 100%]，能够小于0%，也能够大于100%。

因此这个简化版的 CSS 贝塞尔曲线能够用下面这两个方程表示(代入 P0[0,0] P3[1,1])：

T（时间进度） = ...

P（变化百分比） = ...

cubic-bezier(0,.26,.74,1) 里面的参数其实就是（P1_time,P1_progression,P2_time,P2_progression）。以下图所示：

取 cubic-bezier(0,.26,.74,1) 里面的参数（P1[0,0.26],P2[0.74,1]），代入上面的两个公式，获得下面的结果（方程）：

T（时间进度） = ...

P（变化百分比） = ...

第一条方程中的 T 就是时间进度，是入参，解出这条关于 t 的一元三次函数的根，代入第二条方程中，就能够求得 P。P 就是 T 「时间进度」下的「变化程度」。

注意：三次函数有3个根，可是只有实数并且在[0 ~ 1]之间的是正解。

3.8 动画里时间怎么算？

上面咱们用积分的方法将动画路径近似的画出来，就至关于咱们能够求出动画路径的长度的近似值。长度 / 速度 = 动画时间。其中速度能够自定义。

4 其余

4.1 解决层级不正确的问题（translateZ）

京喜工厂还有一个传送带动画，你们能够看看下图的最第一版本：

上面这张图，能够看到货物从左往右沿着传送带移动。最初左边看着还挺正常，可是到了右边会出现后方货物把前边货物盖压的现象。

缘由也很简单，由于这几个货物是并排的元素，后面的元素层级总会比前面的高。就像下面这样：

<div>
  <div>1</div>  <!-- 显示层级最低 -->
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>  <!-- 显示层级最高 -->
</div>
复制代码

但这个动画想表现的层级是中间高，两边低。

有些同窗可能会想到用 z-index ，惋惜 z-index 在 CSS 动画里是不起做用的。

正确的解决方案是用 translateZ 将其转换成 3D 显示，从而实现中间高，两边低的层级：

@keyframes anim-z{
  0% {transform: perspective(500px) translateZ(0);}
  50% {transform: perspective(500px) translateZ(50px);}
  100% {transform: perspective(500px) translateZ(0);}
}
复制代码

增长后的效果：

4.2 解决逐帧动画抖动问题

帧动画这里还有一个抖动的问题，看上面的 gif 能够发现小人有点抖动。这张 gif 是在 iPhone 6 Plus（手机屏幕像素是 414 px）上的显示效果。

问题是出在单位转换上：移动端的适配时，一般是用 rem ，小程序是用 rpx，他们在计算成 px 过程当中可能会出现取整的问题，从而形成帧动画抖动。

逐帧动画抖动的研究，看「凹凸实验室」的这篇文章就够了：《CSS技巧：逐帧动画抖动解决方案》

这篇文章提出了三个方案 A、B、C ，其中方案C是「终极解决方案」。惋惜的是，这个方案用到的是 SVG，而小程序是不支持 SVG 的。

退而求其次，我选择了方案 A ，就是用 CSS 的媒体查询来写断点，断点里都用 px 作单位。

/* 300 ~ 349 之间用 iphone5（320）的数据 */
@media screen and (min-width: 300px) and (max-width: 349px) {
    .m_worker_employee {
        width:51px;
        height: 68px
    }
    @keyframes anim-working {
        0% {
            background-position: 0px -204px
        }
        50% {
            background-position: 0px -272px
        }
        100% {
            background-position: 0px -204px
        }
    }
}
/* 350 ~ 399 之间用 iphone6（375）的数据 */
@media screen and (min-width: 350px) and (max-width: 399px) {
    .m_worker_employee {
        width:60px;
        height: 80px
    }
    @keyframes anim-working {
        0% {
            background-position: 0px -240px
        }
        50% {
            background-position: 0px -320px
        }
        100% {
            background-position: 0px -240px
        }
    }
}
/* 400 ~ 449 之间用 iphone6P（414）的数据 */
@media screen and (min-width: 400px) and (max-width: 449px) {
    .m_worker_employee {
        width:66px;
        height: 88px
    }
    @keyframes anim-working {
        0% {
            background-position: 0px -264px
        }
        50% {
            background-position: 0px -352px
        }
        100% {
            background-position: 0px -264px
        }
    }
}
复制代码

断点应用后，帧动画就不抖了。

最后总结一句：前端动画方案有不少种，可是要根据使用的环境选择最合适的；调试动画很繁琐，关键是要用合适的工具，没有就本身造一个。

5 公式相关

本文的公式是使用「TeX」软件，而后利用「MathJax」输出为 SVG ，在此推荐一下：www.mathjax.org/#demo

若是你以为这篇内容对你有价值，请点赞，并关注咱们的官网和咱们的微信公众号(WecTeam)，每周都有优质文章推送：