Canvas动画：精灵动画（序列帧动画）

精灵动画（序列帧动画）

播放精灵动画用到的绘图方法是drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);
精灵动画原理：每次只分割出其中一副图像并绘制出来，每隔一段时间便重绘下一幅动画帧，如此便可以做到按顺序播放动画帧的每张图片。

window.onload=function(){var oCanvas = document.getElementById('c1');var oCtx = oCanvas.getContext('2d');var x=100,y=100;var nFrame=0;var oFishImg = new Image();oFishImg.src = "images/鱼动画.png";oFishImg.onload = function(){setInterval(function(){oCtx.clearRect(0,0,oCanvas.width,oCanvas.height);oCtx.drawImage(oFishImg,0,nFrame*148,201,148,20,20,201,148);nFrame++;if(nFrame>=4) {nFrame=0;}},30);}}

精灵帧预渲染

在精灵动画制作中，需要重复绘制不同动画帧，我们可以先把图像绘制到一个不可见的画布上，当需要更换动画帧时，再把这个预先绘制好的画布渲染到可见画布，提高了渲染的效率。

var oCanvas = document.getElementById('c1');
var oCtx = oCanvas.getContext('2d');
var x=20,y=20;
var nFrame=0;
var oFishImg = new Image();
oFishImg.src = "images/鱼动画.png";
oFishImg.onload = function(){var frames=[];for(var i=0;i<4;i++){var can = document.createElement('canvas');can.width=201;can.height=148;var ctx=can.getContext('2d');ctx.drawImage(oFishImg,0,i*148,201,148,0,0,201,148);frames[i]=can;}setInterval(function(){oCtx.clearRect(0,0,oCanvas.width,oCanvas.height);oCtx.drawImage(frames[nFrame],x,y);nFrame++;if(nFrame>=4) {nFrame=0;}},30);
};

精灵对象封装

在游戏或动画中往往需要创建出多个动画，如同时有几条鱼在游，如果只是简单的把代码复制几份，那么代码就会变成冗余且混乱。
可以考虑使用面向对象的方法重写代码，使代码整洁并且方便调用。
Fish类

var Fish = function (image, x, y, width, height) {this.image = image;this.x = x;this.y = y;this.averageY = y;this.width = width;this.height = height;this.frm = 0;this.dis = 0;this.velocity = 2;this.disV = 0;
};Fish.prototype.draw = function (ctx) {ctx.save();ctx.translate(this.x, this.y);ctx.drawImage(this.image, 0, this.frm * this.height, this.width, this.height, 0, 0, this.width, this.height);ctx.restore();this.x += this.velocity;this.disV++;if (this.disV >= 90) {this.velocity = 1 + 2 * Math.random();}if (this.x >= 800) {this.x = -200;}this.y = this.averageY + 50 * Math.sin(Math.PI / 100 * this.x);this.dis++;if (this.dis >= 20) {this.dis = 0;this.frm++;if (this.frm >= 4) this.frm = 0;}
};

Fish类调用

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var image = new Image();
var image2 = new Image();
var image3 = new Image();
var image4 = new Image();
var background = new Image();
background.src = "海底.png";
image.src = "鱼动画.png";
image2.src = "鱼动画2.png";
image3.src = "鱼动画3.png";
image4.src = "鱼动画4.png";image4.onload = function () {var fish1 = new Fish(image, -200, 20, 201, 148);var fish2 = new Fish(image2, 20, 200, 200, 173);var fish3 = new Fish(image3, 240, 50, 200, 186);var fish4 = new Fish(image4, 480, 110, 200, 170);
setInterval(function() {context.clearRect(0, 0, 800, 374);context.drawImage(background, 0, 0);fish1.draw(context);fish2.draw(context);fish3.draw(context);fish4.draw(context);}, 1000 / 60);
};

Canvas动画：精灵动画（序列帧动画）相关推荐

CSS3控制变量输出精灵图序列帧动画 frameAnime.css
frameAnime.css [CSS精灵图序列帧动画]: 资源链接: 文档案例:http://miikio.gitee.io/frame-anime.css/ 备用下载:https://pan.ba ...
时光煮雨 Unity3D实现2D人物动画① UGUINative2D序列帧动画
系列目录 [Unity3D基础]让物体动起来①--基于UGUI的鼠标点击移动 [Unity3D基础]让物体动起来②--UGUI鼠标点击逐帧移动时光煮雨 Unity3D让物体动起来③-UGUI DoT ...
canvas动画科技园_使用 canvas 实现精灵动画
在最近项目中需要实现一个精灵动画,素材方只提供了一个短视频素材,所以在实现精灵动画之前先介绍两个工具来帮助我们更好的实现需求.在这篇文章中,主要是介绍两个命令行工具来实现将一个短视频文件转化成一张 s ...
Unity序列帧动画疑难解答
**Unity序列帧动画疑难解答熟悉界面: 界面熟悉很重要,千万不要发生与别人沟通时你说菜单他去找工具栏的情况. **菜单栏:**基础创建设置工具等功能入口 **工具栏:**软件内的基本操作工具,基 ...
UnityShader22：序列帧动画
一.序列帧动画序列帧动画的原理是如此的简单,可以说只需要足够多张纸以及足够多的时间,就可以实现最简单的动画: 不使用 Animation 工具,只需要使用 Shader 中的内置时间变量,就可以实现 ...
android序列帧动画纯代码,H5序列帧动画实现过程（附源码）
H需朋者说上事是础一发一开程和开数的目前间5序列帧动画实现过程(新直能分支调二浏页器朋代说,事刚附源码) 序列帧动画序列帧.轻厅设近幸松.备近幸松.备近幸松.备近动画,又称为逐帧动画,是使用多张连续 ...
❤️❤️❤️Unity废柴看过来，手把手教你做植物大战僵尸（二）—— 序列帧动画
开始制作游戏,首先,我们要把游戏素材导入到项目中,我这里整理出来了一些项目中用到的图片音乐等素材,大家可以下载下来使用,或者自己从网上找其他好看的素材也可以. 植物大战僵尸素材链接:https:// ...
unity3d序列帧动画无法显示坑
序列帧动画不能放在canvas2d节点的子节点下,否则不能显示.就算改了sprite 的(pixel unit)属性改变大小等,也只是在编辑环境下看得见,且还有透明度,实际运行中完全看不见. 序列帧动 ...
对于基本的捕鱼游戏设计思路（四）——序列帧动画
今天,我带领大家学习一下Cocos2d-x 2.0的序列帧动画.在Cocos2d-x中,提供了相应的一些类和方法,可以方便的生成序列帧动画,这样我们就可以制做各种人物动作以及动画效果.这就是鱼在水里游 ...

Canvas动画：精灵动画（序列帧动画）

精灵动画（序列帧动画）

精灵帧预渲染

精灵对象封装

Canvas动画：精灵动画（序列帧动画）相关推荐

最新文章

热门文章