tsparticle 2.0.5変更履歴

変更の中断

バージョンからの起動2.0.0 , tsparticles もう一つのパッケージでありません.その成長は私に多くのパッケージでプロジェクトを分割することについてたくさん考えます.
新しい構造は、共通のエンジンとインストールされ、ロードすることができますので、誰もが必要な機能だけをインストールすることができますし、怠惰なもののためのバンドルとプリセットが使用できるように準備ができている単一の機能を持つパッケージの多くのパッケージになります.
例えば、あなたが棒に固執したいならtsparticles ライブラリをインストールすることができます.を使用するときに簡単にそれを設定することができますimport or require , いくつかの行のコードをv1 設定.

import { tsParticles } from "tsparticles-engine"; // this is the new common package
import { loadFull } from "tsparticles"; // this function loads all the features contained in v1 package

(async () => {
    await loadFull(tsParticles); // this is needed to load all the features and can be done everywhere before using tsParticles.load

    await tsParticles.load("tsparticles", { /* options */ }); // this must be done after loadFull
})();

プロ

小さい出力を使用すると、未使用のコードの多くがなくても必要な機能だけをインポートすることができます.

より良いパフォーマンスは、多くの機能がインポートされていないため、彼らは一般的なパフォーマンスを削減して実行されていません.より多くの機能、より多くの計算が必要.

短所

すべての機能をインストールする必要がありますpackage.json ファイルは、プリセットが今より重要になる理由です.

以前のコードは、右のパッケージをインポートせずに動作しません、これは必要な破壊的な変更です.

新機能

追加outside and inside 粒子への値は方向オプションを動かす

追加outside and inside 粒子への値がモードオプションを移動する

V 1からV 2へ移行する方法？

バージョン1.x はまだlatest タグオンnpm , でもnext バージョンは2.0.0 バージョンは、私は問題を見つけるために公開し、いくつかのフィードバックを受け取るために必要なものです.

移行段階

バニラJS / HTMLの使用法

ジャスト・チェンジtsparticles ファイルtsparticles.min.js to tsparticles.bundle.min.js , if the slim バージョンが使用され、そこにもバンドルですが、それは別のパッケージは、現在呼ばれているtsparticles-slim .

モジュール

パッケージのインストール"tsparticles-engine" 使用next 以下のタグnpm install tsparticles-engine@next

すべて置換"tsparticles" インポート"tsparticles-engine"

追加import { loadFull } from "tsparticles"; インポートまたはその必須バージョンでは.これは新しい2.0.x を使用してインストールすることができますnpm install tsparticles@next

呼び出しloadFull

反応/Vue/角/svelteまたは他の種類の構成要素を使用するならばparticlesInit/init プロパティを返します.init 関数へloadFull

ジャストコールloadFull(tsParticles) 前にtsParticles 用途

代替案

バンドルされたバージョンのtsparticles パッケージは最適ではありません、それは実装するのが簡単です、しかし、それは多くの不必要なものをロードすることができました.
例として次のコードを取りたいtsparticles-slim パッケージ)

