原標(biāo)題： 教你如何在網(wǎng)頁上用H5實現(xiàn)動畫效果

在web開發(fā)中，GIF動畫效果是隨處可見，比如常見的loading加載、人物奔跑的gif圖片等等，那么這些都是怎么實現(xiàn)的呢？

其實實現(xiàn)的原理很簡單，簡而言之，這些所謂的動畫都是一幀一幀的圖片經(jīng)過一段時間的間隔做出位移而來的；譬如，我們在PS里面制作GIF動畫，首先要把每一幀所需要的圖片制作出來，然后再通過導(dǎo)出的方式把GIF圖片保存下來；相信會PS的同學(xué)，都可以熟練的制作一個基本的GIF動畫圖片；在web開發(fā)中，要實現(xiàn)這樣的gif圖片，也有很多方法；在這給讀者提供一個思路，就是利用html5 canvas實現(xiàn)動畫效果。

利用canvas的drawImage把含有幀的圖片加載到canvas中去，再結(jié)合js實現(xiàn)動畫

canvas幀--實現(xiàn)動畫

*{padding:0;margin:0;}

canvas{display:block;background:white}

<>

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. = 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);

}

>

以上方法實現(xiàn)的前提是，需要有一張已繪制幀的圖片，有了圖片才可進行幀的動畫；利用該方法可以控制動畫的播放、暫停以及幀率返回搜狐，查看更多

責(zé)任編輯：

總結(jié)

以上是生活随笔為你收集整理的怎么用html5动画效果,教你如何在网页上用H5实现动画效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。