How to add image animation effects in html5-H5 Tutorial-php.cn

How to add image animation effects in html5

coldplay.xixi

Release： 2023-01-03 09:27:42

Original

5840 people have browsed it

How to add image animation effects in html5: 1. Use the steps of css3 animation to implement spirit animation; 2. Use html5 canvas to implement gif images.

How to add image animation effects in html5

The operating environment of this tutorial: windows7 system, html5&&css3 version, DELL G3 computer.

html5 Method to add image animation effects:

Method 1: Use the steps of css3 animation to implement spirit sprite animation;

When applying CSS3 gradient/animation, there is an attribute that controls the time<timing-function>. In addition to the commonly used cubic Bezier curve, there is also a confusing steps() function.

steps() The first parameter number is the specified interval number (must be a positive integer), that is, the animation is divided into n steps for staged display. The second parameter defaults to end. Set the status of the last step, start is the status at the end, and end is the status at the beginning.

With this steps(), we can implement the common sprite animation in the web. See 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>

Copy after login

Method 2: Use html5 canvas to implement gif images;

Use canvas's drawImage to load images containing frames into canvas, and then combine them with js to implement animation. See 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 = &#39;http://www.cj365.cc/demo/bird/bird.png&#39;;
    var canvas = document.querySelector(&#39;canvas&#39;);
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    var ctx = canvas.getContext(&#39;2d&#39;);
    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>

Copy after login

Related learning recommendations: html video tutorial

The above is the detailed content of How to add image animation effects in html5. For more information, please follow other related articles on the PHP Chinese website!