SequenceFrames

这是一个图片序列帧播放项目，通过js能够实现图片的顺序播放，循环播放。

This is a picture frame sequence of play items, the order can be achieved by js picture playback, loop playback.

NPM

使用方法：

<div id="mycanvas" width=1000 height=562></div>
<script>
var sf
function slFun(){
	var arr =['img1.jpg','img2.jpg','img3.jpg']
	sf = new SequenceFrames("mycanvas",arr,1000,562,{autoPlay:true,fps:10,onLoaded:()=>{
		sf.play();
	}});
}
slFun();
</script>

SequenceFrames(id,array,width,height,{fps:30,autoPlay:true,homePage:10,onLoaded=>{},onComplate:()=>{}})

SequenceFrames初始化参数

| 属性 | 说明 | |---|---| | id| 装载div id | | array| 序列帧数组 | | width| canvas的宽 | | hieght| canvas的高 | | autoPlay| true/false 设置自动播放 | | fps| number 设置帧率 | | homePage| number 设置第一帧 | | onLoaded| function 图片加载完毕 | | onComplate| function 播放完毕 |

SequenceFrames可用方法

| 方法 | 说明 | 示例| |---|---|---| | play() | 顺序播放 | sf.play()| | pause() | 暂停播放 | sf.pause()| | stop() | 停止播放，回到第一帧 | sf.stop()| | reverse() | 倒序播放 | sf.reverse()| | nextFrame() | 向后播放一帧 | sf.nextFrame();| | prevFrame() | 向前播放一帧 | sf.prevFrame(); | | setLoop(int,int) | 设置循环帧 |sf.setLoop(10,20)| | gotoAndPlay(int) | 从第n帧开始播放 | sf.gotoAndPlay(10)| | gotoAndStop(int) | 停止到第n帧 | sf.gotoAndStop(10)| | loop() | 循环播放 | sf.loop(10,20,yoyo);yoyo=true/false //正循环和倒循环| | playTo(int) | 播放并停止到某帧 | sf.playTo(20)|

demo