教你如何在网页上用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