uniapp中使用lottie實現(xiàn)JSON動畫的操作步驟
一、引入相關(guān)依賴
npm install lottie-web # 如果有問題可以和我保持一致：npm install lottie-web@5.12.2
二、在項目的目錄新建目錄結(jié)構(gòu)
- 存放資源的目錄，用于存放JSON動畫：
/static/svgJson/* - 用于存放動畫組件的目錄：
/components/SvgAnimation/*
三、操作步驟
在一些素材網(wǎng)站上下載我們需要的JSON素材，或者直接找UI給你
比如我們熟知的iconfon
下載后我們會得到一個.json的文件，我們把它放在資源目錄下，比如：/static/svgJson/start.json
在存放動畫組件中新增一個自定義組件，就比如：/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)的樣式，這里只是做個示范，具體按照界面而定 */
.container-start {
width: 50%;
}
#start {
width: 100%;
}
</style>
須知：代碼中的start可以替換成自己保存的JSON文件
打個比方就是：我下載了一個名字叫end.json文件，我就在
/components/SvgAnimation目錄下新增一個end.vue然后使用快捷鍵ctrl+h，然后將模板中的start單詞全部替換成
end即可！
五、組件的使用
在頁面中引入組件直接使用即可：
import More from "../../components/SvgAnimation/more.vue" # 在界面中使用： <More></More>
提一嘴
由于比較懶，而且項目中使用的也不是太多，所以并沒有進行封裝。
一方面由于使用了renderjs，封裝起來也不是一件短時間就能完成的事情，涉及到uniapp的視圖層和邏輯層的數(shù)據(jù)交互，更多的是沒有機會去深入研究。
另一方面也就是拿著模板代碼直接替換一個名稱也就是一會的事情。
如果有大佬有封裝的代碼那更好不過了！
更多
lottie-web常用方法
animation.play(); // 播放該動畫，從目前停止的幀開始播放
animation.stop(); // 停止播放該動畫，回到第0幀
animation.pause(); // 暫停該動畫，在當(dāng)前幀停止并保持
animation.goToAndStop(value, isFrame); // 跳到某個時刻/幀并停止。isFrame(默認false)指示value表示幀還是時間(毫秒)
animation.goToAndPlay(value, isFrame); // 跳到某個時刻/幀并進行播放
animation.goToAndStop(30, true); // 跳轉(zhuǎn)到第30幀并停止
animation.goToAndPlay(300); // 跳轉(zhuǎn)到第300毫秒并播放
animation.playSegments(arr, forceFlag); // arr可以包含兩個數(shù)字或者兩個數(shù)字組成的數(shù)組，forceFlag表示是否立即強制播放該片段
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(); // 刪除該動畫，移除相應(yīng)的元素標簽等。在unmount的時候，需要調(diào)用該方法
添加點擊事件
<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, //是否自動播放
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>
界面中給組件添加點擊事件：
<Home @click.native="clickSvg"></Home>
結(jié)尾：更多的操作由各位去發(fā)掘吧
總結(jié)
到此這篇關(guān)于uniapp中使用lottie實現(xiàn)JSON動畫的文章就介紹到這了,更多相關(guān)uniapp用lottie實現(xiàn)JSON動畫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了手寫一個vite插件教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
彈窗是一個項目必備的復(fù)用利器，這篇文章主要介紹了vue彈窗組件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-04-04
這篇文章主要介紹了Vue3請求攔截器里如何配置token,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了vue 踩不完的異步之坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
在Vue中,背景圖跨頁面顯示問題可通過生命周期鉤子（如mounted和beforeDestroy）實現(xiàn)動態(tài)控制,確保僅在主頁加載背景圖,登錄頁等其他頁面可移除,從而實現(xiàn)差異化樣式應(yīng)用2025-08-08
這篇文章主要為大家詳細介紹了Vue.js組件通信之自定義事件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
vue.js的狀態(tài)管理vuex中store的使用詳解
今天小編就為大家分享一篇vue.js的狀態(tài)管理vuex中store的使用詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了淺談Vue初學(xué)之props的駝峰命名，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
Vue echart實現(xiàn)柱狀圖,電池圖,3D柱圖和3D圓柱圖代碼詳解
這篇文章主要為大家介紹了Vue實現(xiàn)echart繪圖代碼詳解，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
vue中的事件修飾符once,prevent,stop,capture,self,passive
這篇文章主要介紹了vue中的事件修飾符once,prevent,stop,capture,self,passive，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04