Javascript动画插件lottie-web
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: this.options.animationData,//动画数据，这个必须要有 从options中接收
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: {
animationData: animationData,
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> 相关推荐
yangkang 2020-11-09
alien 2020-11-15
ChlatZed 2020-11-11
远远的山 2020-11-09
xysoul 2020-11-03
onepiecedn 2020-10-29
lnkToKing 2020-10-29
ChlatZed 2020-10-27
谢恩铭 2020-10-23
yuanye0 2020-10-15
liverlife 2020-10-10
somyjun 2020-09-29
xiaoying 2020-09-28
kunyus 2020-09-25
dusuanyun 2020-09-21
newisI 2020-09-01
afanti 2020-09-14