クールな花火効果を実現する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 コンテナのタイムゾーン問題の修正

推薦する

htmlはハイパーリンク付きの新しいウィンドウを開き、ウィンドウのプロパティを制御できます。

1. HTMLハイパーリンクによって開かれるウィンドウのサイズコードをコピーコードは次のとおりです...

MySQLでインデックスエラーが発生する状況について簡単に説明します

以下に、トレーニング機関からのヒントと私自身の要約をいくつか示します。以下のインデックスの内容を説明...

Nginx/Httpd ロードバランシング Tomcat 設定チュートリアル

前回のブログでは、Nginx と httpd を使用して、逆生成用のバックエンド Tomcat サー...

JSX を使用してコンポーネント パーサー開発を構築する例

目次JSX環境の構築プロジェクトの設定NPMを初期化するwebpackをインストールするBabelを...

Vite2+Vue3を使用してMarkdownドキュメントをレンダリングする練習

目次カスタム Vite プラグインvite-plugin-markdownの使用Front Matt...

Windows DNS サーバーに「ワームレベル」の脆弱性が露呈、17 年間存在

脆弱性の紹介SigRed の脆弱性はワーム化可能であるため非常に危険です。つまり、ユーザーの介入なし...

bash のスクリプトデバッグメカニズムの詳細な説明

スクリプトをデバッグモードで実行するbash -x <script> を使用すると、スク...

xshellを使用してLinuxサーバーに接続する

xshellを使用してLinuxに接続する利点Windows環境でLinuxを直接操作できるインター...

CSS3 で背景ぼかしを実現する 3 つの方法 (要約)

1. 通常の背景ぼかしコード: <スタイル> html, 体 { 幅: 100%; 高...

DockerプライベートライブラリHarborのアーキテクチャとコンポーネントの説明

この記事では、Harbor アーキテクチャの構成と、実行時に各コンポーネントを使用する方法について説...

超大型フォントを使用した 40 の Web ページ デザイン

今日の Web デザインでは、非常に大きなフォントが表示される傾向があります。これらのオープンソース...

JavaScript配列の一般的なメソッドの詳細な説明

目次一般的な配列メソッドポップ()シフト解除()シフト()スライス()スプライス()配列から重複した...

mysql における mydumper と mysqldump の比較

いくつかのテーブルまたは単一のデータベースのみをバックアップする場合は、innobackup よりも...

CSS シャドウアニメーションの最適化のヒント

このテクニックは、この記事から来ています - シルキーでスムーズなパフォーマンスでボックスシャドウを...

JavaScriptで配列を作成する方法の詳細な説明

目次JavaScript で配列を作成する配列の使用配列を分割文字列に変換する配列に要素を追加する配...