整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
周在給學生講授JavaScript課程中setInterval方法時，想到了我們在網(wǎng)上看到的各類GIF動圖比較有意思，就將其引入到教學中，教學內(nèi)容設計如果通過HTML5與JavaScript實現(xiàn)網(wǎng)頁類似GIF效果的動態(tài)圖。于是在網(wǎng)上搜集了部分gif格式動圖，將每一個Gif動圖分解為一組jpg格式圖片，再采用setInterval與html5 Canvas進行動畫的實現(xiàn)。通過學習可以讓學生進一步了解canvas動畫實現(xiàn)的過程與原理。并將其發(fā)布到頭條，也希望對有興趣的初學者了解HTML5 Canvas等有所幫助。圖片分組圖片素材如下：
素材一
實現(xiàn)動畫的素材我們已經(jīng)給出，主要通過gif動圖導出一組圖片，下面對html5動畫實現(xiàn)過程進行簡單說明。
實現(xiàn)其動畫的基本思路是通過HTML5提供的canvas元素進行圖片的繪制與展示，借助setInterval方法實現(xiàn)間隔指定時間調(diào)用新的圖片實現(xiàn)重新繪圖。其中繪圖主要使用drawImage方法進行繪圖，最終通過圖片依次重繪實現(xiàn)動畫效果。具體實現(xiàn)過程如下：
在頁面body部分添加Canva標簽，設置其id屬性為canv，寬度為600，高度為400,編寫代碼描述如下圖：
添加畫布元素
canvas瀏覽效果
使用Canvas借助JavaScript提供的drawImage方法進行繪圖，需要提供要繪制的圖片資源即繪圖的坐標位置。該方法原型如下：
drawImage方法原型
因此我們需要加載圖片資源，本例由于需要調(diào)用多個img實現(xiàn)定時不同圖片的繪制，因此我們可以使用數(shù)組存儲所加載的圖片資源。本例圖片數(shù)量為14，因此我們數(shù)組長度為14。使用素組存儲圖片實現(xiàn)代碼如下：
加載圖片資源代碼
本例設計在頁面加載時自動播放動畫，因此需要在JavaScript腳本中添加頁面onload事件，在事件中編寫繪圖相關代碼，主要代碼包括獲取畫布canva與實例化繪圖對象context。部分代碼描述如下：
onload事件及繪圖初始化
使用setInterval方法實現(xiàn)動畫主要需要定義回調(diào)函數(shù)與回調(diào)函數(shù)觸發(fā)執(zhí)行的周期，本例中我們使用匿名函數(shù)作為回調(diào)函數(shù)，觸發(fā)周期設置為100毫秒。setInterval函數(shù)定義如下：
setInterval函數(shù)
在定義完函數(shù)之后可在其匿名函數(shù)函數(shù)體部分寫入繪圖方法dramImage(),實現(xiàn)周期調(diào)用不同圖片資源進行繪圖，最終展示出動畫效果。為了保證循環(huán)調(diào)用14張圖片，我們需要設置一計數(shù)全局變量i，由于我們圖片采用數(shù)組存儲，下標為數(shù)組，且從0-13進行編號，因此當計數(shù)值小于13時自動+1，指向下一數(shù)組下標，當為13時，設置計數(shù)值為0，回到數(shù)組第一元素，最終實現(xiàn)數(shù)組訪問下標的循環(huán)。setInterval實現(xiàn)完整代碼如下：
setInterval完整代碼
HTML動畫效果展示
本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可以聯(lián)系作者，共同探討。期待大家關注！如需案例完整代碼請關注并私信，往期前端設計文章鏈接如下：
web開發(fā)中，GIF動畫效果是隨處可見，比如常見的loading加載、人物奔跑的gif圖片等等，那么這些都是怎么實現(xiàn)的呢？
其實實現(xiàn)的原理很簡單，簡而言之，這些所謂的動畫都是一幀一幀的圖片經(jīng)過一段時間的間隔做出位移而來的；譬如，我們在PS里面制作GIF動畫，首先要把每一幀所需要的圖片制作出來，然后再通過導出的方式把GIF圖片保存下來；相信會PS的同學，都可以熟練的制作一個基本的GIF動畫圖片；在web開發(fā)中，要實現(xiàn)這樣的gif圖片，也有很多方法；在這給讀者提供一個思路，就是利用html5 canvas實現(xiàn)動畫效果。
利用canvas的drawImage把含有幀的圖片加載到canvas中去，再結(jié)合js實現(xiàn)動畫
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>canvas幀--實現(xiàn)動畫</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>
以上方法實現(xiàn)的前提是，需要有一張已繪制幀的圖片，有了圖片才可進行幀的動畫；利用該方法可以控制動畫的播放、暫停以及幀率
web開發(fā)中，GIF動畫效果是隨處可見，比如常見的loading加載、人物奔跑的gif圖片等等，那么這些都是怎么實現(xiàn)的呢？
其實實現(xiàn)的原理很簡單，簡而言之，這些所謂的動畫都是一幀一幀的圖片經(jīng)過一段時間的間隔做出位移而來的；譬如，我們在PS里面制作GIF動畫，首先要把每一幀所需要的圖片制作出來，然后再通過導出的方式把GIF圖片保存下來；相信會PS的同學，都可以熟練的制作一個基本的GIF動畫圖片；在web開發(fā)中，要實現(xiàn)這樣的gif圖片，也有很多方法；在這給讀者提供一個思路，就是利用html5 canvas實現(xiàn)動畫效果。
利用canvas的drawImage把含有幀的圖片加載到canvas中去，再結(jié)合js實現(xiàn)動畫
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>canvas幀--實現(xiàn)動畫</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>
以上方法實現(xiàn)的前提是，需要有一張已繪制幀的圖片，有了圖片才可進行幀的動畫；利用該方法可以控制動畫的播放、暫停以及幀率
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
