animation-view Lottie 动画

解释：仅支持 Lottie 动画的客户端原生组件，使用时请注意相关限制，动画资源地址可到 lottie 的官方库进行查询。Lottie 使用入门详见官方介绍；设计师精彩示例及动效文件详见设计社区。

属性说明

action 有效值

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

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

• SWAN
• JS

<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>

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

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

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

• SWAN
• JS

<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>

Bug & Tip

• Tip：由于第三方库兼容性问题，在使用 animation-view 组件时，需要将小程序的最低基础库版本设置成大于等于 3.250.12 。
• Tip：若开发者使用 Adobe After Effects（AE）Bodymovin 插件导出 Lottie 文件时，应该使用版本号低于 5.5 版的 Bodymovin 插件导出 Lottie 文件（推荐使用 v5.4.4），否则会出现与 Lottie SDK 兼容性问题，导致无法正常播放。
• Tip：animation-view 组件的位置信息、padding 值以 path 里传的 JSON 文件里的 left、top、padding 值为准。
• Tip：animation-view 组件支持嵌套 cover-view、cover-image、button 原生组件。
• Tip：为避免出现 iOS 中画面被拉伸的情况，建议将 animation-view 组件的长宽比设置的与动画长宽比一致。
• Tip：path 暂不支持远程路径，原因是端上暂不支持解析远程路径的 JSON 文件, 如果不想将 JSON 文件放在小程序包内，可以通过 API swan.downloadFile 将文件下载到本地，具体可参考上方代码示例 2 。
• Tip：在保证产品体验流畅，不能影响性能的同时，建议在刷新、加载、运营 banner 、按钮、图标等场景中适时适度的使用动效。
• Tip：互动型动画 - 建议不自动播放；展示型动画 - 建议自动播放。