HTML帧显示,HTML帧动画

这几天学习HTML看了一个帧动画的做法。

成图

跟上一篇一样，咱们先画盘来了解一下咱们的这个步骤是怎样的。

HTML帧动画.png

按照步骤图的第一步，咱们要先设置UI：

选取带有序列图的图片

每帧图片宽度:

每帧图片高度:

行数

列数

查看动画帧

然后进行第二步选择本地图片的方式：

//定义动画集合

var frames=[];

var timeHandler=null;

//加载本地图片

function loadImg(fObj){

var f=fObj.files[0];

if(!/image\/\w+/.test(f.type)){

alert("请选择图片文件！")

}

else

{

//创建文件读取对象

var r=new FileReader();

//以DataURL方式读取

r.οnlοad=function(){

$("#flmg").attr("src",this.result);

delete r;

}

r.readAsDataURL(f);

}

//停止动画

if(timeHandler!=null)

{

clearInterval(timeHandler);

}

frames=[];

}

第三步：生成动画，设置每帧动画的一些基本设置：

//生成动画

function createAnimation(){

if($("#flmg").attr("src")==""){

alert("请先选择图片文件");

}

else

{

//获取每帧宽度和高度

var w=Number($("#fWid").val())||32,

h=Number($("#fHei").val())||32,

r=Number($("#fRow").val())||1,

c=Number($("#fCol").val())||1;

frames=[];

cv.width=w;

cv.height=h;

//清空帧选择

$("#selFrame").empty();

//生成每帧图片在图中的坐标

var fCount=0;

for(var i=0;i

for(var j=0;j

//计算每帧图片的其实坐标，x,y

var x=j*w,

y=i*h;

//保存每帧图片的起始坐标，X,Y和宽度高度

frames.push([x,y,w,h]);

$("#selFrame").append("第"+fCount+"帧")

fCount++;

}

}

}

}

第四步：选择帧，把帧画画到画布上

//选择动画帧，把当前帧画到画布上面

function selFrame(idx){

if(frames.length==0) return;

var f=frames[idx],

ctx=cv.getContext("2d");

//绘制图片到canvas上

ctx.clearRect(0,0,cv.width,cv.height);

ctx.drawImage(flmg,f[0],f[1],f[2],f[3],0,0,cv.width,cv.height);

}

第五步，设置按钮的点击事件：

//运行动画

function run(btn){

if(frames.length==0) return;

var ctx=cv.getContext("2d");

if(btn.value=="运行动画"){

//设置动画，每100毫秒运行一帧

var fCount=frames.length,

fldx=0;

timeHandler=setInterval(function(){

var f=frames[fldx];

ctx.clearRect(0,0,cv.width,cv.height);

ctx.drawImage(flmg,f[0],f[1],f[2],f[3],0,0,cv.width,cv.height);

fldx=(++fldx)%fCount;

},100);

btn.value="停止动画";

}

else{

clearInterval(timeHandler);

btn.value="运行动画";

}

}

现在咱们就把这个帧动画做完了，然后咱们选择图片的时候要选择带有序列图的图片。

如果还有什么疑问，欢迎联系我们！

有什么问题尽管提！