vue 使用原生canvas_【第2159期】使用Lottie 快速开发动画

前言

不知道大家现在开发精细化动画都采用什么方案？今日前端早读课文章由@京东用户体验设计部投稿分享。

@京东用户体验设计部-前端开发部现有前端开发人员 50 左右，主要为京东零售集团、京东健康提供 WEB 前端开发、APP RN开发，小程序开发、小游戏开发、H5开发等能力支持。

正文从这开始~~

背景

作为一个前端，所处理的任何功能都要直面客户，为了提高用户体验，经常会遇到一些微小动画交互。如下图：

这些微小的动画看似简单，但前端应该使用什么方法来实现呢？

前端常见动画处理方式

如果只是一个背景展示，设计输出如下的雪碧图，然后前端合理的使用 Animation可以实现很多神奇效果。在这里再次感叹一下 Css3 带来的神奇之处。

但是这种效果会导致放大失帧，图片加载过慢，甚至不方便一些稍微复杂的动画处理。

Gif 图简单粗暴，但是 Gif 图是位图，不方便控制动画，放大会虚。

Js + Canvas/svg。无论是 Js 操作 Dom 还是用 Svg API 来实现。都算是比较良好的方案，但是成本较高。

所以，这里我们重磅推荐 Lottie 。

Lottie 介绍

Lottie 是一个跨平台的动画库。设计小姐姐使用 AE 制作并导出的动画文件( json 格式)，Lottie 可以在各个终端快速解析这个 json 文件，从而还原动画，简单快速。

那么，接下来，我们将使用 Lottie 来完成一个动画的制作。

开始开发

第一步 构建 json 文件

Lottie 可以友好的应用于前端的各种框架(原生，VUE，React , Angular)，下面是我们今天要完成的一个动画。首先看一下效果图。

这是一个开奖的动画。我们希望用户在操作之后展示这样的交互。今天我们使用 vue-lottie 来完成我们的表演。

首先我们把设计好的动画转换成 json 文件。转换的过程大概就是在 AE 下制作完成动画，然后安装 bodymovin 插件(管理员权限)。接下来在 AE 中使用点击 窗口--->扩展--> bodymovin 出现弹窗，点击 RENDER 即可生成我们需要的 json 文件。

第二步 引入所需要的资源

我们在构建好的 VUE 项目中导入上一步做好的 json 文件。具体的目录我推荐存放在 src/asset/lottie，如图

这是一个构建好的 json 文件 。

{

"v": "5.5.7", // bodymovin 版本

"meta":{} //一些动画版本信息

"fr": 12, // 帧率

"ip": 0, // 起始关键帧

"op": 88, // 结束关键帧

"w": 4000, // 视图宽

"h": 4000, // 视图高

"nm": "Comp 1", // 名称

"ddd": 0, // 3d

"assets": [], // 资源集合

"layers": [], // 图层集合

"masker": [] // 蒙层集合

}

上面给出了 json 文件中各个参数的含义。其中 ip 表示关键帧，一般为0，op 表示动画的结束关键帧，fr表示帧率，所以动画时间等于： (op-ip)/fr 。w和h分别表示视图的宽和高。

由于 assets、layers、masker 里面的数据可能很大，所以上面用空数组代替。其中 layers 是一个图层集合，它里面数据一般很大，里面包含了当前动画的所有图层数据，assets 是一个资源集合，它里面包含了当前动画使用的资源图层数据。masks 则表示蒙层集合，里面包含了所有的蒙层数据。 Lottie 其实就是操作图层 layer 的偏移缩放来实现动画的，具体原理我们以后再详解。

接下来我们就可以再项目中引入 vue-lottie 了。简单的操作 npm install --save vue-lottie 即可完成。

第三步 实现动画

接下来我们就在项目中使用 vue-lottie 。即 可以将其设置为全局组件，也可以在需要使用的时候单独引入。

第一种：全局引入,在 main.js 中加入如下代码

import lottie from 'vue-lottie'

Vue.component('lottie',lottie)

第二种：局部引入

在 vue 文件中引用 vue-lottie ,然后在组件中进行注册

import lottie from 'vue-lottie'

export default{

...

components:{

'lottie':lottie

}

...

}

接下来，在实现动画的页面引入我们第二步设置好的 json 文件。