So fügen Sie Bildanimationseffekte in HTML5 hinzu-H5-Tutorial-php.cn

So fügen Sie Bildanimationseffekte in HTML5 hinzu

coldplay.xixi

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

Original

5908 Leute haben es durchsucht

So fügen Sie Bildanimationseffekte in HTML5 hinzu: 1. Verwenden Sie die Schritte der CSS3-Animation, um Spirit-Animationen zu implementieren. 2. Verwenden Sie HTML5-Canvas, um GIF-Bilder zu implementieren.

So fügen Sie Bildanimationseffekte in HTML5 hinzu

Die Betriebsumgebung dieses Tutorials: Windows7-System, HTML5- und CSS3-Version, DELL G3-Computer.

So fügen Sie Bildanimationseffekte in HTML5 hinzu:

Methode 1: Verwenden Sie die Schritte der CSS3-Animation, um eine Spirit-Sprite-Animation zu implementieren.

Beim Anwenden von CSS3-Verläufen/-Animationen gibt es ein Attribut, das die Zeit steuert <timing-function> . Zusätzlich zur häufig verwendeten kubischen Bezier-Kurve gibt es auch eine verwirrende Funktion steps(). <timing-function> 。它的取值中除了常用到的三次贝塞尔曲线以外，还有个让人比较困惑的 steps() 函数。

steps()

steps() Die erste Parameternummer ist die angegebene Intervallnummer (muss eine positive ganze Zahl sein), d. h. die Animation ist für die stufenweise Anzeige in n Schritte unterteilt. Der zweite Parameter ist standardmäßig auf „Ende“ eingestellt. Dies legt den letzten Schrittzustand fest, start ist der Zustand am Ende und end ist der Zustand am Anfang.

Mit diesen Schritten () können wir die übliche Sprite-Animation im Web implementieren:

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

Nach dem Login kopieren

Methode 2: Verwenden Sie HTML5 Canvas, um GIF-Bilder zu implementieren.

Verwenden Sie das drawImage von Canvas, um Frames zu konvertieren, die das Bild enthalten in Canvas und kombinieren Sie es dann mit js, um Animationen zu implementieren. Siehe 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>

Nach dem Login kopieren

Verwandte Lernempfehlungen: HTML-Video-Tutorial

🎜

Das obige ist der detaillierte Inhalt vonSo fügen Sie Bildanimationseffekte in HTML5 hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!