JavaScript イメージアニメーションに関する小さなデモ_JavaScript ヒント

コードをコピー コードは次のとおりです: 图形アニメーション .de{ font-size:30px;テキスト装飾:なし;フォントファミリー:微软雅黑; color:#ccc;} .de:hover{ color:#933;} /** * ImageLoop.js: 画像アニメーションを実行するための ImageLoop クラス * * コンストラクター引数: * imageId: の IDアニメーション化されるタグ * fps: 1 秒あたりに表示するフレーム数 * FrameURLs: URL の配列、アニメーションのフレームごとに 1 つ * * パブリック メソッド: * start(): アニメーションを開始します (ただし、最初にすべてのフレームが読み込まれるまで待ちます) * stop(): アニメーションを停止します * * パブリック プロパティ: * ロード済み: すべての場合は trueアニメーションのフレームが読み込まれています。 * それ以外の場合は false */ function ImageLoop(imageId, fps, FrameURLs) { // 画像 ID を覚えておいてください。このコンストラクター // はドキュメントがロードされる前に呼び出される可能性があるため、まだ調べないでください。 this.imageId = imageId; // アニメーションのフレーム間の待機時間を計算します this.frameInterval = 1000 / fps; // 各フレームの Image オブジェクトを保持する配列 this.frames = new Array(frameURLs.length); this.image = null; // 要素、ID で検索 this.loaded = false; // すべてのフレームが読み込まれたかどうか this.loadedFrames = 0; // ロードされたフレーム数 this.startOnLoad = false; // ロードが完了したらアニメーションを開始しますか? this.frameNumber = -1; // 現在表示されているフレーム this.timer = null; // setInterval() の戻り値 // Frames[] 配列を初期化し、画像をプリロードします for (var i = 0; i this.frames[i] = 新しい画像(); // 画像オブジェクトを作成します // フレームがいつロードされるかを知るためにイベント ハンドラーを登録します this.frames[i].onload = countLoadedFrames; // 後で定義 this.frames[i].src = FrameURLs[i]; // フレームの画像をプリロードします } // このネストされた関数は、ロードが完了した // フレームの数をカウントするイベント ハンドラーです。すべてロードされると、フラグ // が設定され、要求されていればアニメーションが開始されます。 var ループ = this; 関数 countLoadedFrames() { loop.loadedFrames ; if (loop.loadedFrames ==loop.frames.length) { loop.loaded = true; if (loop.startOnLoad)loop.start(); } } // ここでは、 // アニメーションの次のフレームを表示する関数を定義します。 // setInterval() はメソッドではなく関数のみを呼び出すことができるため、この関数を通常のインスタンス メソッドにすることはできません。そこで、 // ImageLoop オブジェクトへの参照を含むクロージャを作成します。 this._displayNextFrame = function () { // まず、フレーム番号をインクリメントします。モジュロ演算子 (%) は、 // 最後のフレームから最初のフレームまでループすることを意味します loop.frameNumber = (loop.frameNumber 1) % loop.frames.length; // 画像の src プロパティを新しいフレームの URL に更新します loop.image.src =loop.frames[loop.frameNumber].src; }; } /** * このメソッドは ImageLoop アニメーションを開始します。フレーム画像の読み込みがまだ * 完了していない場合は、代わりにフラグを設定して、読み込みが完了するとアニメーションが * 自動的に開始されます */ ImageLoop.prototype.start = function () { if (this.timer != null) return; // すでに開始されています // ロードが完了していない場合は、 if (!this.loaded) this.startOnLoad = true; のときに開始するフラグを設定します。 else { // まだ ID で画像を検索していない場合は、ここで検索してください if (!this.image) this.image = document.getElementById(this.imageId); // 最初のフレームをすぐに表示します this._displayNextFrame(); // そして後続のフレームを表示するタイマーを設定します this.timer = setInterval(this._displayNextFrame, this.frameInterval); } }; /**ImageLoop アニメーションを停止する*/ ImageLoop.prototype.stop = function () { if (this.timer) clearInterval(this.timer); this.timer = null; }; function de() { var anime = new ImageLoop("loop", 1, ["img/img_01.jpg", "img/img_02.jpg",]); var sta = document.getElementById("sta"); var stp = document.getElementById("stp"); sta.onclick = function () { animation.start(); } stp.onclick = function () { animation.stop(); } } window.onload = function () { de(); } 開始 停止

JavaScript イメージ アニメーションに関する小さなデモ_JavaScript ヒント

関連記事

JavaScript イメージアニメーションに関する小さなデモ_JavaScript ヒント