从设计师和开发的角度使用 lottie

时间 2019-11-09

标签设计师开发角度使用 lottie 繁體版

原文原文链接

简介

lottie 是一个能够轻易的给各类 native app 添加高质量动画的类库。能够在 iOS、Android 和 React Native 实时渲染 After Effects 动画，就像使用静态图片同样容易。上图即为 lottie 的 logo。javascript

简单的说，lottie 动画制做的流程是，经过 Bodymovin 扩展将 AE 动画导出为 json 数据，而后再将这个 json 渲染在客户端或者 web 端。以下图：html

官网宣传了3个特性：前端

灵活使用AE的特性
为所欲为控制你的动画
很小的文件体积

我的认为 lottie 最大的优点就是能够将设计师设计的动图原本来本的在页面上展示出来，完美还原了动画的精细度，而且对动画拥有足够的控制能力。目前全部使用 gif 或 apng 的场景应该均可以使用 lottie，固然 lottie 不局限与此场景。vue

本文主要从设计师视角和开发者视角讲述 lottie-web 的原理和使用以及 lottie 在 weex/rax 中的使用。java

Demogit

设计师视角

准备

在 AE 中为 lottie 创做动画，你须要如下准备github

Adobe After Effects
Bodymovin AE 插件
Lottiefiles preview app (集成了 lottie sdk 的 app)

安装 Bodymovin 插件的流程以下：web

关闭 AE
安装 ZXP installer。 ZXP Installer 就是专门用来安装 Adobe 公司的软件产品的插件的工具。
下载最新的 bodymovin 扩展。 github.com/airbnb/lott…
打开 ZXP installer 并把 bodymovin 扩展拖拽进来
打开 AE，在菜单 Window > Extensions 中，你会看到安装好的扩展

安装插件详见 airbnb.io/lottie/afte…express

从 Sketch/SVG/Illustrator 到 Lottie 的工做流

下面讲讲如何从 Sketch 开始，制做一个 lottie 动画文件。若是你使用 svg 图片，跳到步骤3。若是你使用 AI，跳到步骤4。须要准备好 Sketch，AI，AE，并安装好 Bodymovin 插件。下面开始：npm

在 sketch 中确保要导出的内容已经群组为一个 group
将这个 group 导出为 svg
在 AI 中打开 svg，并转存为 .ai 文件
将 .ai 文件导入到 AE 中
在 AE 中建立组件，设置动画持续时间和帧率
将 ai 文件转为 shape layers。在组件中选中你的图层，菜单 Layer 中选择 Create shapes from vector layer
添加你想要的任何动画，这一部分是你主要工做的步骤
使用 Bodymovin 导出为 json 菜单中选择 Window > Extensions > Bodymovin
测试动画。确保动画中没有不支持的特性，而后能够拖拽到 lottieFiles 中查看效果。固然也能够上传到 lottieFiles 里，而后使用 lottie preview app 扫码查看。这时你就能够将动画交付给开发同窗啦！

更多细节可查看官方文档 Sketch/SVG/Illustrator to Lottie workflow

注意事项&优化建议

*AE 特性大部分已经支持，具体能够查看 Supported Features（支持列表），设计师应该避免使用不支持 AE 的特性。

目前开看，支持较好的属性有：

Shapes
Fills
Strokes
Transforms
Interpolation

不彻底支持的属性分类有：

Masks
Mattes
Merge Paths
Layer Effects
Text

*设计过程当中的优化建议和注意事项 General tips & guidelines

尽可能保持简单小巧在相同的图层上复制相同的关键帧会增长额外的代码，只有在必要时才使用路径关键帧动画。
导出 1x 图
No expressions or effects Lottie 还不支持 expressions 或 effects 菜单中的任何 effects
Matte and mask 尺寸问题使用半透明遮罩会影响性能。若是必须使用遮罩，请覆盖最小的区域。
不支持 Blending modes 或 Luma mattes
不支持图层样式图层效果不支持drop shadow, color overlay 或 stroke
全屏动画，导出比最大屏幕宽度更宽一点的图像，在 Android 和 iOS 上能够分别裁切

开发者视角

使用

首先固然是看开发文档。这里我简单说说其中 lottie-web 的使用。

能够经过 script 标签

<script src="https://cdnjs.com/libraries/bodymovin" type="text/javascript"></script>
复制代码

或 npm 包 lottie-web 引用

npm i -S lottie-web
复制代码

import lottie from 'lottie-web'
复制代码

调用 loadAnimation()

const myLottie = lottie.loadAnimation({
  container: document.querySelector('.img-area'),
  renderer: 'svg',
  name: 'myLottieAnim',
  loop: true,
  autoplay: true,
  path: './assets/cycle_animation.json',
})
复制代码

参数/api/事件

loadAnimation 的参数

名称	描述
container	用于渲染的容器，通常使用一个 div 便可
renderer	渲染器，能够选择 'svg' / 'canvas' / 'html'，我的测试发现 svg 效果和兼容性最好
name	动画名称，用于 reference
loop	循环
autoplay	自动播放
path	json 路径，页面会经过一个 http 请求获取 json
animationData	json 动画数据，与 path 互斥，建议使用 path，由于 animationData 会将数据打包进来，会使得 js bundle 过大

获取到 lottie 实例后，能够调用 api 控制动画，例如上述代码中可使用

myLottie.pause()
复制代码

名称	参数	描述
stop	无	中止动画
play	无	播放动画
pause	无	暂停
setSpeed	Number	设置播放速度，1 表示1倍速度，0.5 表示 0.5倍速度
setDirection	Number	正反向播放，1 表示正向，-1 表示反向
goToAndStop	Number, [Boolean]	跳到某一帧或某一秒中止，第二个参数 iFrame 为是否基于帧模式仍是时间，默认为 false
goToAndPlay	Number, [Boolean]	跳到某一帧或某一秒开始，第二个参数 iFrame 为是否基于帧模式仍是时间，默认为 false
playSegments	Array, [Boolean]	播放片断，参数1为数组，两个元素为开始帧和结束帧；参数2为，是否当即播放片断，仍是等以前的动画播放完成
destroy	无	销毁

优化建议

使用压缩混淆过的 js，毕竟目前 lottie-web 仍是有点大，gzip 后大概 57k
尽可能使用简单小巧的 json，其实也是须要在 AE 中作一些优化，这须要前端和设计一块儿配合完成，例如
- 避免使用很大的形状，可是用很小的 mask 切出来
- 太多的节点也会影响性能

weex/rax 中使用 lottie

weex/rax 已经提供了 lottie 组件，因为是内部文档，暂不放连接

api 支持没有 airbnb 官方完整，投入生产环境时还须要严格测试一下

vue-weex demo

rax demo 以下

小结

在我看来，追求更精细完美的动画体验一直是设计师和前端开发的使命。lottie 的出现能够替代传统的 gif，而且提供的 api 能够更好的控制动画。lottie 可能不适合用于过于复杂的大场景动画，可是局部的小动画，再适合不过了。

lottie 应该是一个发展趋势，甚至将来浏览器说不定就原生直接支持了这种 json 动画，设计和开发之间的壁垒也会愈来愈小。