周在給學生講授JavaScript課程中setInterval方法時，想到了我們在網上看到的各類GIF動圖比較有意思，就將其引入到教學中，教學內容設計如果通過HTML5與JavaScript實現網頁類似GIF效果的動態圖。于是在網上搜集了部分gif格式動圖，將每一個Gif動圖分解為一組jpg格式圖片，再采用setInterval與html5 Canvas進行動畫的實現。通過學習可以讓學生進一步了解canvas動畫實現的過程與原理。并將其發布到頭條，也希望對有興趣的初學者了解HTML5 Canvas等有所幫助。圖片分組圖片素材如下：

實現動畫的素材我們已經給出，主要通過gif動圖導出一組圖片，下面對html5動畫實現過程進行簡單說明。

基本思路

實現其動畫的基本思路是通過HTML5提供的canvas元素進行圖片的繪制與展示，借助setInterval方法實現間隔指定時間調用新的圖片實現重新繪圖。其中繪圖主要使用drawImage方法進行繪圖，最終通過圖片依次重繪實現動畫效果。具體實現過程如下：

HTML5 Canvas設置

在頁面body部分添加Canva標簽，設置其id屬性為canv，寬度為600，高度為400,編寫代碼描述如下圖：

加載圖片資源

使用Canvas借助JavaScript提供的drawImage方法進行繪圖，需要提供要繪制的圖片資源即繪圖的坐標位置。該方法原型如下：

因此我們需要加載圖片資源，本例由于需要調用多個img實現定時不同圖片的繪制，因此我們可以使用數組存儲所加載的圖片資源。本例圖片數量為14，因此我們數組長度為14。使用素組存儲圖片實現代碼如下：

定義頁面加載事件onload

本例設計在頁面加載時自動播放動畫，因此需要在JavaScript腳本中添加頁面onload事件，在事件中編寫繪圖相關代碼，主要代碼包括獲取畫布canva與實例化繪圖對象context。部分代碼描述如下：

使用setInterval實現動畫

使用setInterval方法實現動畫主要需要定義回調函數與回調函數觸發執行的周期，本例中我們使用匿名函數作為回調函數，觸發周期設置為100毫秒。setInterval函數定義如下：

在定義完函數之后可在其匿名函數函數體部分寫入繪圖方法dramImage(),實現周期調用不同圖片資源進行繪圖，最終展示出動畫效果。為了保證循環調用14張圖片，我們需要設置一計數全局變量i，由于我們圖片采用數組存儲，下標為數組，且從0-13進行編號，因此當計數值小于13時自動+1，指向下一數組下標，當為13時，設置計數值為0，回到數組第一元素，最終實現數組訪問下標的循環。setInterval實現完整代碼如下：

實現效果展示

本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可以聯系作者，共同探討。期待大家關注！如需案例完整代碼請關注并私信，往期前端設計文章鏈接如下：

1. 前端設計-JavaScript中的值、引用傳遞與垃圾回收
2. 前端設計-JavaScript美女拼圖游戲開發實例
3. 前端設計- JavaScript驗證碼制作及實例分析
4. 前端設計-Ajax技術及實例展示
5. 前端設計-響應式頁面開發基礎
6. Web開發前端、后端與全棧的區別是什么？

多特效代碼請添加HTML5前端交流群581549454

廢話不多說，上代碼！

下面是兩段CSS代碼

lib.css

@charset 'utf-8';

html {

width: 100%;

height: 100%;

}

