在web開發中，GIF動畫效果是隨處可見，比如常見的loading加載、人物奔跑的gif圖片等等，那么這些都是怎么實現的呢？其實實現的原理很簡單，簡而言之，這些所謂的動畫都是一幀一幀的圖片經過一段時間的間隔做出位移而來的；譬如，我們在PS里面制作GIF動畫，首先要把每一幀所需要的圖片制作出來，然后再通過導出的方式把GIF圖片保存下來；相信會PS的同學，都可以熟練的制作一個基本的GIF動畫圖片；在web開發中，要實現這樣的gif圖片，也有很多方法；
方法一：利用css3 animation的steps實現spirit精靈動畫；
在應用 CSS3 漸變/動畫時，有個控制時間的屬性 <timing-function> 。它的取值中除了常用到的 三次貝塞爾曲線 以外，還有個讓人比較困惑的 steps() 函數。
steps() 第一個參數 number 為指定的間隔數（必須是正整數），即把動畫分為 n 步階段性展示，第二個參數默認為 end，設置最后一步的狀態，start 為結束時的狀態，end 為開始時的狀態。
那么有了這個steps()，我們就可以實現web中常見的Sprite 精靈動畫了，見demo：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> <style> .bird{background: url(bird.png);width: 140px;height:85px;animation: bird 2s steps(8) infinite; } @keyframes bird{ from { background-position: 0 0; } to { background-position: -800% 0px; } } </style> </head> <body> <div class="bird"></div> </body> </html>
DEMO地址：http://codepen.io/jonechen/pen/bprdBa
方法二：利用html5 canvas實現gif圖片；
利用canvas的drawImage把含有幀的圖片加載到canvas中去，再結合js實現動畫，見demo：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas幀--實現動畫</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>
DEMO地址：http://codepen.io/jonechen/pen/NNvqdy
以上兩種方法實現的前提是，需要有一張已繪制幀的圖片，有了圖片才可進行幀的動畫；兩種方法相對比，方法一很明顯更加的簡單，方法二略顯復雜！利用方法二可以控制動畫的播放、暫停以及幀率；有興趣的可以嘗試下！