npm install lottie-miniprogram
-
<template>
<view class="lottie-view">
<canvas id="lottie" type="2d" class="lottie" canvas-id="lottie" />
</view>
</template>
<script lang="ts" setup>
import lottie from "lottie-miniprogram";
import { onMounted, ref, getCurrentInstance, onUnmounted } from "vue";
const lottieUrl = 'xxxxxxxxxxxxxxxxxxxxxx/data.json' //在線json地址
const { windowWidth, windowHeight, pixelRatio } = wx.getSystemInfoSync()
const init = async () => {
wx.createSelectorQuery().select('#lottie').node(async res => {
const canvas = res.node
const context = canvas.getContext('2d')
//解決lottie模糊問題
canvas.width = windowWidth * pixelRatio
canvas.height = windowHeight * pixelRatio
context.scale(pixelRatio, pixelRatio)
lottie.setup(canvas)//要執(zhí)行動畫矢渊，必須調(diào)用setup,傳入canvas對象
lottie.loadAnimation({//lottie給的接口
loop: true,//是否循環(huán)播放（選填）
autoplay: true,//是否自動播放（選填）
// animationData: require('../../static/data.js'),
path: lottieUrl,//lottie json包的網(wǎng)絡鏈接继准，可以防止小程序的體積過大，要注意請求域名要添加到小程序的合法域名中
rendererSettings: {
context//es6語法：等同于context:context（必填）
}
})
}).exec()
};
onMounted(() => {
init();
});
</script>
<style>
.lottie-view {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background-image: url('xxxxxxxxxxxxxxxxxxxlottie.png');
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
}
.lottie {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
}
</style>
