プロセス分析の実装(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) の最終的なカプセル化コード:
人生は止まらず、学びは止まらず、キーボードはすり切れ、月給は一万を超えます!さあ、コーダー JavaScript スローモーションアニメーションのカプセル化と使用に関するこの記事はこれで終わりです。JavaScript スローモーションアニメーションの関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Lua モジュールを使用して WAF を実装する Nginx の原理の分析
>>: 検索ボックスのデフォルトテキストを設定します。マウスをクリックするとデフォルトテキストは消えます。
TranslateThis URL: http://translateth.is Google 翻訳...
Linuxシステムをお持ちでない場合は、ダウンロードとインストールについてはhttps://www....
前回の記事では、https を使用したローカルノードサービスアクセスを実装しました。前回の記事の効果...
序文デフォルトでは、MySQL はデータベース クエリ データをキャッシュするために大きなメモリ ブ...
この記事ではJavaScript検索のデータ表示コードを参考までに共有します。具体的な内容は以下のと...
フォームのフロントエンド レイアウトでは、テキスト ボックスのプロンプト テキストを両端に揃える必要...
webpack を使用してシングルページのプログラムを構築することは非常に一般的ですが、実際の開発で...
目次序文単一ファイルコンポーネント基本概念シンプルなローダーコンポーネントコンテンツの解析コンポーネ...
max_allowed_packet は、受け入れるパケットのサイズを設定するために使用される ...
SeLinuxを無効にするsetenforce 0永久に閉店: vi /etc/selinux/c...
目次序文文章1. 終了1.1 クロージャとは何ですか? 1.2 クロージャの特性1.3 クロージャを...
html <div class="totop" v-show="...
目次導入インストールと使用方法文章の相違点と類似点の簡単な比較VuexとPiniaの長所と短所Pin...
ELKとは何ですか? ELK は、Elastic が提供するログ収集およびフロントエンド表示ソリュー...
前書き: position:sticky は CSS ポジショニングの新しい属性です。相対ポジショニ...