以小魚搖尾巴和眨眼睛為例
動畫思路：
1.將圖片資源放在數組里面
2.通過計時器來設定間隔時間
3.通過計數器來取相應的圖片
第一步：基本框架，魚身體
<body> <canvas id="canvas1" width="800" height="600"></canvas> </body>
1 document.body.onload = game; 2 3 var can1, 4 ctx1, 5 canWidth, 6 canHeight, 7 lastTime = Date.now(), 8 deltaTime = 0, 9 body = new Image(); 10 11 12 13 function game() { 14 init(); 15 gameloop(); 16 } 17 18 function init() { 19 can1 = document.getElementById("canvas1"); //fonr--fishes, UI, circles, dust 20 ctx1 = can1.getContext("2d"); 21 canWidth = can1.width; 22 canHeight = can1.height; 23 24 body.src = './src/baby.png'; 25 } 26 27 function bodyDraw(){ 28 ctx1.drawImage( body, -body.width * 0.5, -body.height * 0.5); 29 } 30 31 function gameloop() { 32 requestAnimFrame(gameloop); 33 34 //時間幀間隔 35 var now = Date.now(); 36 deltaTime = now - lastTime; 37 lastTime = now; 38 39 ctx1.clearRect(0, 0, canWidth, canHeight); 40 41 bodyDraw(); 42 } 43 44 45 46 window.requestAnimFrame = (function() { 47 return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || 48 function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) { 49 return window.setTimeout(callback, 1000 / 60); 50 }; 51 })();
第二步：搖動尾巴
1.圖片資源有8張，從tail0.png ~ tail7.png
2.尾巴是勻速的運動，間隔時間為固定值
1 var bTailTimer, //計時器 2 bTailCount, //計數器 3 babyTail = []; //圖片數組 4 5 function init() { 6 //尾巴初始化 7 bTailTimer = 0; 8 bTailCount = 0; 9 for (var i = 0; i < 8; i++) { 10 babyTail[i] = new Image(); 11 babyTail[i].src = './src/tail' + i +'.png'; 12 } 13 } 14 15 function tailDraw(){ 16 bTailTimer += deltaTime; 17 if(bTailTimer > 50){ 18 bTailCount = (bTailCount + 1)% 8; 19 bTailTimer %= 50; //初始化計數器 20 } 21 ctx1.drawImage( babyTail[bTailCount], -babyTail[bTailCount].width * 0.5, -babyTail[bTailCount].height * 0.5); 22 } 23 24 function gameloop() { 25 ctx1.clearRect(0, 0, canWidth, canHeight); 26 27 bodyDraw(); 28 tailDraw(); 29 }
第二步：眨眼睛
1.圖片資源有2張，從eye0.png ~ eye7.png
2.眼睛睜開時間不定時，閉上時間固定值
1 var bEyeTimer, 2 bEyeCount, 3 bEyeInterval, //時間間隔變量 4 babyEye = []; 5 6 function init() { 7 //眼睛初始化 8 bEyeTimer = 0; 9 bEyeCount = 0; 10 bEyeInterval = 1000; //間隔時間 11 for (var i = 0; i < 2; i++) { 12 babyEye[i] = new Image(); 13 babyEye[i].src = './src/Eye' + i + '.png'; 14 } 15 } 16 17 function eyeDraw() { 18 bEyeTimer += deltaTime; 19 if (bEyeTimer > bEyeInterval) 20 { 21 bEyeCount = (bEyeCount + 1)% 2; 22 bEyeTimer %= bEyeInterval; 23 24 if (bEyeCount == 0) 25 { 26 //眼睛睜開保持的時間隨機 27 bEyeInterval = Math.random() * 1500 + 2000; //[2000,3500) 28 } else 29 { 30 //眼睛閉上保持時間固定為100ms 31 bEyeInterval = 100; 32 } 33 } 34 } 35 36 function gameloop() { 37 eyeDraw(); 38 }