• animation-view Lottie 动画
  • 属性说明
    • action 有效值
  • 示例
    • 代码示例 1：动画资源地址在本地，path 为相对路径
    • 代码示例 2：动画资源地址在服务器上存放
  • Bug & Tip

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：互动型动画 – 建议不自动播放；展示型动画 – 建议自动播放。