lottie可以將一個json數據渲染成一個動畫，而且支持多平台，在不同的平台下使用同一個json文件即可實現相同的效果，非常的方便。這里介紹前端的使用方法。
https://github.com/airbnb/lottie-web
1.配合vue-cli使用
- 1.npm安裝lottie-web
npm install lottie-web
- 2.創建loading.vue
2.1引入lottie插件和需要的json數據
2.2接收父組件傳入的配置參數
2.3在頁面渲染完畢后進行初始化
<template>
<!-- 為容器綁定樣式 -->
<div :style="style" ref="lavContainer"></div>
</template>
<script>
//引入lottie
import lottie from 'lottie-web'
//引入json數據
import animationData from '../../static/bitcoin.json'
export default {
props: { //接收父元素傳入的參數
options: {
type: Object,
required: true
},
height: Number,
width: Number
},
data() {
return {
style: { //設置容器的樣式
width: this.width ? `${this.width}px` : '40%', //如果父元素有傳參則使用傳參的值，沒有則=40%
height: this.height ? `${this.height}px` : '100%',//如果父元素有傳參則使用傳參的值，沒有則=100%
overflow: 'hidden',//超出容器隱藏
margin: '0 auto' //水平居中
}
}
},
mounted() {
lottie.loadAnimation({ //初始化
container: this.$refs.lavContainer,//在哪個dom容器中生效
renderer: 'svg',//渲染方式svg
loop: this.options.loop !== false,//是否循環 如果傳入的參數options.loop不為false 則一直循環 即默認循環
autoplay: this.options.autoplay !== false,//是否自動播放 如果傳入的參數options.autoplay不為false 則自動播放 即默認自動播放
animationData: animationData,//動畫數據，這個必須要有
rendererSettings: this.options.rendererSettings
})
}
}
</script>
- 3.父組件引用loadding.vue
可以為loadding組件設定一個容器，通過空中這個容器的display屬性來控制loadding組件的顯示和隱藏
<template>
<div class="test_wrap">
<div v-show="show">
<loadding :options="defaultOptions" />
</show>
</div>
</template>
<script>
//引入子組件
import loadding from '@/components/loadding'
export default {
data () {
return {
show:false,
defaultOptions: {
autoplay: true,//自動播放
loop: true,//循環播放
},
}
},
components: {
'loadding': loadding
}
}
</script>
2.在HTML頁面中使用
- 1.引入lottie-web這個插件 可以使用cdn，也可以引入本地的
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.6.8/lottie_svg.min.js"></script>
- 2.頁面加載完畢后，初始化，並傳入相應的配置項
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.6.8/lottie_svg.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<div class="box"></div>
</body>
</html>
<script>
$(function(){
//getJSON() 方法使用 AJAX 的 HTTP GET 請求獲取 JSON 數據
$.getJSON("./betcoin.json",function(result){
//獲取到數據后進行初始化
console.log(result)
lottie.loadAnimation({ //初始化
container: document.querySelector('.box'),//在哪個dom容器中生效
renderer: 'svg',//渲染方式svg
loop: true,//循環
autoplay: true,//自動播放
animationData: result,//動畫數據
})
})
})
</script>
注意：json數據使用了ajax進行獲取，要留意跨域問題。
為了避免跨域或者本地讀取時的權限問題，可以講json文件的數據用 反引號 `` 包裹起來，用一個全局變量保存，然后保存為betcoin2.js，即可使用這個數據了，記得用JSON.parse()將json字符串轉換回對象格式
//betcoin2.js
var animationData = `省略，里面為原json對象`
<script src="./betcoin2.js"></script>
<script>
window.onload = function(){
lottie.loadAnimation({ //初始化
container: document.querySelector('.box'),//在哪個dom容器中生效
renderer: 'svg',//渲染方式svg
loop: true,//循環
autoplay: true,//自動播放
animationData: JSON.parse(animationData),//動畫數據
})
}
</script>