import type { Engine } from "tsparticles-engine";
import { loadAngleUpdater } from "tsparticles-updater-angle";
import { loadBaseMover } from "tsparticles-move-base";
import { loadCircleShape } from "tsparticles-shape-circle";
import { loadColorUpdater } from "tsparticles-updater-color";
import { loadExternalAttractInteraction } from "tsparticles-interaction-external-attract";
import { loadExternalBounceInteraction } from "tsparticles-interaction-external-bounce";
import { loadExternalBubbleInteraction } from "tsparticles-interaction-external-bubble";
import { loadExternalConnectInteraction } from "tsparticles-interaction-external-connect";
import { loadExternalGrabInteraction } from "tsparticles-interaction-external-grab";
import { loadExternalPauseInteraction } from "tsparticles-interaction-external-pause";
import { loadExternalPushInteraction } from "tsparticles-interaction-external-push";
import { loadExternalRemoveInteraction } from "tsparticles-interaction-external-remove";
import { loadExternalRepulseInteraction } from "tsparticles-interaction-external-repulse";
import { loadImageShape } from "tsparticles-shape-image";
import { loadLifeUpdater } from "tsparticles-updater-life";
import { loadLineShape } from "tsparticles-shape-line";
import { loadOpacityUpdater } from "tsparticles-updater-opacity";
import { loadOutModesUpdater } from "tsparticles-updater-out-modes";
import { loadParallaxMover } from "tsparticles-move-parallax";
import { loadParticlesAttractInteraction } from "tsparticles-interaction-particles-attract";
import { loadParticlesCollisionsInteraction } from "tsparticles-interaction-particles-collisions";
import { loadParticlesLinksInteraction } from "tsparticles-interaction-particles-links";
import { loadPolygonShape } from "tsparticles-shape-polygon";
import { loadSizeUpdater } from "tsparticles-updater-size";
import { loadSquareShape } from "tsparticles-shape-square";
import { loadStarShape } from "tsparticles-shape-star";
import { loadStrokeColorUpdater } from "tsparticles-updater-stroke-color";
import { loadTextShape } from "tsparticles-shape-text";

export async function loadSlim(engine: Engine): Promise<void> {
    await loadBaseMover(engine);
    await loadParallaxMover(engine);

    await loadExternalAttractInteraction(engine);
    await loadExternalBounceInteraction(engine);
    await loadExternalBubbleInteraction(engine);
    await loadExternalConnectInteraction(engine);
    await loadExternalGrabInteraction(engine);
    await loadExternalPauseInteraction(engine);
    await loadExternalPushInteraction(engine);
    await loadExternalRemoveInteraction(engine);
    await loadExternalRepulseInteraction(engine);

    await loadParticlesAttractInteraction(engine);
    await loadParticlesCollisionsInteraction(engine);
    await loadParticlesLinksInteraction(engine);

    await loadCircleShape(engine);
    await loadImageShape(engine);
    await loadLineShape(engine);
    await loadPolygonShape(engine);
    await loadSquareShape(engine);
    await loadStarShape(engine);
    await loadTextShape(engine);

    await loadLifeUpdater(engine);
    await loadOpacityUpdater(engine);
    await loadSizeUpdater(engine);
    await loadAngleUpdater(engine);
    await loadColorUpdater(engine);
    await loadStrokeColorUpdater(engine);
    await loadOutModesUpdater(engine);
}

バニラJS / HTMLの使用法

分割することは、長い活動<script> しかし、何も不可能です.
上の例から、すべてのパッケージは自分自身が必要です<script> タグ、すべてload 関数はtsParticles パラメータとしてtsParticles 常にオブジェクト.
The tsparticles-engine バンドルがない場合は常に存在しなければなりません(tsparticles-slim , tsparticles または任意のバンドルされたプリセット).他のすべてのパッケージは、その機能を使用する場合のみ必要です.
例を見ましょう.
ご覧のように、JSオプションでは必要なスクリプトがあり、使用する前にtsParticles.load 関数は、すべてを正しくロードするために呼び出されます.あらゆるload 機能はasync , それで、それは待つことができる見込みです、それは必ずしも必要でありません(この場合のように).

モジュール

この場合、モジュールをimportすることは簡単です.あらゆるモジュールをnpm , yarn or pnpm .
必要なパッケージをインストールしたら、"Vanilla JS / HTML Usage" こちらも.
モジュールのサンプルはここにあります.

コンポーネント（反応、Vue、角、svelte、…）

すべてのコンポーネントはinit or particlesInit (すべての属性が同じになるまでドキュメントをチェックアウトします)、すべてのコンポーネントをロードする場所ですengine 属性tsParticles コンポーネントで使用されるインスタンス.
反応サンプル
Vuejs 2Xサンプル
Vuejs 3Xサンプル
角度サンプル