# Lottie 动画

请扫码查看示例

# 介绍

基于lottie，实现的动画组件

# 引入

APP内置组件，可直接使用cross-view标签。

# 代码演示

# 基本用法

通过设置 crossprops 和 type 属性,展示动画。

<cross-view id="cross-view_lottie_1" class="cross-view" type="midea-lottie-view" crossprops="{{lottie1}}"></cross-view>
<button type="capsule" @click="_handleLottie('play')">播放</button>
<button type="capsule" @click="_handleLottie('pause')">暂停</button>
<button type="capsule" @click="_handleLottie('stop')">停止</button>
<button type="capsule" @click="_handleLottie('resume')">反向播放</button>

1
2
3
4
5

import prompt from '@system.prompt'
export default {
  data: {
    apng1: JSON.stringify({
      dataUrl: 
        'http://dolphin-weex-dev.msmartlife.cn/sample/assets/lottie/refresh.json',
      loop: true,
      autoPlay: true
    })
  },
  /**
   * 点击执行的方法
   * @param {string} type 原生方法名
   */
   _handleApng(type='') {
    this.$element('cross-view_apng_1').call({
      paramsJsonString: JSON.stringify({
        method: type,
        params: {},
      }),
      success: function (e) {
        prompt.showToast({
          message: `${type} success !!`,
        })
      },
      fail: function (e) {
        prompt.showToast({
          message: `${type} fail !!`,
        })
      },
      complete: function (e) {
        prompt.showToast({
          message: `${type} complete !!`,
        })
      },
    })
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

# Api

# Prop

字段	说明	类型	默认值	是否必须
`type`	原生组件类型	`String`	`midea-lottie-view`	`是`
`crossprops`	参数	`String`	`{}附表1`	`是`

# crossprops（表1）

字段	说明	类型	默认值	是否必须
`dataUrl`	动画的json文件路径	`String`	-	`是`
`loop`	是否循环播放	`Boolean`	`false`	`否`
`autoPlay`	是否自动播放	`Boolean`	`true`	`否`

WARNING

⚠️ 注意：图片路径仅支持在线url

# Methods

方法名称	说明	备注
`play`	开始/重新开始	-
`pause`	暂停	-
`resume`	暂停后继续播放	-
`stop`	停止播放	-