HTML5で画像アニメーション効果を追加する方法-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

HTML5で画像アニメーション効果を追加する方法

coldplay.xixi

Mar 04, 2021 pm 03:35 PM

html5

HTML5 で画像アニメーション効果を追加する方法: 1. CSS3 アニメーションの手順を使用してスピリットアニメーションを実装します; 2. HTML5 キャンバスを使用して GIF 画像を実装します。

HTML5で画像アニメーション効果を追加する方法

このチュートリアルの動作環境: Windows7 システム、html5&&css3 バージョン、DELL G3 コンピューター。

html5 画像アニメーション効果を追加する方法:

方法 1: CSS3 アニメーションの手順を使用して精霊スプライトアニメーションを実装します。 CSS3 グラデーション/アニメーションを適用する場合、時間を制御する属性があります

。一般的に使用される 3 次ベジェ曲線に加えて、混乱を招く steps() 関数もあります。

steps()

最初のパラメータ番号は、指定された間隔番号 (正の整数である必要があります) です。つまり、アニメーションは段階的に表示するために n ステップに分割されます。2 番目のパラメータはデフォルトです。最後のステップのステータスを設定し、start は終了時のステータス、end は先頭のステータスを設定します。この手順 () を使用すると、Web に一般的なスプライトアニメーションを実装できます。デモを参照してください:

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

ログイン後にコピー

方法 2: html5 キャンバスを使用して GIF 画像を実装します。

キャンバスのdrawImageを使用して、フレームを含む画像をキャンバスにロードし、それらをjsと組み合わせてアニメーションを実装します。デモを参照してください:

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

ログイン後にコピー