Каждый встроенный пресет полностью готов: в нём есть анимации удаления и восстановления, а также подходящее аудио для обеих фаз. Во встроенных пресетах при восстановлении тот же звук проигрывается задом наперёд. В собственной конфигурации для удаления и восстановления можно выбрать разные звуки.
Четыре пресета
| Имя | Удаление | Восстановление | Длительность |
|---|---|---|---|
dust | Элемент рассыпается поднимающейся пылью. | Пыль собирается в конечной геометрии элемента. | 850 ms |
scatter | Мелкие фрагменты растворяются слева направо и разлетаются с уклоном вверх. | Фрагменты собираются из той же рассеянной области. | 1100 ms |
vapor | Поверхность быстро поднимается сверху сужающимся потоком пара. | Сужающийся поток пара конденсируется в видимый элемент. | 750 ms |
wind | Длинный поток уносит частицы в сторону. | Тот же поток возвращает их со своего направления. | 2075 ms |
remove() выбирает фазу удаления, а restore() — фазу восстановления. Звук пресета включён автоматически и синхронизирован с выбранным визуалом.
effects.remove(card, { preset: 'dust' });
effects.restore(card, { preset: 'dust' });
effects.remove(card, { preset: 'scatter' });
effects.restore(card, { preset: 'scatter' });
effects.remove(card, { preset: 'vapor' });
effects.restore(card, { preset: 'vapor' });
effects.remove(card, { preset: 'wind' });
effects.restore(card, { preset: 'wind' });Пресет экземпляра
Конструктор требует один пресет или один пользовательский эффект. Для отдельной операции можно выбрать другой полный пресет:
const effects = new Disintegrator({
preset: 'vapor',
});
effects.remove(firstElement); // vapor
effects.remove(secondElement, { preset: 'scatter' });
effects.restore(insertedElement, { preset: 'wind' });Восстановление с запомненным пресетом
После повторной вставки сохранённого узла restore() восстанавливает полный пресет, выбранный при удалении, включая звук восстановления.
const removal = effects.remove(card, {
preset: 'wind',
retain: true,
});
await removal.finished;
const retained = effects.take(removal.removalId!);
if (retained) {
list.prepend(retained);
await effects.restore(retained).finished; // восстановление wind
}Передайте preset в restore(), если намеренно нужен другой полный пресет. Инлайновый effect вместо него выберет пользовательский визуал и останется бесшумным, если операция не получила собственный звук.
Как заглушить пресет
Для встроенного аудио не нужен флаг включения. Чтобы сохранить анимацию пресета, но отключить звук экземпляра или операции, передайте sound: false:
const silent = new Disintegrator({ preset: 'dust', sound: false });
effects.remove(card, { preset: 'vapor', sound: false });Пресет намеренно неделим: его анимация и звук заранее синхронизированы. Если заменить только одну часть, синхронизация, скорее всего, нарушится. Поэтому пресет нельзя совместить с другой анимацией или другим звуком. Чтобы использовать движение встроенных частиц со своим звуком, возьмите effect пресета как пользовательский эффект и передайте явную пару аудио.