动画实现的种类
- CSS3 帧动画(通过css3 的一些属性,实现动画)
- js 原生动画 (通过JS方法控制DOM，从而实现动画效果)
- GIF (直接img可以解析动图的特效)
- Canvas/Svg ( js + canvas/svg 应该是目前前端实现复杂动效的最优方案)
- Lottie
- ...
Lottie一个适用于Web，Android，iOS，React Native和Windows 的移动库，它可以使用Bodymovin解析以json 格式导出的Adobe After Effects动画，并在移动设备上进行本地渲染！
安装 lottie-web
npm install lottie-web
Lottie-web 基本用法
const animation = lottie.loadAnimation({
container: document.getElementById('box'),
renderer: 'svg',// 渲染方式:svg、canvas
loop: true, //循环播放，默认：false
autoplay: true, //自动播放 ，默认true
path: ' ' // json 路径
})
<template>
<div class="loading-animate">
<div class='animate' id='circle'></div>
</div>
</template>
<script>
import lottie from 'lottie-web';
// 倒入json 文件
import loadingDate from 'assets/lottie/loading_data_01';
export default {
mounted() {
this.$nextTick(() => {
const params = {
container: document.getElementById('circle'),
renderer: 'svg',
loop: true,
autoplay: true,
animationData: loadingDate,
};
this.animation = lottie.loadAnimation(params);
});
},
destroyed() {
// 组件销毁
this.anim.destroy();
},
};
</script>
<style lang='scss'>
.loading-animate {
width:100%;
height:100%;
.animate{
width: 100px;
height: 100px;
margin: 0 auto;
}
}
</style>
Lottie-web 常用方法
animation.play(); // 播放，从当前帧开始播放
animation.stop(); // 停止，并回到第0帧
animation.pause(); // 暂停，并保持当前帧
animation.goToAndStop(value, isFrame); // 跳到某个时刻/帧并停止isFrame(默认false)指示value表示帧还是时间(毫秒)
animation.goToAndPlay(value, isFrame); // 跳到某个时刻/帧并进行播放
animation.goToAndStop(30, true); // 跳转到第30帧并停止
animation.goToAndPlay(300); // 跳转到第300毫秒并播放
animation.playSegments(arr, forceFlag); // arr可以包含两个数字或者两个数字组成的数组，forceFlag表示是否立即强制播放该片段
animation.playSegments([10,20], false); // 播放完之前的片段，播放10-20帧
animation.playSegments([[0,5],[10,18]], true); // 直接播放0-5帧和10-18帧
animation.setSpeed(speed); // 设置播放速度，speed为1表示正常速度
animation.setDirection(direction); // 设置播放方向，1表示正向播放，-1表示反向播放
animation.destroy(); // 删除该动画，移除相应的元素标签等。在unmount的时候，需要调用该方法
其它学习
API 介绍
loadAnimation 的参数
| 名称 | 描述 |
|---|---|
| container | 用于渲染的容器，一般使用一个 div 即可 |
| renderer | 渲染器，可以选择 'svg' / 'canvas' / 'html'，个人测试发现 svg 效果和兼容性最好 |
| name | 动画名称，用于 reference |
| loop | 循环 |
| autoplay | 自动播放 |
| path | json 路径，页面会通过一个 http 请求获取 json |
| animationData | json 动画数据，与 path 互斥，建议使用 path，因为 animationData 会将数据打包进来，会使得 js bundle 过大 |
实例化后API
| 名称 | 参数 | 描述 |
|---|---|---|
| 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 | 无 | 销毁 |
事件
- onComplete
- onLoopComplete
- onEnterFrame
- onSegmentStart you can also use addEventListener with the following events:
- complete
- loopComplete
- enterFrame
- segmentStart
- config_ready (when initial config is done)
- data_ready (when all parts of the animation have been loaded)
- DOMLoaded (when elements have been added to the DOM)
- destroy
