animation-view Lottie 动画

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

属性说明

属性名类型默认值必填说明最低版本
pathString动画资源地址,目前只支持绝对路径-
loopBooleanfalse动画是否循环播放-
autoplayBooleantrue动画是否自动播放-
actionStringplay动画操作,可取值 play、pause、stop-
hiddenBooleantrue是否隐藏动画-
bindendedEventHandle当播放到末尾时触发 ended 事件(自然播放结束会触发回调,循环播放结束及手动停止动画不会触发。)3.0.0低版本请做兼容性处理

action 有效值

说明
play播放
pause暂停
stop停止

示例

在开发者工具中预览效果

扫码体验

animation-view Lottie 动画 - 图3请使用百度APP扫码

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

  1. <view class="wrap">
  2. <view class="card-area">
  3. <animation-view class="controls" path="{{path}}" loop="{{loop}}" autoplay="{{autoplay}}" action="{{action}}" hidden="{{hidden}}" bindended="lottieEnd">
  4. </animation-view>
  5. <button bindtap="playLottie" type="primary">{{status}}lottie动画</button>
  6. </view>
  7. </view>
  1. Page({
  2. data: {
  3. path: '/anims/lottie_example_one.json',
  4. loop: true,
  5. autoplay: true,
  6. action: 'play',
  7. hidden: false,
  8. status: '暂停'
  9. },
  10. onShow() {
  11. console.log(' 百度 App版本11.3以上才可使用');
  12. },
  13. playLottie() {
  14. // 切换播放状态
  15. let action = this.data.action;
  16. action = action === 'pause' ? 'play' : 'pause';
  17. let status = action === 'pause' ? '播放' : '暂停';
  18. this.setData({
  19. action,
  20. status
  21. });
  22. },
  23. lottieEnd() {
  24. console.log('自然播放结束会触发回调,循环播放结束及手动停止动画不会触发。');
  25. }
  26. });

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

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

在开发者工具中预览效果

  1. <view class="wrap">
  2. <view class="card-area">
  3. <view class="animation-view-area">
  4. <animation-view s-if="{{shouldShow}}" class="controls" path="{{path}}" loop="{{loop}}" autoplay="{{autoplay}}" action="{{action}}" hidden="{{hidden}}" bindended="lottieEnd">
  5. </animation-view>
  6. </view>
  7. <button bindtap="playLottie" type="primary">{{status}}lottie动画</button>
  8. </view>
  9. </view>
  1. Page({
  2. data: {
  3. path: '',
  4. loop: true,
  5. autoplay: true,
  6. action: 'play',
  7. hidden: false,
  8. status: '暂停',
  9. shouldShow: ''
  10. },
  11. onShow() {
  12. console.log(' 百度 App版本11.3以上才可使用');
  13. swan.downloadFile({
  14. url: 'https://b.bdstatic.com/miniapp/images/lottie_example_one.json',
  15. header: {
  16. 'content-type': 'application/json'
  17. },
  18. success: res => {
  19. const filePath = res.tempFilePath;
  20. this.setData({
  21. shouldShow: true,
  22. path: filePath
  23. });
  24. }
  25. });
  26. },
  27. playLottie() {
  28. // 切换播放状态
  29. let action = this.data.action;
  30. action = action === 'pause' ? 'play' : 'pause';
  31. let status = action === 'pause' ? '播放' : '暂停';
  32. this.setData({
  33. action,
  34. status
  35. });
  36. },
  37. lottieEnd() {
  38. console.log('自然播放结束会触发回调,循环播放结束及手动停止动画不会触发。');
  39. }
  40. });

Bug & Tip

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