快捷導(dǎo)航

uniapp中使用lottie實(shí)現(xiàn)JSON動(dòng)畫的操作步驟

更新時(shí)間：2025年01月08日 08:33:12 作者：何嘉煙

這篇文章主要介紹了如何在項(xiàng)目中使用JSON動(dòng)畫組件,包括創(chuàng)建目錄結(jié)構(gòu)、下載JSON文件、編寫自定義組件代碼以及組件的使用方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

一、引入相關(guān)依賴

npm install lottie-web
# 如果有問題可以和我保持一致：npm install lottie-web@5.12.2

二、在項(xiàng)目的目錄新建目錄結(jié)構(gòu)

存放資源的目錄，用于存放JSON動(dòng)畫：/static/svgJson/*
用于存放動(dòng)畫組件的目錄：/components/SvgAnimation/*

三、操作步驟

在一些素材網(wǎng)站上下載我們需要的JSON素材，或者直接找UI給你

比如我們熟知的iconfon

下載后我們會(huì)得到一個(gè).json的文件，我們把它放在資源目錄下，比如：/static/svgJson/start.json

在存放動(dòng)畫組件中新增一個(gè)自定義組件，就比如：/components/SvgAnimation/start.vue

四、編寫自定義組件代碼

模板代碼如下：

<template>
  <view class="container-start">
    <view id="start"></view>
  </view>
</template>

<script module="renderScript" lang="renderjs">
import lottie from 'lottie-web'
import start from "../../static/svgJson/start.json";
export default {
    mounted() {
        this.ready()
    },
    methods: {
        ready() {
            lottie.loadAnimation({
                container: document.getElementById("start"),
                renderer: 'svg',
                loop: true,
                autoplay: true, 
                animationData: start 
            }); 
        }
    }
};
</script>

<style>
/* 這里可以自己定義相關(guān)的樣式，這里只是做個(gè)示范，具體按照界面而定 */
.container-start {
  width: 50%;
}
#start {
  width: 100%;
}
</style>

須知：代碼中的start可以替換成自己保存的JSON文件

打個(gè)比方就是：我下載了一個(gè)名字叫end.json文件，我就在/components/SvgAnimation目錄下新增一個(gè)end.vue

然后使用快捷鍵ctrl+h，然后將模板中的start單詞全部替換成end即可！

五、組件的使用

在頁面中引入組件直接使用即可：

import More from "../../components/SvgAnimation/more.vue"

# 在界面中使用：
<More></More>

提一嘴

由于比較懶，而且項(xiàng)目中使用的也不是太多，所以并沒有進(jìn)行封裝。

一方面由于使用了renderjs，封裝起來也不是一件短時(shí)間就能完成的事情，涉及到uniapp的視圖層和邏輯層的數(shù)據(jù)交互，更多的是沒有機(jī)會(huì)去深入研究。

另一方面也就是拿著模板代碼直接替換一個(gè)名稱也就是一會(huì)的事情。

如果有大佬有封裝的代碼那更好不過了！

更多

lottie-web常用方法

animation.play(); // 播放該動(dòng)畫，從目前停止的幀開始播放

animation.stop(); // 停止播放該動(dòng)畫，回到第0幀

animation.pause(); // 暫停該動(dòng)畫，在當(dāng)前幀停止并保持

animation.goToAndStop(value, isFrame); // 跳到某個(gè)時(shí)刻/幀并停止。isFrame(默認(rèn)false)指示value表示幀還是時(shí)間(毫秒)

animation.goToAndPlay(value, isFrame); // 跳到某個(gè)時(shí)刻/幀并進(jìn)行播放

animation.goToAndStop(30, true); // 跳轉(zhuǎn)到第30幀并停止

animation.goToAndPlay(300); // 跳轉(zhuǎn)到第300毫秒并播放

animation.playSegments(arr, forceFlag); // arr可以包含兩個(gè)數(shù)字或者兩個(gè)數(shù)字組成的數(shù)組，forceFlag表示是否立即強(qiáng)制播放該片段

animation.playSegments([10,20], false); // 播放完之前的片段，播放10-20幀

animation.playSegments([[0,5],[10,18]], true); // 直接播放0-5幀和10-18幀

animation.setSpeed(speed); // 設(shè)置播放速度，speed為1表示正常速度

animation.setDirection(direction); // 設(shè)置播放方向，1表示正向播放，-1表示反向播放

animation.destroy(); // 刪除該動(dòng)畫，移除相應(yīng)的元素標(biāo)簽等。在unmount的時(shí)候，需要調(diào)用該方法

添加點(diǎn)擊事件

<template>
  <view class="container">
    <view id="home"></view>
  </view>
</template>

<script module="renderScript" lang="renderjs">
import lottie from 'lottie-web'
import home from "../../static/svgJson/home.json";
export default {
    data(){
        return {
            animation: null
        }
    },
    mounted() {
        this.ready()
        this.addClickEvent()
    },
    methods: {
        ready() {
            this.animation = lottie.loadAnimation({
                container: document.getElementById("home"),
                renderer: 'svg',
                loop: false, //是否循環(huán)播放
                autoplay: true, //是否自動(dòng)播放
                animationData: home // 加載json的文件名
            }); // 加載
            this.animation.goToAndStop(55,true)
        },
        addClickEvent(){
            document.getElementById("home").addEventListener("click",()=>{
                this.animation.playSegments([10,65],true)
            })
        }
    },
    beforeDestroy() {
        document.getElementById("home").removeEventListener("click",()=>{})
    }
};
</script>

界面中給組件添加點(diǎn)擊事件：

<Home @click.native="clickSvg"></Home>

結(jié)尾：更多的操作由各位去發(fā)掘吧

總結(jié)

到此這篇關(guān)于uniapp中使用lottie實(shí)現(xiàn)JSON動(dòng)畫的文章就介紹到這了,更多相關(guān)uniapp用lottie實(shí)現(xiàn)JSON動(dòng)畫內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: