<image-frame>

显示效果

1.图片or视频
2.效果代码下载

简介

<image-frame> 用于在界面中显示序列帧动画。

• 在代码中请使用 <image-frame> 标签, 。
• 序列帧图片需选用本地图片，不支持从网络下载。
• <image-frame> 不支持内嵌子组件。

  基本用法

  <image-frame ref="images" class="image" 
        :src="[require('../../images/0.png'), 
              require('../../images/1.png'), 
              require('../../images/3.png'), 
              require('../../images/5.png'), 
              require('../../images/6.png'), 
              require('../../images/7.png'), 
              require('../../images/8.png')]" />

子组件

<image-frame>不支持子组件。

样式

支持通用样式。
WARNING
width, height 和 src必须被提供，否则图片无法渲染。

属性

事件

• 通用事件. 参见通用事件

  end

  当动画运行结束时，end事件将被触发。

  处理 end 事件

  在 <image-frame> 标签上绑定 end 事件：

  <image-frame @end="onAnimationEnd"/>

  增加事件处理函数：

  export default {
  methods: {
    onAnimationEnd (event) {
    }
  }
  }

  repeat

  当动画循环播放开始时，repeat事件将被触发。

  扩展

  start()

  开始播放动画。

  stop()

  停止播放动画。

  pause()

  暂停动画。

  resume()

  恢复播放动画。