Lottie
1. Lottie 简介
Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案,设计师可以使用 Adobe After Effects 设计出漂亮的动画之后,使用 Lottie
提供的 Bodymovin 插件将设计好的动画导出成 JSON 格式,就可以直接运用在 iOS
、Android
、Web
和 React Native
之上,无需其他额外操作。
2. Lottie 优缺点
2.1 优点
- 职责分离,由设计师设计动画,前端负责控制动画的播放;
- 减少前端的工作量,手写一套前端动画往往需要考虑很多方面的因素,所以工作量大且耗时,但得出来的结果往往又不如人意。使用lottie可以几乎百分百还原设计师的动画效果且省时。
- 轻量级,相比以往的动画实现方式如PNG序列、GIF,lottie仅使用到一个json文件,因而文件体积要小得多。
- 动画效果及大小可控,传统的实现方式往往固定了宽高与速度,而lottie可以自定义这些参数。
2.2 缺点
- 有部分特效无法导出
- 部分复杂动画无法完美导出
3. Lottie 起步
本文以在vue环境下使用lottie为例,使用到的是vue-lottie
具体的其他技术栈还有:
3.1 安装依赖
npm install vue-lottie --save
3.2 简单使用
step1
首先在main.js全局注册vue-lottie的组件
// main.js
import lottie from "vue-lottie";
Vue.component("lottie", lottie);
**坑1:**本来以为在web上使用lottie是用lottie-web的,然后使用了官方的示例代码,出现了 Uncaught DOMException: Failed to read the ‘responseText’ property from ‘XMLHttpRequest’: The value is only accessible if the object’s ‘responseType’ is ‘’ or ‘text’ (was ‘json’).
的错误。而后才查到vue环境下要用vue-lottie才能更好兼容。
lottie.loadAnimation({
container: element, // the dom element that will contain the animation
renderer: 'svg',
loop: true,
autoplay: true,
path: 'data.json' // the path to the animation json
});
step2
在你要使用动画的页面,使用lottie组件
**options:**是原生lottie的配置对象,lottie.loadAnimation
的参数如下
- animationData: an Object with the exported animation data.
- path: the relative path to the animation object. (animationData and path are mutually exclusive)