webUrl: https://qft12m.smartapps.cn/component/animation-view/animation-view

title: animation-view Lottie 动画 header: develop nav: component sidebar: base_animation-view-Lottie

webUrl: https://qft12m.smartapps.cn/component/animation-view/animation-view

解释：仅支持 Lottie 动画的客户端原生组件，使用时请注意相关限制，动画资源地址可到lottie的官方库进行查询。

属性说明

action 有效值

示例

在开发者工具中预览效果

扫码体验

请使用百度APP扫码

代码示例1 - 动画资源地址在本地，path为相对路径

:::codeTab

<view class="wrap">
    <view class="card-area">
        <animation-view class="controls" path="{{path}}" loop="{{loop}}" autoplay="{{autoplay}}" action="{{action}}" hidden="{{hidden}}" bindended="lottieEnd">
        </animation-view>
        <button bindtap="playLottie" type="primary">{{status}}lottie动画</button>
    </view>
</view>

Page({
    data: {
        path: '/anims/lottie_example_one.json',
        loop: true,
        autoplay: true,
        action: 'play',
        hidden: false,
        status: '暂停'
    },
    onShow() {
        console.log(' 百度 App版本11.3以上才可使用');
    },
    playLottie() {
        // 切换播放状态
        let action = this.data.action;
        action = action === 'pause' ? 'play' : 'pause';
        let status = action === 'pause' ? '播放' : '暂停';
        this.setData({
            action,
            status
        });
    },
    lottieEnd() {
        console.log('自然播放结束会触发回调，循环播放结束及手动停止动画不会触发。');
    }
});

:::

代码示例2 - 动画资源地址在服务器上存放

此种使用方式建议在真机查看完整效果，注意path属性仅可在组件初始化时传入，不支持用setData方法后续动态传入。

在开发者工具中预览效果

:::codeTab

<view class="wrap">
    <view class="card-area">
        <view class="animation-view-area">
            <animation-view s-if="{{shouldShow}}" class="controls" path="{{path}}" loop="{{loop}}" autoplay="{{autoplay}}" action="{{action}}" hidden="{{hidden}}" bindended="lottieEnd">
            </animation-view>
        </view>
        <button bindtap="playLottie" type="primary">{{status}}lottie动画</button>
    </view>
</view>

Page({
    data: {
        path: '',
        loop: true,
        autoplay: true,
        action: 'play',
        hidden: false,
        status: '暂停',
        shouldShow: ''
    },
    onShow() {
        console.log(' 百度 App版本11.3以上才可使用');
        swan.downloadFile({
            url: 'https://b.bdstatic.com/miniapp/images/lottie_example_one.json',
            header: {
                'content-type': 'application/json'
            },
            success: res => {
                const filePath = res.tempFilePath;
                this.setData({
                    shouldShow: true,
                    path: filePath
                });
            }
        });
    },
    playLottie() {
        // 切换播放状态
        let action = this.data.action;
        action = action === 'pause' ? 'play' : 'pause';
        let status = action === 'pause' ? '播放' : '暂停';
        this.setData({
            action,
            status
        });
    },
    lottieEnd() {
        console.log('自然播放结束会触发回调，循环播放结束及手动停止动画不会触发。');
    }
});

:::

Bug & Tip

• Tip：animation-view组件的位置信息、padding值以path里传的json文件里的left、top、padding值为准。
• Tip：animation-view组件不支持原生组件嵌套。
• Tip：为避免出现iOS中画面被拉伸的情况，建议将animation-view组件的长宽比设置的与动画长宽比一致。
• Tip：path暂不支持远程路径，原因是端上暂不支持解析远程路径的 json 文件, 如果不想将 json 文件放在小程序包内，可以通过API swan.downloadFile将文件下载到本地，具体可参考上方代码示例2。