Миграция и совместимость

Если вы переходите с particles.js, используйте следующий порядок:

замените старый скрипт/пакет на @tsparticles/engine + бандл (@tsparticles/slim)
постепенно перемещайте старую конфигурацию и сопоставляйте неподдерживаемые поля.
тестируйте взаимодействия (наведение/щелчок/ссылки) одно за другим

Замечания по канонической миграции

Официальный источник руководства по миграции: tsparticles/markdown/pjsMigration.md.
Примеры совместимости с устаревшими версиями доступны в демонстрационных папках.

Если вам нужен мостовой уровень при переносе устаревших конфигураций:

Дальнейшее чтение:

Старый инициализатор particlesJS(...) становится tsParticles.load({ id, options }).
Многие устаревшие значения по-прежнему имеют прямые эквиваленты в particles, interactivity и detectRetina.
Новая архитектура, управляемая плагинами, означает, что некоторые расширенные функции требуют явной загрузки пакетов.

Проверьте визуальное соответствие на настольном компьютере и мобильном устройстве.
Проверьте влияние процессора/графического процессора на устройства низкого уровня.
Убедитесь, что никакие дополнительные клавиши не игнорируются молча.
Прикрепите точные версии пакета до недели выпуска.

Если вы переходите с canvas-confetti, самый простой вариант — заменить императивные вызовы вызовами API @tsparticles/confetti.

confetti({...}) -> await confetti({...})
собственный холст -> const local = await confetti.create(canvas, defaults), затем await local({...})
повторные снимки -> сохраните существующие таймеры/циклы, вызовите await confetti(...) в этих обратных вызовах

До (стиль canvas-confetti):

import confetti from "canvas-confetti";

confetti({
  particleCount: 90,
  spread: 70,
  origin: { x: 0.5, y: 0.6 },
});

После (@tsparticles/confetti):

import { confetti } from "@tsparticles/confetti";

await confetti({
  count: 90,
  spread: 70,
  position: { x: 50, y: 60 },
});