背景

「医生大会 2020 回顾」设计师动画实现比较炫酷

使用 Lottie 实现动画 - 图1

这造成了「设计师日益增长的炫酷视觉效果需要」与「落后的前端工程师动画能力」之间的矛盾

我们来看一看 2019 年负责这个 case 的前端工程师是怎么处理这个矛盾的

使用 web 标准限制设计师能力的发挥，让其只能在 rotate、translate、opacity 等效果中自由组合

于是就有了这样的代码

  1. // 旋转效果
  2. @keyframes rotating {
  3.   from {
  4.     transform: rotate(0);
  5.   }
  6.   to {
  7.     transform: rotate(360deg);
  8.   }
  9. }
  11. // 打字效果
  12. @keyframes typing {
  13.   from {
  14.     width: 0;
  15.   }
  16. }
  18. // 从上往下渐显
  19. @keyframes showdown {
  20.   0% {
  21.     transform: translateY(-10px);
  22.     opacity: 0;
  23.   }
  24.   100% {
  25.     transform: translateY(0);
  26.     opacity: 1;
  27.   }
  28. }
  30. // 从下往上渐显
  31. @keyframes showup {
  32.   0% {
  33.     transform: translateY(10px);
  34.     opacity: 0;
  35.   }
  36.   100% {
  37.     transform: translateY(0);
  38.     opacity: 1;
  39.   }
  40. }

如何用较低的技术成本实现炫酷的动画？Lottie 就是一个不错的方案

lottie 是什么

直接看 lottie 的官方介绍

使用 Lottie 实现动画 - 图2

使用 Lottie 实现动画 - 图3

从中摘录一些关键词

  • 设计师在设计工具(这里特指了 Adobe After Effects 通俗来讲叫 AE)中使用一个叫 Bodymovin 的插件导出 json 文件
  • 工程师在客户端(可以跨平台)上使用 Lottie 解析 json，并且渲染动画

如何使用

在 vue 项目中可以直接使用 vue-lottie 这个包，使用非常简单易懂

  1. <template>
  2.   <div>
  3.     <lottie class="lottie-container" :options="animationOptions" :width="200" :height="200" />
  4.   </div>
  5. </template>
  7. <script>
  8. import animation_json from 'xxx/animation.json';
  9. import lottie from 'vue-lottie';
  11. export default {
  12.   components: {
  13.     lottie,
  14.   },
  15.   data() {
  16.     return {
  17.       animationOptions: {
  18.         animationData: animation_json,
  19.         loop: true,
  20.         autoplay: true
  21.       }
  22.     }
  23.   }
  24. }
  25. </script>
  27. <style lang="scss" scoped>
  28. .lottie-container {
  29.   position: absolute;
  30.   right: 0;
  31.   top: 0;
  32. }
  33. </style>

注意事项

1.组件需要给定宽高属性，每一个动画都可以理解为是在一个矩形区域内出现的，在做动画定位的时候根据这个矩形区域来即可(设计师会在设计稿上标注动画区域的定位)

使用 Lottie 实现动画 - 图4

比如说这个动画贴着右下角，直接通过 CSS 定位到页面右下角，同时我们的页面背景图片采用 background-position: bottom 的定位策略，确保动画与背景的底部能够合得上

2.整个容器是一个块级元素，可以在通过 CSS 控制样式

3.图片的路径会是一个比较难解决的问题

设计师的一个动画会提供以下素材

使用 Lottie 实现动画 - 图5

  • 动画的 json 文件
  • 能够运行的 web demo
  • 图片素材

这是设计师提供的 JSON 文件

使用 Lottie 实现动画 - 图6

直接使用这个路径，通常会有问题，提供一个思路，将图片上传后，路径改为绝对路径即可

使用 Lottie 实现动画 - 图7

4.一个页面同时可能有多个动画，目前的拆分/合并思路是是否可以一起定位，如果能够一起定位，就做成一个，不能就拆分成多个

使用 Lottie 实现动画 - 图8

比如这个动画，左下角与右下角的动画需要拆分，分别依据左下角和右下角定位，否则在宽屏的机器上就会有问题

5.虽说 Lottie 解放了设计师的想象力，但同样也有限制，需要设计师遵循 Lottie 的设计规范，不然导出的动画会有各种各样的问题

6.跑通 Lottie 流程需要与设计师共同探索，反复沟通，这与之前的设计协作流畅有差异

7.从实际的视觉效果来看，在大部分性能较为强悍的机器上肉眼可见的高帧率，清晰，但在一些年代较为久远的机器上会有卡顿现象出现

本次 Lottie 的使用仅仅是一个从 0 到 1 的尝试，调研途中参考了非常多的优质资料，推荐想深入了解的同学们阅读：

参考