# Apng 动态图片

请扫码查看示例

# 介绍

基于 apng，实现的动态图片

# 引入

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

# 代码演示

# 基本用法

通过设置 crossprops 和 type 属性,展示图片。

<cross-view
  id="cross-view_apng_1"
  type="midea-apng-view"
  crossprops="{{apng1}}"
></cross-view>
<button type="capsule" @click="_handleApng('play')">播放</button>
<button type="capsule" @click="_handleApng('pause')">暂停</button>
<button type="capsule" @click="_handleApng('stop')">停止</button>
<button type="capsule" @click="_handleApng('resume')">反向播放</button>

1
2
3
4
5
6
7
8
9

import prompt from '@system.prompt'
export default {
  data: {
    apng1: JSON.stringify({
      src: 'http://dolphin-weex-dev.msmartlife.cn/sample/assets/image/apng/intro_iSpt.png',
      loop: true,
      auto: 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

# Api

# Prop

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

# crossprops（表 1）

字段	说明	类型	默认值	是否必须
`src`	图片路径	`String`	-	`是`
`loop`	是否循环播放	`Boolean`	`false`	`否`
`auto`	是否自动播放	`Boolean`	`true`	`否`

WARNING

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

# Methods

方法名称	说明	备注
`play`	开始/重新开始	-
`pause`	暂停	-
`resume`	暂停后继续播放	-
`stop`	停止播放	-
`goTo`	去到指定帧	-
`run`	运行帧	-