クールな花火効果を実現するjs

クールな花火効果を実現するjs

この記事では、jsを使用してクールな花火効果を実現するための具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

プロセス全体の考え方を明確にする必要があります。

まず、花火の効果を表現するキャンバスを作成し、次に花火のプロセスについて考えます。花火は通常、最初に空に飛び、その後、多くの小さな花火に分散し、それぞれの小さな花火は異なるスタイルと動きを持っていることは誰もが知っています。

全体的なアイデアとしては、まず大きな花火として div を作成します。大きな花火がマウスをクリックした位置に移動すると、大きな花火は消え、その後、さらに小さな花火が生成されます。これらの小さな花火の移動軌跡のスタイルは異なります。

1. 花火の効果を表示するキャンバス(div)を作成する

/*キャンバスの CSS スタイルを設定します*/
#容器 {
        幅: 80%;
        高さ: 600px;
        境界線: 1px 赤実線;
        位置: 相対的;
        マージン: 20px 自動;
        カーソル: ポインタ;
        背景:黒;
    }
<!-- div を設定します -->
<div id="コンテナ"></div>

2. ノードを取得する

 //ノードを取得します var app = document.getElementById('container');
        //アプリのバインディングイベントを設定する app.onclick = function(event) {
                var e = イベント || window.event
               //マウスクリック位置の座標を取得します。var pos = {
                    cy: e.offsetY、
                    cx: e.オフセットX
                }
                新しいFire(アプリ、pos)
            }

花火を実現するプロセス:まずマウスをクリックした位置に移動する大きなdivを実現し、次に多数のdivに広げます

3. まず大きな花火を実装します(乱数メソッド、ランダムカラーメソッド、モーション関数を呼び出す必要があります)

// コンストラクタ関数 Fire(app, pos) {
            // プロパティを変数に設定します this.app = app;
            this.pos = pos;
            // 大きなdivを作成する
            this.bf = document.createElement('div');
            //クラス名を設定します this.bf.className = 'fire';
            // スタイルを設定 this.bf.style.left = this.pos.cx + 'px';
            this.bf.style.background = this.getColor();
            this.app.appendChild(this.bf);
            //モーション関数を呼び出す this.move(this.bf, {
                トップ: this.pos.cy
            }, () => {
                this.bf.remove();
                this.smallFire();
            })
        }

3.1 まず火のスタイルを設定する

これは初期の火の​​スタイルです

 。火 {
        背景: 赤;
        位置: 絶対;
        /* 下を設定すると、マウスのクリック位置を差し引いた最大値が上になります*/
        下: 0px;
        幅: 6px;
        高さ: 6px;
    }

3.2 乱数とランダムカラーを設定する方法(プロトタイプオブジェクト)

//乱数を取得するメソッド Fire.prototype.rand = function(min, max) {
            Math.round(Math.random() * (max - min) + min) を返します。
        }
 
 
//ランダムな色を取得するメソッド Fire.prototype.getColor = function() {
         合計を '#' とします。
         (i = 0; i < 6; i++ とします) {
               合計 += this.rand(0, 15).toString(16)
           }
             合計を返します。
           }

3.3 モーション関数をカプセル化する(プロトタイプオブジェクト)

Fire.prototype.move = function(ele, target, cb) {
                // クリア間隔(times);
                times = setInterval(function() {
                    // コンソールログ(これ);
                    var onOff = true;
                    // 移動の方向とターゲットをトラバースする for (let attr in target) {
                        // attr は移動の属性を表します // console.log(attr);
                        // 要素属性のリアルタイム値を取得する let tmpVal = parseInt(this.getPos(ele, attr))
                            // 速度を計算する
                            // console.log(tmpVal, attr);
                        speed = (target[attr] - tmpVal) / 10とします。
                        // ラウンド速度 = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                        // タイマーを停止し、属性が位置に移動したらスイッチ状態を設定します。if (tmpVal == target[attr]) onOff = true;
                        // 要素を移動します ele.style[attr] = tmpVal + speed + 'px';
                    }
 
                    // スイッチの状態を判定し、タイマーをクリアします for (var moveAttr in target) {
                        // 等しくない場合は、一部の属性が位置に移動されていないことを意味し、タイマーを停止することはできません。if (target[moveAttr] !== parseInt(this.getPos(ele, moveAttr))) {
                            オンオフ = false;
                            壊す;
                        }
                    }
                    オンオフの場合
                        クリア間隔(回);
                        cb && cb();
                    }
                    // コンソールログ(1111);
                }.bind(これ), 30)
            }
            // 要素のリアルタイム位置を取得する関数 Fire.prototype.getPos = function(obj, attr) {
            if (obj.currentStyle) { // CSSスタイルを取得します return obj.currentStyle[attr];
            } それ以外 {
                getComputedStyle(obj)[attr]を返す
            }
        }

