多种方法实现H5网页GIF图片动画效果

最新推荐文章于 2025-07-07 19:48:32 发布

qq_44943584

最新推荐文章于 2025-07-07 19:48:32 发布

阅读量7.4k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_44943584/article/details/89416351

本文展示了如何使用CSS3的steps()方法和Canvas API来创建H5网页中的GIF图片动画效果。通过CSS3精灵动画和Canvas帧动画的示例代码，详细解释了两种方法的工作原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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>CSS3 spirit精灵动画</title>
       <style>
       .bird{background: url(http://www.cj365.cc/demo/bird/bird.png);width: 140px;height:85px;animation: bird 2s steps(8) infinite;position: absolute;top: 50%;left: 50%;margin-top: -43px;margin-left: -70px;}
       @keyframes bird{
           from {
               background-position: 0 0;
           }
           to {
               background-position: -800% 0px;
           }
       }
       </style>
   </head>
   <body>
       <div class="bird"></div>
   </body>
</html>

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