如何在網(wǎng)頁(yè)上用HTML5實(shí)現(xiàn)動(dòng)畫(huà)效果
時(shí)間：2023-09-14 22:18:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-09-14 22:18:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
如何在網(wǎng)頁(yè)上用HTML5實(shí)現(xiàn)動(dòng)畫(huà)效果：
在web開(kāi)發(fā)中，GIF動(dòng)畫(huà)效果是隨處可見(jiàn)，比如常見(jiàn)的loading加載、人物奔跑的gif圖片等等，那么這些都是怎么實(shí)現(xiàn)的呢？其實(shí)實(shí)現(xiàn)的原理很簡(jiǎn)單，簡(jiǎn)而言之，這些所謂的動(dòng)畫(huà)都是一幀一幀的圖片經(jīng)過(guò)一段時(shí)間的間隔做出位移而來(lái)的；譬如，我們?cè)赑S里面制作GIF動(dòng)畫(huà)，首先要把每一幀所需要的圖片制作出來(lái)，然后再通過(guò)導(dǎo)出的方式把GIF圖片保存下來(lái)；相信會(huì)PS的同學(xué)，都可以熟練的制作一個(gè)基本的GIF動(dòng)畫(huà)圖片；在web開(kāi)發(fā)中，要實(shí)現(xiàn)這樣的gif圖片，也有很多方法；在這給讀者提供一個(gè)思路，就是利用html5 canvas實(shí)現(xiàn)動(dòng)畫(huà)效果。
利用canvas的drawImage把含有幀的圖片加載到canvas中去，再結(jié)合js實(shí)現(xiàn)動(dòng)畫(huà)
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>canvas幀--實(shí)現(xiàn)動(dòng)畫(huà)</title>
<style>
*{padding:0;margin:0;}
canvas{display:block;background:white}
</style>
</head>
<body>
<canvas></canvas>
<script>
var imgPic = new Image();
imgPic.src = '
http://www.cj365.cc/demo/bird/bird.png';
var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext('2d');
imgPic.onload = function () {
drawImg()
}
var i = 0;
var lastTime = new Date().getTime();
var delatime;
var timer = 0;
function drawImg() {
window.requestAnimationFrame(drawImg);
var now = new Date().getTime();
delatime = now - lastTime;
lastTime = now;
timer += delatime;
if (timer > 200) {
i++;
if (i > 7) i = 0;
timer = 0
}
console.log(delatime)
ctx.drawImage(imgPic, i * 140, 0, 140, 85, (canvas.width - 140) / 2, (canvas.height - 85) / 2, 140, 85);
}
</script>
</body>
</html>
以上方法實(shí)現(xiàn)的前提是，需要有一張已繪制幀的圖片，有了圖片才可進(jìn)行幀的動(dòng)畫(huà)；利用該方法可以控制動(dòng)畫(huà)的播放、暫停以及幀率
關(guān)鍵詞：實(shí)現(xiàn),效果
在線咨詢