均一なアニメーション効果を実現するJavaScript

この記事の例では、JavaScriptで等速アニメーションを実装するための具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

実装のアイデア:

1. アニメーション効果を実現するために、主にタイミング関数setInterval()を使用します。
2. アニメーションを関数にカプセル化して、繰り返し記述することなく複数の要素から呼び出すことができる。
3. アニメーション関数は、要素オブジェクト、ターゲットオフセット、コールバック関数のパラメータを受け取ります。① 関数内にタイミング関数を追加し、タイミング関数に名前を付け、後でタイミング関数をクリアするためにタイミング関数名を使用します。② タイミング関数内の処理プログラム:
a. 固定ステップ移動値を指定し、要素オブジェクトのオフセットが一定の速度で変化するように設定します - 例: obj.style.left = obj.offsetLeft + 5 + 'px';
b. オフセットが目標値に達したかどうかを判断し、達した場合はアニメーションを停止します - - -
タイマー間隔をクリアします。
そしてアニメーションが停止したら、コールバック関数があるかどうかを判断し、コールバック関数がある場合はコールバック関数を実行します。
4. アニメーション関数の先頭にクリアタイマー関数を追加して、前のアニメーション効果をクリアします - - -clearInterval(obj.timer);
アニメーションをトリガーするには、ボタンをクリックする必要がある場合があります。クリアボタンを追加しないと、アニメーション効果が重ね合わされ、ボタンを繰り返しクリックするとどんどん速くなります。
5. アニメーション関数を参照用のjsファイルにカプセル化することもできます。

ヒント:上記は 1 つの方法にすぎません。必要に応じてさまざまなアニメーション効果を調整できます。

コード例:

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ユニフォームアニメーション</title>
    <スタイル>
        。箱 {
            位置: 相対的;
            幅: 1000ピクセル;
            上マージン: 20px;
        }
        
        .シャオフリ{
            位置: 絶対;
            上: 0;
            左: 0;
            幅: 150ピクセル;
            高さ: 150px;
        }
        
        .pikaqu {
            位置: 絶対;
            上: 150px;
            左: 0;
            幅: 200ピクセル;
            高さ: 150px;
        }
    </スタイル>
</head>

<本文>
    <button class="btn1">クリックすると小さなキツネが動きます</button>
    <button class="btn2">クリックしてピカチュウを移動します</button>
    <div class="box">
        <img src="images/little fox.jpg" alt="" class="xiaohuli">
        <img src="images/Pikachu.jpg" alt="" class="pikaqiu">
    </div>
    <スクリプト>
        var btn1 = document.querySelector('.btn1');
        var btn2 = document.querySelector('.btn2');
        var xiaohuli = document.querySelector('.xiaohuli');
        var pikaqiu = document.querySelector('.pikaqiu');

        btn1.addEventListener('クリック', 関数() {
            アニメーション(xiaohuli、300);
        })

        btn2.addEventListener('クリック', 関数() {
            アニメーション(ピカキウ、450);
        })

        // アニメーション関数 obj アニメーションオブジェクト、ターゲット ターゲットの左オフセット、コールバック コールバック関数 function animate(obj, target, callback) {
            タイマー間隔をクリアします。
            obj.timer = setInterval(関数() {

                obj.style.left = obj.offsetLeft + 5 + 'px';

                obj.offsetLeft >= ターゲットの場合 {
                    // アニメーションを停止します clearInterval(obj.timer);
                    // コールバック関数がある場合は、コールバック関数を実行します。if (callback) {
                        折り返し電話（）;
                    }
                }


            }, 30);
        }
    </スクリプト>
</本文>

</html>

ページ効果: