frame-player

frame-player

图片序列帧播放器，代替 gif、video 播放

Install

• 本地

npm i -S frame-player

import FramePlayer from 'frame-player'

const framePlayer = new FramePlayer(options)

• CDN

<script src="//unpkg.com/frame-player"></script>

Example

https://zhuweiyou.github.io/frame-player/

API

• class: FramePlayer(options)
  • FramePlayer.version
  • event: 'loading'
  • event: 'ready'
  • event: 'play'
  • event: 'update'
  • event: 'stop'
  • framePlayer.on(event, fn)
  • framePlayer.play([desc])
  • framePlayer.stop([frame])
  • framePlayer.frame

class: FramePlayer(options)

• options <Object>
  • canvas <string|HTMLCanvasElement> 画布选择器 | 画布对象。默认 "canvas"
  • width <number> 绘制宽度（当设置了 css width 时，作为绘制比例）
  • height <number> 绘制高度（当设置了 css height 时，作为绘制比例）
  • images <Array<string>> 图片路径数组
  • fps <number> 帧率。默认 24
  • loop <number> 循环播放次数。-1 为无限循环，默认 0 不循环
  • alternate <boolean> 是否轮流反向播放，配合 loop 使用才有效果。默认 false
  • transparent <boolean> 图片是否透明，false 时每次绘制前不清空画布。默认 false
  • autoPlay <boolean> 是否自动播放，true 会在图片 ready 后立即播放。默认 false

FramePlayer.version

• returns: <number> 获取当前版本号

event: 'loading'

• options <Object>
  • count <number> 加载完成的图片数量
  • total <number> 图片总数

正在加载图片的事件，可用于画面上显示加载进度

event: 'ready'

所有图片加载完成的事件

event: 'play'

开始播放的事件

event: 'update'

• options <Object>
  • frame <number> 当前帧索引
  • times <number> 当前循环次数
  • desc <boolean> 当前是否反向播放

播放每一帧的事件

event: 'stop'

停止播放的事件

framePlayer.on(event, fn)

• event <string> 事件名
• fn <function> 回调函数

事件监听

framePlayer.play([desc])

• desc <boolean> 是否反向播放。默认 false

播放动画，将从之前 stop() 的位置继续播放，默认从 0 开始

framePlayer.stop([frame])

• frame <number> 停止的帧索引。默认 当前播放索引

停止播放，也可以传入 frame 跳帧到指定位置

framePlayer.frame

• returns: <number> 获取当前播放帧索引