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

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

プロセス分析の実装

(1)繰り返して電話をかけるには?

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

コード分​​析:

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

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

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

ターゲット(目標値):どこまで移動するか

コールバック(コールバック関数):同時に実行する関数

(2)緩和効果をどのように達成するか? (イージーモーションアニメーションコアアルゴリズム)

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

コード分​​析:

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

ステップ(移動距離):要素が移動する距離

ターゲット(目標値):どこまで移動するか

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

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

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

コード分​​析:

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

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

(4)対象要素を実際に動かすにはどうすればいいでしょうか?

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

コード分​​析:

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

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

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

(5)なぜこんなにもイライラしたり、どんどん早くなったりするのでしょうか?

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

コード分​​析:

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

クリアする必要がある場所は 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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • スローモーションアニメーション効果を実現するJavaScript
  • JavaScript は左右のスローアニメーション機能を実装します
  • JavaScriptスローモーションアニメーション機能のカプセル化方法
  • スローモーションアニメーションを実現するjs
  • スローモーションアニメーションを実現するJavaScript
  • Tween.js イージング トゥイーン アニメーション アルゴリズムの例
  • jsはゆっくりとしたアニメーションでナビゲーションバー効果を実現します

<<:  Lua モジュールを使用して WAF を実装する Nginx の原理の分析

>>:  検索ボックスのデフォルトテキストを設定します。マウスをクリックするとデフォルトテキストは消えます。

推薦する

2つのウェブサイトページ翻訳プラグインの共有

TranslateThis URL: http://translateth.is Google 翻訳...

CentOS 7にDockerをインストールする

Linuxシステムをお持ちでない場合は、ダウンロードとインストールについてはhttps://www....

nginx で HSTS を有効にしてブラウザを HTTPS アクセスにリダイレクトする方法の詳細な説明

前回の記事では、https を使用したローカルノードサービスアクセスを実装しました。前回の記事の効果...

MySql でメモリ使用量を削減する方法の詳細な説明

序文デフォルトでは、MySQL はデータベース クエリ データをキャッシュするために大きなメモリ ブ...

検索データ表示を実装するJavaScript

この記事ではJavaScript検索のデータ表示コードを参考までに共有します。具体的な内容は以下のと...

異なるブラウザ間で互換性のあるテキスト配置を実現する CSS

フォームのフロントエンド レイアウトでは、テキスト ボックスのプロンプト テキストを両端に揃える必要...

Webpackを使用して複数ページのプログラムを構築するための実装手順

webpack を使用してシングルページのプログラムを構築することは非常に一般的ですが、実際の開発で...

Vueは単一ファイルコンポーネントの完全なプロセス記録を実装します

目次序文単一ファイルコンポーネント基本概念シンプルなローダーコンポーネントコンテンツの解析コンポーネ...

MySQL max_allowed_pa​​cket 設定

max_allowed_pa​​cket は、受け入れるパケットのサイズを設定するために使用される ...

CentOS7 インストール Zabbix 4.0 チュートリアル (イラストとテキスト)

SeLinuxを無効にするsetenforce 0永久に閉店: vi /etc/selinux/c...

js クロージャとガベージ コレクション メカニズムの例の詳細な説明

目次序文文章1. 終了1.1 クロージャとは何ですか? 1.2 クロージャの特性1.3 クロージャを...

vue3 における vuex と pinia の落とし穴

目次導入インストールと使用方法文章の相違点と類似点の簡単な比較VuexとPiniaの長所と短所Pin...

DockerにELKをインストールしてJSON形式のログ分析を実装する方法

ELKとは何ですか? ELK は、Elastic が提供するログ収集およびフロントエンド表示ソリュー...

CSS スティッキー配置位置の詳細な説明: スティッキー問題の落とし穴

前書き: position:sticky は CSS ポジショニングの新しい属性です。相対ポジショニ...