前端实现lottie案例
经博延
Lottie简介
Lottie 是Airbnb开源的一个面向 iOS、Android、React Native 的动画库，能分析 Adobe After Effects 导出的动画，并且能让原生 App 像使用静态素材一样使用这些动画，完美实现动画效果。
相关链接
第一种:lottie-web
第二种:vue-lottie
一、lottie-web的使用
1.原生html写法源码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style>
</style>
<body>
<div id="app">
<div id="lottie_box"></div>
<button @click="startFun">播放</button>
<button @click="suspendFun">暂停</button>
</div>
</body>
<!-- 引入本地的vue -->
<script src="./js/vue.js"></script>
<!-- 也可以引入线上vue 官网有安装教程-->
<!-- https://cn.vuejs.org/v2/guide/installation.html -->
<!-- 下面引入 lottie的插件-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.9.4/lottie.min.js"
integrity="sha512-ilxj730331yM7NbrJAICVJcRmPFErDqQhXJcn+PLbkXdE031JJbcK87Wt4VbAK+YY6/67L+N8p7KdzGoaRjsTg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
var app = new Vue({
el: '#app',
data: {
lottie: {},
},
mounted() {
this.lottie = lottie.loadAnimation({
container: document.getElementById('lottie_box'), // 需要绑定的div
renderer: 'svg', // 渲染方式:svg：支持交互、不会失帧、canvas、html：支持3D，支持交互
loop: true, // 循环播放，默认：true
autoplay: true, // 自动播放 ，默认true
path: 'https://uploads-ssl.webflow.com/624181072db315237608dddf/62442d1d0099b981e929e0e5_black%20squares.json' // 现在用的线上json 路径(或者自己有json动画文件修改自己本地路径)
})
},
methods: {
startFun: function () {
this.lottie.play() // 点击播放
},
suspendFun: function () {
this.lottie.pause(); // 点击暂停播放
},
},
watch: {}
})
</script>
</html>
2.vue写法写法源码如下
(1)首先安装lottie-web插件
npm install lottie-web
(2)源码如下
<template>
<div class="box">
<div id="lottie_box"></div>
<button @click="startFun">播放</button>
<button @click="suspendFun">暂停</button>
</div>
</template>
<script>
import lottie from 'lottie-web';
export default {
name: 'Lottie',
data () {
return {
lottie: {},
}
},
mounted () {
this.lottie = lottie.loadAnimation({
container: document.getElementById('lottie_box'), // 需要绑定的div
renderer: 'svg', // 渲染方式:svg：支持交互、不会失帧、canvas、html：支持3D，支持交互
loop: true, // 循环播放，默认：true
autoplay: true, // 自动播放 ，默认true
path: 'https://uploads-ssl.webflow.com/624181072db315237608dddf/62442d1d0099b981e929e0e5_black%20squares.json' // 现在用的线上json 路径(或者自己有json动画文件修改自己本地路径)
})
},
methods: {
suspendFun: function () {
this.lottie.pause();
},
startFun: function () {
this.lottie.play()
}
},
}
</script>
<style>
.box {
width: 100%;
height: 100%;
}
#bm {
width: 100%;
height: 100%;
margin: 0px auto;
}
</style>
二、vue-lottie的使用
1.原生html写法和lottie-web写法一样，插件换一下就行
2.vue写法写法源码如下
(1)首先安装vue-lottie插件
npm install --save vue-lottie
(2)在main.js全局挂载一下
import lottie from 'vue-lottie';
Vue.component('lottie', lottie)
(3)代码如下和lottie-web一样
<template>
<div class="box">
<div id="lottie_box"></div>
<button @click="startFun">播放</button>
<button @click="suspendFun">暂停</button>
</div>
</template>
<script>
import lottie from 'lottie-web';
export default {
name: 'Lottie',
data () {
return {
lottie: {},
}
},
mounted () {
this.lottie = lottie.loadAnimation({
container: document.getElementById('lottie_box'), // 需要绑定的div
renderer: 'svg', // 渲染方式:svg：支持交互、不会失帧、canvas、html：支持3D，支持交互
loop: true, // 循环播放，默认：true
autoplay: true, // 自动播放 ，默认true
path: 'https://uploads-ssl.webflow.com/624181072db315237608dddf/62442d1d0099b981e929e0e5_black%20squares.json' // json 路径
})
},
methods: {
suspendFun: function () {
this.lottie.pause();
},
startFun: function () {
this.lottie.play()
}
},
}
</script>
<style>
.box {
width: 100%;
height: 100%;
}
#bm {
width: 100%;
height: 100%;
margin: 0px auto;
}
</style>
三、其他常用配置及API
1.常用属性如下
下面列一些常用的配置属性，更多配置项请看：https://github.com/airbnb/lottie-web
- animationData: 动画 json
- path: 可直接指定动画 json // 路径
- loop: true / false / number //循环
- autoplay: true / false // 自动播放
- name: // 给动画取名字,方便方法调用
- renderer: ‘svg’ / ‘canvas’ / ‘html’ //渲染方式
- container: the dom element on which to render the animation // 可直接指定
dom 节点渲染
2.常用方法如下
- animation.play() 播放，从当前帧开始播放
- animation.stop() 停止，并回到第0帧
- animation.pause()暂停，并保持当前帧
- animation.setSpeed(speed) – 播放速度 ，1 为正常速度。
- animation.goToAndStop(value, isFrame)
跳转到某一时间（或帧）并停在那。第一个参数(value)是数值。第二个参数是布尔值，"true"则第一个参数表示“帧”，“false”则表示“时间”。 - animation.goToAndPlay(value, isFrame)
跳转到某一时间（或帧）并播放。第一个参数(value)是数值。第二个参数是布尔值，"true"则第一个参数表示“帧”，“false”则表示“时间”。
animation.goToAndStop(30, true) // 跳转到第30帧并停止
animation.goToAndPlay(300) // 跳转到第300毫秒并播放
- animation.setDirection(direction)** 设置播放方向，1表示正向播放，-1表示反向播放
- animation.playSegments(segments, forceFlag) –
以帧为单位，播放指定段落。第一个参数是一个数组，形式为[(a,b),(c,d),(e,f)…]则播放第a帧到b帧，然后第c帧到d帧，e到f……
，第二个参数为布尔值，“true”则立刻播放参数一中的片段，“false”则播放完当前动画后再开始播放片段。
animation.playSegments([10,20], false) // 播放完之前的片段，播放10-20帧
animation.playSegments([[0,5],[10,18]], true) // 直接播放0-5帧和10-18帧
- animation.destroy() 删除该动画，移除相应的元素标签等
3.监听事件：
- complete: 播放完成后触发（循环播放下不会触发）
- loopComplete: 当前循环下播放（循环播放/非循环播放）结束时触发
- onEnterFrame: 播放一帧动画的时候触发
- enterFrame: 每进入一帧就会触发，播放时每一帧都会触发一次，stop方法也会触发
- data_ready:动画json文件加载完毕触发
animation.addEventListener('data_ready', () => { console.log('(111)'); });
- destroy: 将在动画删除时触发
- onSegmentStart: 开始播放一个动画片段的时候触发
- config_ready：完成初始配置后
- data_failed：当无法加载动画的一部分时
- loaded_images：当所有图像加载成功或错误时
- DOMLoaded：将元素添加到DOM时
感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！
类似资料：