更新记录

1.0.5（2024-06-14）

调整iOS平台组件内的默认样式

1.0.4（2024-05-24）

• 修复 Android uni-app x 正式包模式下，可能不展示动画的Bug

1.0.3（2024-04-11）

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

平台兼容性

uni-app

uni-app x

animation-view

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

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

属性说明

注意

• animation-view 组件在uni-app项目中仅nvue页面支持（vue页面不支持），在uni-app x项目中uvue页面支持
• 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>