HTML帧动画
2018-05-31 本文已影响0人
初夏凉雨
这几天学习HTML看了一个帧动画的做法。
成图
跟上一篇一样，咱们先画盘来了解一下咱们的这个步骤是怎样的。
HTML帧动画.png
按照步骤图的第一步，咱们要先设置UI：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=t\utf-8"/>
</head>
<body>
选取带有序列图的图片<input type="file" id="fBtn" onchange="loadImg(this)"/><br>
<img src=""id="flmg"/><br>
每帧图片宽度:<input id="fWid" value="284"/><br>
每帧图片高度:<input id="fHei" value="324"/><br>
行数<input id="fRow" value="1"/><br>
列数<input id="fCol" value="10"/><br>
<input type="button" id="cBtn" onclick="createAnimation()" value="生成动画序列图"/>
查看动画帧<select id="selFrame" onchange="selFrame(this.value)"></select>
<input type="button" value="运行动画" onclick="run(this)"/><br>
<canvas id="cv"></canvas>
</body>
然后进行第二步选择本地图片的方式：
<script>
//定义动画集合
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.onload=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<r;i++){
for(var j=0;j<c;j++){
//计算每帧图片的其实坐标，x,y
var x=j*w,
y=i*h;
//保存每帧图片的起始坐标，X,Y和宽度高度
frames.push([x,y,w,h]);
$("#selFrame").append("<option value='"+fCount+"'>第"+fCount+"帧</option>")
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="运行动画";
}
}
</script>
</html>
现在咱们就把这个帧动画做完了，然后咱们选择图片的时候要选择带有序列图的图片。
如果还有什么疑问，欢迎联系我们！
有什么问题尽管提！
