HTML5添加图片动画效果的方法是什么-群英

您现在的位置是：群英 > 开发技术 > web开发

HTML5添加图片动画效果的方法是什么

Admin发表于 2022-05-14 15:02:071009 次浏览

上一篇： HTML5的video播放失败怎么解决

下一篇：如何用HTML5实现一个简易的时钟

相信很多人对“HTML5添加图片动画效果的方法是什么”都不太了解，下面群英小编为你详细解释一下这个问题，希望对你有一定的帮助

html5添加图片动画效果的方法：1、利用css3 animation的steps实现spirit精灵动画；2、利用html5 canvas实现gif图片。

本教程操作环境：windows7系统、html5&&css3版，DELL G3电脑。

html5添加图片动画效果的方法：

方法一：利用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></div>
    </body>
</html>

方法二：利用html5 canvas实现gif图片；

利用canvas的drawImage把含有帧的图片加载到canvas中去，再结合js实现动画，见demo：

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

感谢各位的阅读，以上就是“HTML5添加图片动画效果的方法是什么”的内容了，通过以上内容的阐述，相信大家对HTML5添加图片动画效果的方法是什么已经有了进一步的了解，如果想要了解更多相关的内容，欢迎关注群英网络，群英网络将为大家推送更多相关知识点的文章。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

标签：图片动画效果

上一篇： HTML5的video播放失败怎么解决

下一篇：如何用HTML5实现一个简易的时钟