更新记录

1.0.61（2025-01-20） 下载此版本

stoppedFrame 参数默认空字串，表示不启用停止帧处理

1.0.6（2025-01-20） 下载此版本

bsx-animation-view 支持停止动画时指定帧结束；props : stoppedFrame:string -> start or end Android lottie 升级依赖版本 为 5.2.0

平台兼容性

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>
    <!-- 使用 bsx-animation-view 传入stoppedFrame 停止播放时指定帧位置 -->
    <bsx-animation-view class="animation" :stoppedFrame="stoppedFrame" :path="path" :loop="loop" :autoplay="autoplay" :action="action"
        :hidden="hidden" @bindended="lottieEnd">
    </bsx-animation-view>

    <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 {
                stoppedFrame:'', // 默认空字串不启用，start 停在起始帧 end停在结束帧
                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>