jQuery でダイナミックなパーティクル効果を実現
|
この記事では、動的なパーティクル効果を実現するためのjQueryの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 レンダリング
コード <!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>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<div id="jsi-particle-container" class="container"></div>
<スタイル>
html,
体 {
幅: 100%;
高さ: 100%;
マージン: 0;
パディング: 0;
オーバーフロー: 非表示;
}
。容器 {
幅: 100%;
高さ: 100%;
マージン: 0;
パディング: 0;
背景色: #000000;
}
</スタイル>
</head>
<本文>
<スクリプト>
var レンダラー = {
パーティクル数: 1000,
粒子半径: 1,
MAX_ROTATION_ANGLE: Math.PI / 60、
翻訳数: 500,
init: 関数(戦略) {
this.setParameters(戦略);
パーティクルを作成します。
このセットアップ図();
このメソッドを再構築します。
このイベントをバインドします。
この.drawFigure();
},
setParameters: 関数(戦略) {
this.$window = $(window);
this.$container = $('#jsi-particle-container');
this.width = this.$container.width();
this.height = this.$container.height();
this.$canvas = $('<canvas />').attr({
幅: this.width,
高さ: this.height
}).appendTo(this.$container);
this.context = this.$canvas.get(0).getContext('2d');
this.center = {
x: this.width / 2,
y: this.height / 2
};
this.rotationX = this.MAX_ROTATION_ANGLE;
this.rotationY = this.MAX_ROTATION_ANGLE;
this.strategyIndex = 0;
this.translationCount = 0;
this.theta = 0;
this.strategies = strategy.getStrategies();
this.particles = [];
},
パーティクルを作成する: 関数() {
(var i = 0; i < this.PARTICLE_COUNT; i++) {
this.particles.push(新しいPARTICLE(this.center));
}
},
再構築メソッド: 関数() {
this.setupFigure = this.setupFigure.bind(this);
this.drawFigure = this.drawFigure.bind(this);
this.changeAngle = this.changeAngle.bind(this);
},
バインドイベント: 関数() {
this.$container.on('click', this.setupFigure);
this.$container.on('mousemove', this.changeAngle);
},
角度変更: 関数(イベント) {
var offset = this.$container.offset(),
x = event.clientX - offset.left + this.$window.scrollLeft(),
y = event.clientY - offset.top + this.$window.scrollTop();
this.rotationX = (this.center.y - y) / this.center.y * this.MAX_ROTATION_ANGLE;
this.rotationY = (this.center.x - x) / this.center.x * this.MAX_ROTATION_ANGLE;
},
セットアップ図: 関数() {
(var i = 0、長さ = this.particles.length; i < length; i++) {
this.particles[i].setAxis(this.strategies[this.strategyIndex]());
}
(++this.strategyIndex == this.strategies.length) の場合 {
this.strategyIndex = 0;
}
this.translationCount = 0;
},
図を描く: 関数() {
アニメーションフレームをリクエストします(this.drawFigure);
this.context.fillStyle = 'rgba(0, 0, 0, 0.2)';
this.context.fillRect(0, 0, this.width, this.height);
(var i = 0、長さ = this.particles.length; i < length; i++) {
var axis = this.particles[i].getAxis2D(this.theta);
このコンテキストのbeginPath();
コンテキストの塗りつぶしスタイルを axis.color に設定します。
this.context.arc(axis.x, axis.y, this.PARTICLE_RADIUS, 0, Math.PI * 2, false);
このコンテキストを埋め込む();
}
this.theta++;
this.theta % = 360;
(var i = 0、長さ = this.particles.length; i < length; i++) {
this.particles[i].rotateX(this.rotationX);
this.particles[i].rotateY(this.rotationY);
}
this.translationCount++;
this.translationCount % = this.TRANSLATION_COUNT;
（this.translationCount == 0）の場合{
このセットアップ図();
}
}
};
var 戦略 = {
散乱半径: 150,
円錐アスペクト比: 1.5、
リング数: 5,
getStrategies: 関数() {
var 戦略 = [];
(変数 i がこの中にある) {
if (this[i] == arguments.callee || typeof this[i] != 'function') {
続く;
}
strategies.push(this[i].bind(this));
}
リターン戦略;
},
球体を作成します: 関数() {
var cosTheta = Math.random() * 2 - 1,
sinTheta = Math.sqrt(1 - cosTheta * cosTheta)、
phi = Math.random() * 2 * Math.PI;
戻る {
x: this.SCATTER_RADIUS * sinTheta * Math.cos(phi)、
y: this.SCATTER_RADIUS * sinTheta * Math.sin(phi)、
z: this.SCATTER_RADIUS * cosTheta、
色相: Math.round(phi / Math.PI * 30)
};
},
トーラスを作成する: 関数() {
var theta = Math.random() * Math.PI * 2,
x = this.SCATTER_RADIUS + this.SCATTER_RADIUS / 6 * Math.cos(theta)、
y = this.SCATTER_RADIUS / 6 * Math.sin(theta)、
phi = Math.random() * Math.PI * 2;
戻る {
x: x * Math.cos(phi)、
y: y、
z: x * Math.sin(phi)、
色相: Math.round(phi / Math.PI * 30)
};
},
作成円錐: 関数() {
var ステータス = Math.random() > 1 / 3,
×、
はい、
ファイ = Math.random() * Math.PI * 2,
レート = Math.tan(30 / 180 * Math.PI) / this.CONE_ASPECT_RATIO;
if (ステータス) {
y = this.SCATTER_RADIUS * (1 - Math.random() * 2);
x = (this.SCATTER_RADIUS - y) * レート;
} それ以外 {
y = -this.SCATTER_RADIUS;
x = this.SCATTER_RADIUS * 2 * レート * Math.random();
}
戻る {
x: x * Math.cos(phi)、
y: y、
z: x * Math.sin(phi)、
色相: Math.round(phi / Math.PI * 30)
};
},
作成花瓶: 関数() {
var theta = Math.random() * Math.PI,
x = Math.abs(this.SCATTER_RADIUS * Math.cos(theta) / 2) + this.SCATTER_RADIUS / 8、
y = this.SCATTER_RADIUS * Math.cos(theta) * 1.2、
phi = Math.random() * Math.PI * 2;
戻る {
x: x * Math.cos(phi)、
y: y、
z: x * Math.sin(phi)、
色相: Math.round(phi / Math.PI * 30)
};
}
};
var PARTICLE = function(center) {
中央に配置します。
これを初期化します。
};
PARTICLE.プロトタイプ = {
スプリング: 0.01、
摩擦: 0.9、
フォーカス位置: 300,
色: 'hsl(%hue, 100%, 70%)',
初期化: 関数() {
0 を返します。
y = 0;
this.z = 0;
this.vx = 0;
this.vy = 0;
this.vz = 0;
この色;
},
setAxis: 関数(軸) {
this.translating = true;
軸の次のXを計算
軸のy座標をx軸のy座標に代入します。
軸のzを次のように変更します。
軸の色相を反転します。
},
rotateX: 関数(角度) {
var sin = Math.sin(角度)、
cos = Math.cos(角度)、
nextY = this.nextY * cos - this.nextZ * sin、
nextZ = this.nextZ * cos + this.nextY * sin、
y = this.y * cos - this.z * sin、
z = this.z * cos + this.y * sin;
this.nextY = nextY;
this.nextZ = nextZ;
y = y;
this.z = z;
},
Y軸の回転: 関数(角度) {
var sin = Math.sin(角度)、
cos = Math.cos(角度)、
nextX = this.nextX * cos - this.nextZ * sin、
nextZ = this.nextZ * cos + this.nextX * sin、
x = this.x * cos - this.z * sin、
z = this.z * cos + this.x * sin;
this.nextX = nextX;
this.nextZ = nextZ;
this.x = x;
this.z = z;
},
rotateZ: 関数(角度) {
var sin = Math.sin(角度)、
cos = Math.cos(角度)、
nextX = this.nextX * cos - this.nextY * sin、
nextY = this.nextY * cos + this.nextX * sin、
x = this.x * cos - this.y * sin、
y = this.y * cos + this.x * sin;
this.nextX = nextX;
this.nextY = nextY;
this.x = x;
y = y;
},
getAxis3D: 関数() {
this.vx += (this.nextX - this.x) * this.SPRING;
this.vy += (this.nextY - this.y) * this.SPRING;
this.vz += (this.nextZ - this.z) * this.SPRING;
this.vx * = this.FRICTION;
this.vy * = this.FRICTION;
this.vz * = this.FRICTION;
this.x += this.vx;
this.y + = this.vy;
this.z += this.vz;
戻る {
x: this.x,
y: これ.y,
z: これ.z
};
},
getAxis2D: 関数(theta) {
var 軸 = this.getAxis3D(),
スケール = this.FOCUS_POSITION / (this.FOCUS_POSITION + axis.z);
戻る {
x: this.center.x + axis.x * スケール、
y: this.center.y - axis.y * スケール、
色: this.COLOR.replace('%hue', this.hue + theta)
};
}
};
$(関数() {
RENDERER.init(戦略);
});
</スクリプト>
</本文>
</html>以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: mysql mycat ミドルウェアのインストールと使用
>>: alpineをベースにdockerfileで作成したtomcatイメージの実装
推薦する
Vue3 の参照と参照の詳細
エディターは、Vue3のデータの関連する問題も共有します。次のような例を見てみましょう。 Vue.c...
Dockerイメージのエクスポートとインポート操作
基本イメージが以前に構成されていて、これらのイメージが他の場所でも必要な場合はどうなりますか?回答:...
HTML のテキストエリア タグ
<textarea></textarea> は、複数行を入力できるテキスト ...
2 つの MySQL ユーザー削除ステートメント (delete user と drop user) の違い
ヒント： MySQL では、ユーザーの作成と削除が頻繁に必要になります。ユーザーを作成するときは、通...
axiosのシンプルなカプセル化と使用例コード
序文最近、プロジェクトを構築しているときに、リクエストのカプセル化について考え、どのようにカプセル化...
Vue で webSocket を使用してリアルタイムの天気を更新する方法
目次序文webSocket の操作と例について:ウェブソケット1. webSocketについて2. ...
Mongodb の GUID 表示の問題の詳細な分析
問題を見つける最近、プログラムのストレージを Mongodb に移行したところ、Guid 型が書き込...
CentOS に MySQL をインストールしてリモート アクセスを設定する方法
1. MySQLリポジトリソースをダウンロードする$ wget http://repo.mysql....
Vueの学習手順
目次1. v-text (v-instruction name = "variable&q...
エンタープライズプロダクション MySQL 最適化入門
Oracle、DB2、SQL Server などの他の大規模データベースと比較すると、MySQL に...
Vueは透かし効果を簡単に実現します
序文： Vueプロジェクトで透かし効果を使用するには、コンテナを指定できます効果画像: 1. コンテ...
MySQL sql_mode の使用に関する詳細な説明
目次序文sql_mode の説明最も重要なオプションすべてのオプション要約する序文前回の記事「MyS...
MySQL でのインデックスの追加と削除に関連する操作
目次1. インデックスの役割2. インデックスの作成と削除（1）ALTER TABLE文を使用して、...
ウェブページ上の写真プレビューナビゲーションを設計するためのヒント
<br />ナビゲーションとは、ウェブサイトの上部にあることが多いナビゲーション バーの...
要素のフォームコンポーネントに関する注意事項
要素フォームとコード表示詳細はエレメントフォーム公式サイトをご覧ください構造と機能の分析紹介とソース...