標籤：log i++ web out c51 架構 llb com anim
以小魚搖尾巴和眨眼睛為例
動畫思路：
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, dust20 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 })();View Code
第二步：搖動尾巴
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 //眼睛閉上保持時間固定為100ms31 bEyeInterval = 100;32 }33 }34 }35 36 function gameloop() {37 eyeDraw();38 }
js通過迴圈多張圖片實現動畫效果
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