以上の手順で、大花火の移動軌跡を取得できます。大花火は指定の位置に移動すると消え、消えた場所から多数の小花火が生成されます。これまでの分析から、小型花火の移動軌跡やスタイルが異なることがわかります。次のステップは、小型花火を実現することです。

4. 小型花火の実施

4.1 samll-fireのスタイル設定

これはsamll-fireの初期特性である

.small-fire {
        幅: 10px;
        高さ: 10px;
        位置: 絶対;
        境界線の半径: 50%;
    }

4.2 小さな花火のプロパティを設定する

//小さな花火 Fire.prototype.smallFire = function() {
            //まず、小さな花火の数を設定します。let num = this.rand(50, 60)
            // それぞれの小さな花火を走査して異なるスタイルを設定します for (let i = 0; i < num; i++) {
                sf = document.createElement('div'); とします。
                sf.className = 'small-fire';
                sf.style.left = this.pos.cx + 'px';
                sf.style.top = this.pos.cy + 'px';
                sf.style.background = this.getColor();
                //コンソールログ(sf);
                //ページに追加 this.app.appendChild(sf);
                //小さな花火の軌道を円運動にします//var top = parseInt(Math.sin(Math.PI / 180 * 360 / num * i) * r) + this.pos.cy;
                //var left = parseInt(Math.cos(Math.PI / 180 * 360 / num * i) * r) + this.pos.cx;
                 // 小さな花火にランダムな位置を指定します。キャンバス内の任意の位置にすることができます。let top = this.rand(0, this.app.offsetHeight - sf.offsetHeight);
                 left = this.rand(0, this.app.offsetWidth - sf.offsetWidth); とします。
                //モーション関数を呼び出す this.move(sf, {
                    トップ: トップ、
                    左: 左
                }、 関数() {
                    sf.remove();
                })
            }
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • 花火効果を実現するための js シミュレーション
  • 花火効果を実現するネイティブJS
  • とても美しいjs花火効果
  • クリック花火効果を実現する js
  • 花火効果を実現するJavaScript(オブジェクト指向)
  • JavaScript でサウンド効果付きの花火効果を実装する
  • JavaScriptは5つの異なる花火効果を実装します

<<:  mysqlはストアドプロシージャを使用してツリーノード取得メソッドを実装します。

>>:  Docker の MySQL コンテナのタイムゾーン問題の修正

推薦する

Nginx プロキシを使用してフロントエンドのクロスドメイン問題を解決する方法

序文Nginx (「エンジン エックス」と発音) は、リバース プロキシ、ロード バランサ、HTTP...

MySQL でシンプルな検索エンジンを実装するためのサンプルコード

目次序文導入ngram全文パーサー全文インデックスを作成する検索方法1. 自然言語検索(自然言語モー...

MySQLクエリで大文字と小文字を区別しない問題を解決する方法

質問最近、SSH フレームワークを使用して実用的なプロジェクトを完了していたときに、長い間悩まされて...

CentOS 7 で Python を 3.6.6 にアップグレードした後に発生する yum エラー問題の解決方法の概要

最近、テスト サーバーのオペレーティング システムを Cent0S 7.5 にアップグレードし、Py...

Dockerコンテナ内のホストのホスト名が取得できない問題の解決方法

Node.js環境でテストが通っています。他の言語でも同様です。環境変数を取得する方法を使うだけです...

NextCloud プライベート クラウド ストレージ ネットワーク ディスクの構築に関する詳細なチュートリアル

Nextcloud は、オープンソースで無料のプライベート クラウド ストレージ ネットワーク ディ...

HTML 学習ノート - HTML 構文の詳細な説明 (必読)

1. HTML マークアップ言語とは何ですか? HTML は、Web ページの情報を表すマークアッ...

Vueはタブ切り替えを実装します

この記事では、タブ切り替えを実装するためのVueの具体的なコードを例として紹介します。具体的な内容は...

XHTML: フレーム構造タグ

フレーム構造タグ <frameset></frameset>フレームを使用す...

純粋な CSS ヘッダーの実装コードを修正

純粋な CSS で固定ヘッダーを実装するのが難しい主な理由は 2 つあります。まず、最大のシェアを持...

JavaScript の組み込み Date オブジェクトの詳細な説明

目次日付オブジェクト日付オブジェクトの作成新しい日付()日付を取得する()取得日()月を取得する()...

Linux NFSメカニズムの動作原理と例の分析

NFS とは何ですか?ネットワークファイルシステムネットワーク上でファイルを保存および整理するための...

MySQLのトランザクションとデータ一貫性処理の問題を分析する

この記事では、セキュリティ、使用方法、同時処理などを通じて、MySQL トランザクションとデータの一...

Tomcat9 Windows サービスのインストールに関する詳細なチュートリアル

1. 準備1.1 service.bat を含む tomcat 圧縮パッケージをダウンロードします。...

Apache POIの基本的な使い方の詳しい説明

目次基本的な紹介入門テスト (Excel ファイルからのデータの読み取り)ステップ1: Maven座...