/vFramePlayer

序列帧图片播放插件,支持通过Canvas播放,可控制播放速度,可循环播放,甚至倒序播放。

Primary LanguageJavaScriptMIT LicenseMIT

FramePlayer

序列帧图片播放插件,支持通过CANVAS\IMG播放,可控制播放速度,可循环播放、倒序播放,设置循环播放及监听事件等功能。

示例

https://vmllab-js.github.io/vFramePlayer/

如何使用

引入JS核心文件

<script type="text/javascript" src="vframeplayer-min.js"></script>

在页面中插入DIV标签

<div id="framePlayer"></div>

实例化vFramePlayer

//将所有图片放入一个数组
var imgArr = ["img/0.jpg","img/1.jpg","img/2.jpg"];
//实例化vFramePlayer
var framePlayer = new vFramePlayer({
    dom : document.getElementById("framePlayer"),
    imgArr : imgArr
});

Options

Field Type Default Description
dom object none 用于存放图片和CANVAS的DOM节点,该项必选。
imgArr array none 图片序列数组,该项必选。支持图片地址及base64。
fps number 25 设置动画播放每秒显示帧频,该项可选。
useCanvas boolean true 是否用CANVAS播放动画,该项可选。如果设置为false,则使用IMG播放。
loop number 0 循环播放次数,该项可选。不设置则不循环播放,-1为无限循环。
yoyo boolean false 配合loop使用,该项可选。如果设置为true,循环播放的时候会回播。
//示例
var framePlayer = new vFramePlayer({
    dom : document.getElementById("framePlayer"),
    imgArr : imgArr,
    fps : 30,
    useCanvas : false,
    loop : 10,
    yoyo : true
});

Methods

实例化完成后,你可以使用以下方法进行播放序列图动画:

Field Parameter Description
play() start end options 播放序列图动画。参数见下表。
goto() i 直接跳到第i帧,i必选。type:number
pause() none 暂停播放动画。
stop() none 停止播放动画,重置数据。
destroy() none 清除所有动画及监听事件。
get() attr 获取参数值。可获取参数同Options Field列。type:string
set() attr 设置参数值。可设置参数同Options Field列。type:string

play()方法参数:

Field Type Default Description
start number 0 播放开始帧,该项可选。
end i last 播放结束帧,该项可选。如果end大于start,则倒序播放。
options object none 播放参数,该项可选。同Options

play()方法options其他参数设置:

  • onComplete()- 播放完成时执行的方法,该项可选;
  • onUpdate(frame,times,asc) - 播放过程中执行的方法,该项可选。
    • frame - 当前帧。
    • times - 已播放次数。
    • asc - 是否升序播放。
//示例
framePlayer.play(10,100,{
    yoyo:true,
    fps:30,
    loop:10,
    onComplete : function () {
        console.log("播放完成");
    },
    onUpdate : function (frame,times,asc) {
        console.log("当前播放第"+ frame +"帧");
        console.log("已经循环播放"+ times +"次");
        console.log("当前是否是升序播放:"+ asc);
    }
)

Events

播放事件的监听及取消监听的方法。

Field Parameter Description
on() events handler 监听事件。events - 监听事件名称,handler - 监听事件执行方法。
one() events handler 监听一次事件。参数同上。
off() events handler 结束监听。参数同上。

事件监听名称:

  • "play" - 开始播放
  • "pause" - 暂停动画
  • "stop" - 停止动画
  • "update" - 动画播放过程中
//示例
framePlayer.on("play",function () {
    console.log("开始播放");
})

Author

VML-LAB iorilp, RhineLiu