animation-view Lottie 动画

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

# 属性说明

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

# action 有效值

说明
play 播放
pause 暂停
stop 停止

# 示例

扫码体验
重新加载
请使用百度APP扫码

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

    <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 方法后续动态传入。

      <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。
      • Tip:在保证产品体验流畅,不能影响性能的同时,建议在刷新、加载、运营 banner、按钮、图标等场景中适时适度的使用动效。
      • Tip:互动型动画-建议不自动播放;展示型动画-建议自动播放。