Comment ajouter des effets d'animation d'image en HTML5-Tutoriel H5-php.cn

Comment ajouter des effets d'animation d'image en HTML5

coldplay.xixi

Libérer： 2023-01-03 09:27:42

original

5839 Les gens l'ont consulté

Comment ajouter des effets d'animation d'image en HTML5 : 1. Utilisez les étapes de l'animation CSS3 pour implémenter l'animation spirituelle ; 2. Utilisez le canevas HTML5 pour implémenter des images GIF.

Comment ajouter des effets d'animation d'image en HTML5

L'environnement d'exploitation de ce tutoriel : système windows7, version html5&&css3, ordinateur DELL G3.

Comment ajouter des effets d'animation d'image en HTML5 :

Méthode 1 : Utilisez les étapes de l'animation CSS3 pour implémenter l'animation de sprite spirituel

Lors de l'application d'un dégradé/animation CSS3, il existe un attribut qui contrôle le temps

. En plus de la courbe de Bézier cubique couramment utilisée, il existe également une fonction <timing-function> déroutante dans sa valeur. steps()

Le premier numéro de paramètre est le numéro d'intervalle spécifié (doit être un entier positif), c'est-à-dire que l'animation est divisée en n étapes pour un affichage par étapes. Le deuxième paramètre est par défaut terminé, ce qui définit le. le statut de la dernière étape, le début est l'état à la fin, la fin est l'état au début. steps()

Avec ces étapes(), nous pouvons réaliser l'animation de sprite commune sur le Web. Voir la démo :

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

Copier après la connexion

Méthode 2 : Utiliser le canevas html5 pour implémenter des images gif ; Utilisez drawImage de Canvas pour charger des images contenant des cadres dans Canvas, puis combinez-le avec js pour implémenter une animation. Voir la démo :

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

Copier après la connexion

Recommandations d'apprentissage associées :