更新记录

1.0.3（2024-04-11）

修复Android平台 修正组件名称为 animation-view

1.0.2（2024-03-22）

修复Android平台云打包编译失败的Bug

1.0.1（2023-04-07）

修复ios平台本地编译会报 swift 版本不兼容的bug

平台兼容性

animation-view

animation-view组件是uts插件，需 HBuilderX 3.7.0+

使用文档：https://uniapp.dcloud.net.cn/component/animation-view.html

属性说明

注意

• animation-view 仅App端nvue页面支持
• App端实现使用了Lottie三方SDK，参考开源项目：Lottie for Android，Lottie for iOS
• App-Android平台要求Android5（API Leavel 21）及以上系统
• App-iOS平台要求iOS11及以上版本系统

代码示例

<template>
    <div>
        <animation-view class="animation" :path="path" :loop="loop" :autoplay="autoplay" :action="action"
            :hidden="hidden" @bindended="lottieEnd">
        </animation-view>
        <button @click="playLottie" type="primary">{{status}}lottie动画</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                path: 'https://b.bdstatic.com/miniapp/images/lottie_example_one.json',
                loop: false,
                autoplay: false,
                action: 'play',
                hidden: false,
                status: '暂停'
            }
        },
        methods: {
            playLottie() {
                this.action = ('play' !== this.action) ? 'play' : 'pause';
                this.status = ('pause' === this.action) ? '播放' : '暂停';
            },
            lottieEnd() {
                this.status = '播放';
                this.action = 'stop';
                console.log('动画播放结束');
            }
        }
    }
</script>

<style>
    .animation {
        width: 750rpx;
        height: 300rpx;
        background-color: #FF0000;
        margin-bottom: 20px;
    }
</style>