SurfaceGlitch · UiEffect14 / 21

Искажение и жизненный цикл

Добавим полосы и сохраним владение исходной поверхностью.

Результат

Загрузка Canvas…
Управление примером
280
168
180

Подготовка примера…

SurfaceGlitch сдвигает полосы живой поверхности. Он временно добавляет маски и копии геометрии. Исходный Graphics должен быть добавлен в контейнер и не иметь собственной маски.

import { Graphics } from 'pixi.js';
import { CyberPreset, SurfaceGlitch } from '@gamedevland/cyber-ui';

const surface = app.stage.addChild(new Graphics()
  .rect(0, 0, 220, 56).fill(CyberPreset.palette.accent));
const glitch = new SurfaceGlitch(CyberPreset.glitch);
glitch.show('menu', [{ surface, x: 0, y: 0, w: 220, h: 56 }], 200);
const tick = (ticker: import('pixi.js').Ticker) => {
  glitch.update(ticker.deltaMS / 1000);
};
app.ticker.add(tick);
// On screen removal: app.ticker.remove(tick); glitch.dispose();

Последний аргумент show() — задержка в миллисекундах, а update() принимает секунды. Повторный show() с тем же ключом обновляет цели без перезапуска расписания; новый ключ начинает его заново. Изменения геометрии и transform исходной поверхности подхватываются эффектом.

Общий контракт UiEffect: update, setActive, setReducedMotion, dispose. Последний вызов идемпотентен, остальные после освобождения выбрасывают ошибку. Reduced motion у glitch удаляет искажение сразу. Предпочтение передаёт приложение, в том числе при его изменении.

Сначала освобождаем эффект, затем уничтожаем поверхности. Не меняем маску цели, пока ей владеет glitch. Текст, соседние объекты и снимки произвольных контейнеров в этот эффект не входят.

GlitchOptions: durationMs — длительность импульса, minDelayMs — минимальная пауза, spreadMs — разброс паузы, seed — целое число 0–4294967295. GlitchTarget содержит surface и локальные x, y, w, h. hide() снимает цели и убирает временные полосы.

Источники ↗

Cyber UI Toolkit · SurfaceGlitch↗Регистрация целей и детерминированное время.PixiJS · Graphics↗Совместное использование GraphicsContext и уничтожение.