uniapp 使用lottiefiles动画

npm install --save lottie-miniprogram

 

<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

 

来源:https://blog.csdn.net/weixin_44705979/article/details/128202353