哇，学成HTML5是件超酷的事情！简直无所不能，可以制作超美拉风的动画效果——例如转圈、滑屏、滚动等等。现在，我正忙着研究canvas的动画真心不错的样子！跟老掉牙的flash比较，canvas更加有趣且专业多了。不过，只要配上个靠谱儿的编辑器或框架，想怎么玩都行！因此，我打算写个简单又好用的动画框架，这样大家也能轻松搞出那些炫酷的画面！
通用类的提取：动画对象与帧对象
我简单说说这种方法就是跟那个Flash有点像。其实就是说把一些会动的小玩意儿和一张图拼起来，就跟咱们平常上网看的那些Flash小游戏那样子。就是在同一张图上瞎涂乱抹就行了。做出的效果还挺有意思的，加上点动态行为啥的就能做出各种超赞的动画了。
唠嗑下这个叫Aniele的动画小家伙，功能炫不炫酷哇？当然，它可是动画界的红人，各种耍酷功能都有。你可以让它变得透明，拉伸或者压缩，甚至是弄出像翻转漫画那样的特效。你就把它当作Flash里的元件来用，想咋整就咋整，想出什么效果都任你发挥！
画框里的那个小家伙，就是两大任务要做，第一就是搞渲染，第二就要管动起来的动图了。说到这儿，它还特别有个叫 this.aniEles 的属性，就是存着画布上所有动图资料用的。有时候往Canvas里贴图会眼花缭乱，这时候我们用个双缓冲来解决看看。怎么弄呢?其实就是先把整个画面在后面那块画布上弄好了，然后再搬到前面来，这么一弄，图片晃悠的毛病就没了。
在帧对象里面先操作两步，把动画移到当前这个帧上，然后就看好戏！
灵与肉的结合：便于拆卸的运动方程
/*
*Aniele动画对象
*所有动画对象的始祖
*/
varAniele=function(){
this.img=newImage();
//定义动画对象位置
this.loca={
x:300,
y:300
}
//定义动画对象的大小（可以实现缩放）
this.dw;
this.dh;
//动画对象的速度属性
this.speed={
x:0,
y:0
}
//设置对象的透明度
this.alpha=1;
//设置图像翻转，1为不翻转，-1为翻转
this.scale={
x:1,
y:1
}
//定动画对象的运动方法库
this.motionFncs=[];
}
Aniele.prototype={
//添加运动方法
addMotionFnc:function(name,fnc) {
this.motionFncs[name]=fnc;
},
//删除运动方法
deleMotionFnc:function(name){
this.motionFncs[name]=null;
},
//遍历运动方法库里的所有运动方法
countMotionFncs:function() {
for(vari=0; i
if(this.motionFncs[i]==null)
continue;
this.motionFncs[i].call(this);
}
},
//把自己绘制出来的方法，包括功能：水平翻转
draw:function(canvas,ctx){
//存储canvas状态ctx.save();
//实现透明度的改变
ctx.globalAlpha=this.alpha;
//实现水平竖直翻转，定义drawImage的两个位置参数dx，dy
vardx=this.loca.x;
vardy=this.loca.y;
if(this.scale.x!=1||this.scale.y!=1){
if(this.scale.x<0){
console.log(this.img.width)
dx=canvas.width-this.loca.x-this.img.width;
ctx.translate(canvas.width,1);
ctx.scale(this.scale.x,1);
}
if(this.scale.y<0){
dy=canvas.height-this.loca.y-this.img.height;
ctx.translate(1,canvas.height);
ctx.scale(1,this.scale.y);
}
}
if(this.dw==null)
this.dw=this.img.width;
if(this.dh==null)
this.dh=this.img.height;
//画出对象
ctx.drawImage(this.img,dx,dy,this.dw,this.dh);
//恢复canvas状态ctx.restore();
}
}
除了那些熟悉的活动，我们还得想想怎么把运动做得更好。有了这个小工具，无论什么运动你都能掌握了！比如直线跑啊、爆发力训练啊、弹跳之类的花样运动，在Canvas上都可以轻松搞定！
进度条的实现：Canvas图片预加载
在网页上插入大图可不是闹着玩的，弄得慢了网页版面容易丑。那怎么办？咱们可以先把图像下载下来，最后再开始制作副本，这样网页显示起来才会流畅，是不是挺靠谱的？
Demo测试：通过一个Demo测试框架
咱们赶紧试试这个框架的Demo！看看它能不能用在我们需要的地方，有没有达到我们之前期待的效果。实践出真知！
this.backBuffer=document.('canvas');
this.backBuffer.width=this.canvas.width;
this.backBuffer.height=this.canvas.height;
this.backBufferctx=this.backBuffer.getContext('2d');
真的过太快了耶！今天我们就说到这儿。感兴趣的话记得多多捧场下一次分享更多有趣好玩的东西。
评论0