教你如何在網頁上用H5實現動畫效果

時間 2019-12-12

標籤如何網頁上用 h5 實現動畫效果欄目 HTML 简体版

原文原文鏈接

在web開發中，GIF動畫效果是隨處可見，好比常見的loading加載、人物奔跑的gif圖片等等，那麼這些都是怎麼實現的呢？html

其實實現的原理很簡單，簡而言之，這些所謂的動畫都是一幀一幀的圖片通過一段時間的間隔作出位移而來的；譬如，咱們在PS裏面製做GIF動畫，首先要把每一幀所須要的圖片製做出來，而後再經過導出的方式把GIF圖片保存下來；相信會PS的同窗，均可以熟練的製做一個基本的GIF動畫圖片；在web開發中，要實現這樣的gif圖片，也有不少方法；在這給讀者提供一個思路，就是利用html5 canvas實現動畫效果。html5

利用canvas的drawImage把含有幀的圖片加載到canvas中去，再結合js實現動畫web

<!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>

以上方法實現的前提是，須要有一張已繪製幀的圖片，有了圖片纔可進行幀的動畫；利用該方法能夠控制動畫的播放、暫停以及幀率canvas