JavaScript はスローモーションアニメーションのカプセル化と使用法を説明します

プロセス分析の実装

（１）繰り返して電話をかけるには？

答え: 関数をカプセル化して一度だけ呼び出す

コード分析:

function animate(obj, target, callback) { //詳細な実装手順};

animate: (アニメーション機能)

obj (アニメーションオブジェクト): アニメーション効果が追加されるオブジェクト

ターゲット（目標値）：どこまで移動するか

コールバック（コールバック関数）：同時に実行する関数

（２）緩和効果をどのように達成するか？（イージーモーションアニメーションコアアルゴリズム）

答え: 移動距離 = (目標値 - 現在のボックスの位置) / 10。移動距離は停止するまで徐々に減少し、緩和原理が実現されます。

コード分析:

var ステップ = (ターゲット - obj.offsetLeft) / 10;

ステップ（移動距離）：要素が移動する距離

ターゲット（目標値）：どこまで移動するか

obj.offsetLeft (ボックスの現在の位置): ボックスの左側からの現在の距離

（３）なぜ指定された位置に移動できないのか？（目標距離は500ピクセルで、496.4で止まります）

答え: 四捨五入する必要があるため、正の数は切り上げられ、負の数は切り捨てられます。

コード分析:

ステップ = ステップ > 0 ? Math.ceil(step) : Math.floor(step);

setp が移動する距離が正の数の場合は切り上げられ、負の数の場合は切り捨てられ、三項式を使用してコードが最適化され、全体的な品質が向上します。

（４）対象要素を実際に動かすにはどうすればいいでしょうか？

A: タイマーを追加し、要素にリアルタイムの移動距離（ステップ長）を割り当てます

コード分析:

 var timer = setInterval(function () { //詳細な実装コード}, 15); //タイマーを追加 obj.style.left = obj.offsetLeft + step + 'px'; //ステップの長さ

1. タイマーをクリアしやすくするためにタイマーに名前を付けます。時間を15に設定します（実際の開発では15がよく使用されます）

2. 要素の左側の値 = 要素から左までの距離 + 移動距離 + 'px' (px 単位を追加することを忘れないでください)。実装の原則は、アニメーションの効果を実現するために、要素に最新の値を継続的に割り当てることです。

（５）なぜこんなにもイライラしたり、どんどん早くなったりするのでしょうか？

回答: タイマーは繰り返し追加されるため、呼び出されるたびにタイマーをクリアする必要があります。

コード分析:

タイマーの間隔をクリアします。

クリアする必要がある場所は 2 つあります。1 つ目は、ゴーストや速度低下を回避するためにイージングアニメーション関数が呼び出されたときです。2 つ目は、要素が指定された位置に到達したかどうかを判断するときです。指定された位置に到達した場合は、タイマーを停止します。

ケーステスト:

<!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>
    <スタイル>
        .スライダーバー{
            /* 幅: 240px; */
            /* 高さ: 40px; */
            /* 親ボックスの配置は実際の要件に基づきます */
            位置: 絶対;
            右: 0;
            上: 100px;
            テキスト配置: 中央;
            行の高さ: 40px;
            /* 表示: ブロック; */
            幅: 40px;
            高さ: 40px;
            カーソル: ポインタ;
        }
        .sp {
            位置: 相対的;
            色: #fff;
        }
        
        .con {
            /* 親ボックス内でフロートするように絶対位置を設定します*/
            位置: 絶対;
            左: 0;
            上: 0;
            幅: 200ピクセル;
            高さ: 40px;
            背景色: ピンク;
            Zインデックス: -1;
            色: #fff;
        }
    </スタイル>
    <script src="./animate.js"></script>
</head>
 
<本文>
    <div class="スライダーバー">
        <span class="sp">←</span>
        <div class="con">問題のフィードバック</div>
    </div>
 
    <スクリプト>
        var スライダーバー = document.querySelector('.sliderbar');
        // var sp = document.querySelector('.sp');
        var con = document.querySelector('.con');
        sliderbar.addEventListener('mouseenter', 関数() {
            //アニメーション化(obj、ターゲット、コールバック);
            アニメーション(con, -160, 関数() {
                スライダーバー.children[0].innerHTML = '→';
            });
        })
        sliderbar.addEventListener('mouseleave', 関数() {
            //アニメーション化(obj、ターゲット、コールバック);
            アニメーション(con, 0, 関数() {
                スライダーバー.children[0].innerHTML = '←';
 
            });
        })
    </スクリプト>
</本文>
</html>

全体的な考え方としては、ボックスにマウスイベントを追加してアニメーション関数を呼び出し、最終的な効果を実現することです。

操作効果:

イージングアニメーション関数 (animate.js) の最終的なカプセル化コード:

関数 animate(obj, target, callback) {
//問題を回避するためにタイマーを一度クリアする関数を呼び出します
クリア間隔(obj.timer)
//タイマーを追加
obj.timer = setInterval(関数() {
//ステップ値がタイマーに書き込まれ、整数に変換されます（切り上げ）
var ステップ = (ターゲット - obj.offsetLeft) / 10;
//整数は大きいほうから取得され、負の数は小さいほうから取得されます
ステップ = ステップ > 0 ? Math.ceil(step) : Math.floor(step);
obj.offsetLeft == ターゲットの場合 {
// 指定された位置に到達したらタイマーを停止します
タイマー間隔をクリアします。
//タイマーが終了した後にコールバック関数が書き込まれます
コールバック && コールバック();
}
//各ステップの値を徐々に小さい値に変更します
obj.style.left = obj.offsetLeft + ステップ + 'px';
}, 15);
}

人生は止まらず、学びは止まらず、キーボードはすり切れ、月給は一万を超えます！さあ、コーダー

JavaScript スローモーションアニメーションのカプセル化と使用に関するこの記事はこれで終わりです。JavaScript スローモーションアニメーションの関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: