Javascript動畫插件lottie-web的使用方法

更新時間：2022年02月14日 17:10:09 作者：---空白---

這篇文章主要介紹了Javascript動畫插件lottie-web的使用方法，包括配合vue-cli使用及在HTML頁面中使用代碼，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

lottie可以將一個json數(shù)據(jù)渲染成一個動畫，而且支持多平臺，在不同的平臺下使用同一個json文件即可實現(xiàn)相同的效果，非常的方便。這里介紹前端的使用方法。
https://github.com/airbnb/lottie-web

1.配合vue-cli使用

1.npm安裝lottie-web

npm install lottie-web

2.創(chuàng)建loading.vue
2.1引入lottie插件和需要的json數(shù)據(jù)
2.2接收父組件傳入的配置參數(shù)
2.3在頁面渲染完畢后進行初始化

<template>
    <!-- 為容器綁定樣式 -->
    <div :style="style" ref="lavContainer"></div>
</template>

<script>
//引入lottie
import lottie from 'lottie-web'
//引入json數(shù)據(jù)
import animationData from '../../static/bitcoin.json'

export default {
    props: { //接收父元素傳入的參數(shù)
      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,//是否循環(huán) 如果傳入的參數(shù)options.loop不為false 則一直循環(huán) 即默認循環(huán)
        autoplay: this.options.autoplay !== false,//是否自動播放  如果傳入的參數(shù)options.autoplay不為false 則自動播放 即默認自動播放
        animationData: animationData,//動畫數(shù)據(jù)，這個必須要有
        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,//循環(huán)播放
　　　　　　 },
        }
    },
    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 數(shù)據(jù)
        $.getJSON("./betcoin.json",function(result){
            //獲取到數(shù)據(jù)后進行初始化
            console.log(result)
            lottie.loadAnimation({ //初始化
                container: document.querySelector('.box'),//在哪個dom容器中生效
                renderer: 'svg',//渲染方式svg
                loop: true,//循環(huán)
                autoplay: true,//自動播放
                animationData: result,//動畫數(shù)據(jù)
            })
		})
    })
</script>

注意：json數(shù)據(jù)使用了ajax進行獲取，要留意跨域問題。

為了避免跨域或者本地讀取時的權(quán)限問題，可以講json文件的數(shù)據(jù)用反引號 `` 包裹起來，用一個全局變量保存，然后保存為betcoin2.js，即可使用這個數(shù)據(jù)了，記得用JSON.parse()將json字符串轉(zhuǎn)換回對象格式

//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,//循環(huán)
            autoplay: true,//自動播放
            animationData: JSON.parse(animationData),//動畫數(shù)據(jù)
        })
    }
</script>

到此這篇關于Javascript動畫插件lottie-web的使用方法的文章就介紹到這了,更多相關Javascript動畫插件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: