uniapp 使用lottiefiles动画
uniapp 使用lottiefiles json文件作为动画
·
1.安装依赖
npm install --save lottie-miniprogram
2.页面使用
<view ref="animArean" class="donghua" id="renderjs-view">
<canvas id="lottie_demo" type="2d" style="display: inline-block;width: 250px; height: 248px;" />
</view>
<script>
import lottie from 'lottie-miniprogram';
import * as lottieJson from '../../static/charging.json'
let ani = null;
export default {
data() {
return {
inited: false,
}
},
onShow() {
this.init()
},
onLoad() {
},
onReady() {
},
onHide() {
},
onUnload() {
},
methods: {
init() {
if (this.inited) {
return;
}
this.createSelectorQuery()
.select('#lottie_demo')
.node(res => {
console.log(res); // 节点对应的 Canvas 实例。
const canvas = res.node;
const context = canvas.getContext('2d');
canvas.width = 250;
canvas.height = 248;
lottie.setup(canvas);
ani = lottie.loadAnimation({
loop: true,
autoplay: true,
animationData: require('../../static/charging.json'),
rendererSettings: {
context
}
});
this.inited = true;
})
.exec();
},
}
}
</script>
总结:uniapp 使用lottiefiles 和vue 不一样
vue是安装 npm install --save vue-lottie
uniapp 是安装 npm install --save lottie-miniprogram
更多推荐
已为社区贡献13条内容
所有评论(0)