body {

width: 100%;

height: 100%;

overflow: hidden;

background-image: -webkit-linear-gradient(90deg, #395ecb 0%, #3657be 35%, #242161 75%, #1a0531 100%);

background-image: -moz-linear-gradient(90deg, #395ecb 0%, #3657be 35%, #242161 75%, #1a0531 100%);

background-image: -ms-linear-gradient(90deg, #395ecb 0%, #3657be 35%, #242161 75%, #1a0531 100%);

background-image: linear-gradient(0deg, #395ecb 0%, #3657be 35%, #242161 75%, #1a0531 100%);

perspective: 1000px;

}

.bg0 {

width: 500px;

height: 500px;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

background: url(../images/bg0.png) no-repeat center center;

background-size: 150%;

}

.bg1 {

width: 100%;

height: 100%;

background: url(../images/bg1.png) no-repeat center center;

}

.hx-box {

top: 50%;

left: 50%;

width: 500px;

height: 500px;

transform-style: preserve-3d;

transform: translate(-50%, -50%) rotateY(75deg);

}

.hx-box ul {

width: 500px;

height: 500px;

transform-style: preserve-3d;

animation: hxz 20s linear infinite;

}

@keyframes hxz {

0% {

transform: rotateX(0deg);

}

100% {

transform: rotateX(-360deg);

}

}

.hx-box ul li {

width: 500px;

height: 500px;

border: 4px solid #5ec0ff;

border-radius: 1000px;

}

.hx-box ul li span {

display: block;

width: 100%;

height: 100%;

background: url(../images/hx.png) no-repeat center center;

background-size: 100% 100%;

animation: hx 4s linear infinite;

}

@keyframes hx {

to {

transform: rotate(360deg);

}

}

.hx-k2 {

transform: rotateX(60deg) rotateZ(60deg)

}

.hx-k3 {

transform: rotateX(-60deg) rotateZ(-60deg)

}

tabris.css

@charset 'utf-8';article,aside,details,figcaption,figure,footer,header,hgroup,hr,main,menu,nav,section,summary{display:block}hr,img{border:0}pre,textarea{overflow:auto}hr,legend,td,th{padding:0}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{color:#333;font-size:1em;line-height:1.42857143;font-family:Helvetica,'Hiragino Sans GB','Microsoft Yahei','微軟雅黑',Arial,sans-serif}body,form,h1,h2,h3,h4,h5,h6,ol,p,ul{margin:0}ol,ul{padding-left:0;list-style-type:none}h1,h2,h3,h4,h5,h6{font-size:1em;font-weight:400}a{text-decoration:none;background-color:transparent;color:inherit}a:active,a:hover{outline:0}li{list-style:none}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}.vm,audio,canvas,iframe,img,svg,video{vertical-align:middle}audio:not([controls]){display:none;height:0}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}mark{background:#ff0;color:#000}small{font-size:80%}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{height:1px;border-top:1px solid #ccc;margin:1em 0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0}textarea{resize:vertical}table{border-collapse:collapse;border-spacing:0}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}.browserupgrade{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0}.dv{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.dv.dvv:active,.dv.dvv:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}.dn{display:none}.db{display:block}.fix:after,.fix:before{content:" ";display:table}.fix:after{clear:both}.fl{float:left}.fr{float:right}.pr{position:relative}.pa,.pa0{position:absolute}.pa0{left:0;top:0}.oh{overflow:hidden}.wh{width:100%;height:100%}.bo{border:1px solid red}.mg{margin-left:auto;margin-right:auto}.tc{text-align: center;}.wp{margin:0 auto}*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

網站格式代碼

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1">

<title>CSS3仿QQ瀏覽器官網彗星動畫背景特效</title>

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

<link rel="stylesheet" href="css/tabris.css">

<link rel="stylesheet" href="css/lib.css">

</head>

<body><script src="/demos/googlegg.js"></script>

<div class="bg0 pa">

<div></div>

</div>

<div class="hx-box pa">

<ul>

<li class="hx-k1 pa0">

<span></span>

</li>

<li class="hx-k2 pa0">

<span></span>

</li>

<li class="hx-k3 pa0">

<span></span>

</li>

</ul>

</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">

<p>適用瀏覽器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下瀏覽器。</p>

<p>來源：<a target="_blank">素材</a></p>

</div>

</body>

</html>