SignalBrackets11 / 21

Скобки вокруг эмблемы

Настроим движение скобок и место для центрального рисунка.

Результат

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

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

SignalBrackets.draw() рисует две скобки вокруг центра. Приложение передаёт прошедшие миллисекунды и радиус, который нужно оставить свободным. Для загрузчика этот радиус получаем через loader.outerRadius(radius) * visualScale.

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

const g = app.stage.addChild(new Graphics());
const options: BracketOptions = {
  cycleMs: 2400, travel: 12, scale: 0.08, jitter: 1,
  distanceRatio: 0.3, maxDistance: 200, halfHeight: 48, bevel: 10,
  strokeWidth: 2, alpha: 0.45, peakAlpha: 1, markerSize: 8, markerAlpha: 0.7,
};
let elapsedMs = 0;
const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
const tick = (ticker: import('pixi.js').Ticker) => {
  elapsedMs += ticker.deltaMS;
  SignalBrackets.draw(g.clear(), options, app.screen.width, 160,
    64, 1, elapsedMs, 90, reduced,
    CyberPreset.palette.accent, CyberPreset.palette.signal);
};
app.ticker.add(tick);
// On screen removal: app.ticker.remove(tick);

После настроек передаём ширину, centerY, свободный радиус, визуальный масштаб, время, длительность дискретного кадра, reduced motion и два цвета.

cycleMs задаёт период, travel — ход внутрь, scale — дополнительное увеличение, jitter — дрожание. distanceRatio и maxDistance ограничивают расстояние от центра. Остальные поля задают форму, толщину и прозрачность; alpha-поля лежат в [0, 1]. При reduced motion скобки остаются неподвижными.

Источники ↗

Cyber UI Toolkit · SignalBrackets↗Параметры и поведение публичного API.Cyber UI Toolkit · TriangleLoader↗Параметры и поведение публичного API.