Последствия
Добавьте визуальные эффекты для улучшения вашего дизайна. PinePaper включает в себя 15 встроенных эффектов от систем частиц до моделирования окружающей среды.
Доступные эффекты
Искорка
Светящаяся частица, которая следует за контуром вашего предмета, оставляя след сверканий.
Лучше всего для: Логотипы, выделенный текст, магические темы
| Собственность | Описание | По умолчанию |
|---|---|---|
| Цвет | Цвет искры/света | #fbbf24 (золото) |
| Скорость | Умножитель скорости анимации | 1.0 |
| Размер | Радиус частиц | 2 |
Взрыв
Взрыв частиц из центра предмета. Однократный выстрел по умолчанию, или установить интервал для повторения всплесков.
Лучше всего для: Раскрытие, акцент, торжества
| Собственность | Описание | По умолчанию |
|---|---|---|
| Цвет | Цвет частиц | #ef4444 (red) |
| Радиус | Расстояние распространения взрыва | 100 |
| Граф | Количество частиц | 20 |
| Интервал | Повторите интервал в секундах (0 = один выстрел) | 0 |
| Повторять | Количество повторов (0 = один выстрел) | 0 |
Огонь
Органические формы пламени с градиентной окраской, синусоидальной волновой анимацией и турбулентностью. Пламя нагревается автоматически, поэтому нет зазора холодного запуска.
Лучше всего для: Факелы, костры, драматический акцент
| Собственность | Описание | По умолчанию |
|---|---|---|
| Цвет | Базовый цвет для автогенерированного градиента | #fbbf24Q |
| Цвета | Пользовательский градиент останавливает массив (перекрывает цвет) | желтый → оранжевый → красный |
| Граф | Показатель Spwn | 12 |
| Скорость | Мультипликатор Spwn rate | 1.5 |
| Распространение | Горизонтальное распространение нереста | 0 |
| Размер | Размер базового пламени | 3 |
| Высота | Максимальная высота подъема (0 = авто от границ объекта) | 0 |
| Жизнь частиц | Жизнь пламени за считанные секунды | 1.5 |
| Турбулентность | Умножитель амплитуды волн | 1.0 |
| Максовы частицы | Макс одновременное пламя | 30 |
Дым
Возникающие частицы дыма или пара с синусоидальным горизонтальным дрейфом. Предварительное нагревание автоматически для мгновенной видимости.
Лучше всего для: Дымоходы, пар, атмосферная дымка
| Собственность | Описание | По умолчанию |
|---|---|---|
| Цвет | Цвет дыма | #888888 |
| Граф | Показатель Spwn | 15 |
| Скорость | Мультипликатор Spwn rate | 1.0 |
| Распространение | Горизонтальное распространение нереста | 0 |
| Размер | Начальный радиус частицы | 3 |
| Дрифт | Горизонтальное синусоидальное расстояние дрейфа | 8 |
| Высота | Максимальная высота подъема (0 = авто) | 0 |
| Жизнь частиц | Время жизни частиц в секундах | 1.5 |
| Темпы роста | Масштабный рост по мере роста частиц | 0.3 |
| Максовы частицы | Макс одновременные частицы | 18 |
Дождь
Нисходящие дождевые полосы с настраиваемым углом ветра и размером падения.
Лучше всего для: Погодные сцены, настроение, экологические фоны
| Собственность | Описание | По умолчанию |
|---|---|---|
| Цвет | Цвет капли дождя | #93c5fd (светло-голубой) |
| Граф | Коэффициент Spwn | 15 |
| Скорость | Умножитель скорости падения | 2.0 |
| Угол | Угол ветра (влияет на горизонтальный дрейф) | 0 |
| Распространение | Горизонтальный фактор распространения нереста | 1.0 |
| Размер | Умножитель длины и ширины капли дождя | 1.0 |
Снег
Медленно падающие снежинки с нежным горизонтальным дрейфом и вращением.
Лучше всего для: Зимние сцены, праздничные темы, нежная атмосфера
| Собственность | Описание | По умолчанию |
|---|---|---|
| Цвет | Цвет снежинки | #e2e8f0 (светло-серый) |
| Граф | Коэффициент Spwn | 10 |
| Скорость | Умножитель скорости падения | 0.5 |
| Распространение | Горизонтальный фактор распространения нереста | 1.5 |
| Жизнь частиц | Время жизни хлопка в секундах | 4.0 |
Конфетти
Красочные дрожащие прямоугольники с физической гравитацией. Однократный выстрел по умолчанию, или установить интервал для повторения всплесков.
Лучше всего для: Праздники, достижения, партийные темы
| Собственность | Описание | По умолчанию |
|---|---|---|
| Цвета | Массив цветов конфетти | красный, желтый, зеленый, синий, фиолетовый |
| Граф | Частицы на разрыв | 30 |
| Радиус | Диапазон скорости взрыва | 150 |
| Гравитация | Ускорение вниз | 200 |
| Размер | Прямоугольный размер | 6 |
| Распространение | Область Spwn распространяется | 0 |
| Offset X/Y | Смещение центра | 0 |
| Интервал | Повторите интервал в секундах (0 = один выстрел) | 0 |
| Повторять | Количество повторов (0 = один выстрел) | 0 |
Риппл
Расширение концентрических кругов, которые исчезают из центра предметов.
Лучше всего для: Капли воды, точки удара, сонар/радар
| Собственность | Описание | По умолчанию |
|---|---|---|
| Цвет | Цвет кольца | #60a5fa (светло-голубой) |
| Скорость | Умножитель скорости расширения | 1.0 |
| Макс Радиус | Максимальный размер кольца | 150 |
| Кольцевой граф | Количество колец для нереста | 3 |
| Инсульт широта | Ширина кольцевой линии | 2 |
Сияние
Пульсирующая аура позади элемента, который колеблется в масштабе.
Лучше всего для: Подсветка, подключение, привлечение внимания
| Собственность | Описание | По умолчанию |
|---|---|---|
| Цвет | Цвет сияния | #fbbf24 (золото) |
| Скорость | Умножитель частоты импульса | 1.0 |
| Интенсивность | Максимальная непрозрачность | 0.6 |
| Размер | Диапазон масштабных колебаний (1.0 → это значение) | 1.5 |
Электрический
Мерцающие зубчатые молнии вокруг предмета.
Лучше всего для: Энергия, власть, научно-фантастические темы
| Собственность | Описание | По умолчанию |
|---|---|---|
| Цвет | Цвет болта | #67e8f9 (циан) |
| Скорость | Умножитель скорости мерцания | 1.0 |
| Граф Болт | Количество одновременных болтов | 3 |
| Длина | Длина вольта в пикселях | 60 |
| Скорость мерцания | Частота мерцания в Гц | 8 |
Пузыри
Восходящие прозрачные пузырьки со спектральными бликами и нежным горизонтальным колебанием.
Лучше всего для: Подводные сцены, причудливые темы, напитки
| Собственность | Описание | По умолчанию |
|---|---|---|
| Цвет | Bubble rim цвет | #93c5fd (светло-голубой) |
| Граф | Показатель Spwn | 6 |
| Скорость | Умножитель скорости | 1.0 |
| Размер | Радиус пузыря | 5 |
| Распространение | Горизонтальное распространение нереста | 1.0 |
Пыль
Плавающие пылевые мотыльки, которые плавно дрейфуют в воздухе с тонким движением.
Лучше всего для: Атмосферные сцены, старая / винтажная внешность, солнечные лучи
| Собственность | Описание | По умолчанию |
|---|---|---|
| Цвет | Цвет пыли | #d4c5a9 (теплый бежевый) |
| Граф | Количество мотов | 15 |
| Скорость | Умножитель скорости дрейфа | 1.0 |
| Размер | Размер мотылька | 2 |
| Распространение | Площадь распространения | 1.0 |
Светлячки
Светящиеся точки, которые органично блуждают с гладким рулевым поведением.
Лучше всего для: Ночные сцены, волшебные леса, окружающие фоны
| Собственность | Описание | По умолчанию |
|---|---|---|
| Цвет | Светящаяся краска | #fde68a (тепло-желтый) |
| Граф | Количество светлячков | 8 |
| Скорость | Умножитель скорости движения | 1.0 |
| Размер | Радиус сияния | 4 |
Ударная волна
Одно расширяющееся кольцо, которое стреляет наружу из центра предмета. Эффект одного выстрела.
Лучше всего для: Моменты воздействия, подпитки, драматические откровения
| Собственность | Описание | По умолчанию |
|---|---|---|
| Цвет | Цвет кольца | #f97316 (оранжевый) |
| Радиус | Радиус расширения Макса | 150 |
Тропа
Постоянный путь частиц, которые следуют за предметом по мере его движения.
Лучше всего для: Движущиеся объекты, визуализация пути, хвосты комет
| Собственность | Описание | По умолчанию |
|---|---|---|
| Цвет | Цвет тропы | #fbbf24 (золото) |
| Скорость | Скорость Фаде | 1.0 |
| Размер | Размер частиц тропы | 3 |
Shader Effects (вырезанный силуэт)
Новое семейство эффектов GPU добавлено в v0.5. В отличие от эффектов частиц, шейдерные эффекты представляют собой непрерывные анимированные шейдеры, составленные на фоне силуэта вашего предмета — подумайте «заполненный огнем текст» или «расплавленный хром на логотипе». Сегодня три типа кораблей:
Тепловая карта
Светящийся термальный ореол с анимированной турбулентностью. Читается как огонь при заполнении текста, и как горячее свечение при ограждении формы.
Лучше всего для: Текстовые названия, энергетические эффекты, акцент внимания
| Собственность | Описание | По умолчанию |
|---|---|---|
| Режим | Где появляется шейдер: Заполните пункт / Halo вокруг пункта / Overlay (смесь по пункту) | Заполнить пункт |
| Интенсивность | Умножитель яркости (0-1,5) | 1.0 |
| Радиус | Расстояние выпадения светового потока (0,2-1,5) | 0.85 |
| Палетта | Горячий (красный/желтый), прохладный (синий/циан), фиолетовый | Горячий |
| Набивка гало | Расширение границ для внешнего гало (0-1,5) | 0.4 |
| Offset X / Y | Сдвиг центра шаблона шейдера в границах (-1 к 1) | 0 |
| Тонкий | Цветоприемник — смещения палитры к этому цвету (белый = нет смещения) | #ffffffQ |
Жидкий металл
Отражающая хромированная протекающая поверхность с полосатыми полосами и зеркальными бликами. Три металлические палитры: Chrome, Gold, Copper.
Лучше всего для: Логотипы, основные моменты, металлическая типография
Дым самоцвета
Мягкий объемный дымовой венок с закручивающимся движением и внутренними искрами. Три цветовые палитры: Белый, Роза, Изумруд.
Лучше всего для: Мистическая атмосфера, мечтательные фоны, магические откровения
Анимационные каналы
Каждый эффект шейдера имеет два независимых канала анимации (A и B), которые управляют различными визуальными аспектами. Для Heatmap это Flow (фоновая турбулентность) + Shimmer (высокочастотная деталь). Для жидкого металла это Streaks (дрейф) + Bands (колебание отражения). Для Gem Smoke это Drift (направление завитка) + Sparkle (внутренние акценты).
Каждый канал показывает:
- Скорость — 0× замораживает канал, 1× = заданный по умолчанию, до 5×
- Curve — как меняется время:
| Кривая | Что он делает |
|---|---|
| Линейный | Постоянный непрерывный поток (по умолчанию — рекомендуется для каналов типа «Flow») |
| Сине | Гладкий пульс |
| Треугольник | Резкий пульс |
| Пульс | Квадратная волна |
| Легко | Медленный → быстрый → медленный |
| Савтут | Ramp + сброс |
| Отскакивать | Убывающие колебания |
| Шум | Случайная прогулка |
Вы можете смешивать кривые между A и B для многослойного движения — например, Heatmap с потоком на линейном и Shimmer на импульсе дает устойчивое свечение с наклонной деталью.
Стэкинг Shader Effects
Вы можете применить более одного эффекта шейдера к одному элементу. Heatmap + Gem Smoke на том же изображении дает вам огненный ореол с дымовыми струйками, проходящими через него. Каждый эффект работает независимо с собственными парамами и каналами. Кнопка «Чистые эффекты» удаляет все сразу.
Композитные режимы
Режим выпадения определяет, как выход шейдера сочетается с пунктом:
- Заполняющий элемент — шейдер появляется только внутри силуэта элемента. По умолчанию для текста и форм.
- Halo around item — шейдер появляется только за пределами края элемента. Лучше всего для непрозрачных форм, которые хотят свечения.
- Overlay (смесь на элементе) — шейдер стилизует существующие пиксели элемента посредством многократной смеси. Дефолт для изображений.
Применение эффектов
- Выберите элемент с помощью инструмента выбора (V)
- В разделе «Свойства» найдите Эффекты
- Нажмите Add Effect
- Выберите тип эффекта
- Настройка настроек по желанию
Удаление эффектов
- Выберите пункт с эффектом
- В панели свойств найдите эффект
- Нажмите кнопку x, чтобы удалить
Несколько эффектов
Вы можете применить несколько эффектов к одному и тому же элементу. Все они будут играть одновременно.
Типы эффектов
| Категория | Последствия | Поведение |
|---|---|---|
| Непрерывный (частица) | Спаркл, Дым, Огонь, Дождь, Снег, Риппл, Стекло, Электрик, Пузыри, Пыль, Светлячки, Тропа | Бегите до удаления |
| Скриншоты One-Shot Burst | Blast, Confetti, Shockwave (без перерыва) | Играть один раз и исчезнуть |
| Повторяющийся взрыв | Взрыв, Конфетти (с интервалом) | Повторный триггер с заданным интервалом |
| Шадер (вырезанный силуэт) | Heatmap, Жидкий Металл, Дым драгоценных камней | Бег до удаления; несколько стеков на элемент |
Эффект против анимации
| Особенность | Анимация | Эффект |
|---|---|---|
| Что он делает | Преобразует элемент (двигается, масштабируется, вращается) | Добавляет визуальные элементы вокруг элемента |
| Примеры | Пульс, отскок, увядание | Искорка, взрыв частиц |
| Комбинировать? | По одному пункту | Многократно на единицу |
Экспортная совместимость
| Эффект | MP4 | GIF | SVG |
|---|---|---|---|
| Искорка | ✅ | ✅ | atic️ Статический |
| Взрыв | ✅ | ✅ | ❌ |
| Огонь | ✅ | ✅ | ❌ |
| Дым | ✅ | ✅ | ❌ |
| Дождь | ✅ | ✅ | ❌ |
| Снег | ✅ | ✅ | ❌ |
| Конфетти | ✅ | ✅ | ❌ |
| Риппл | ✅ | ✅ | ❌ |
| Сияние | ✅ | ✅ | atic️ Статический |
| Электрический | ✅ | ✅ | ❌ |
| Тепловая карта (шадер) | ✅ | ✅ | ❌ |
| Жидкий металл (шадер) | ✅ | ✅ | ❌ |
| Дым самоцвета (Shader) | ✅ | ✅ | ❌ |
Ограничения SVG: Эффекты представляют собой системы частиц на основе каркаса и шейдерные поверхности — ни одна из них не отображает статическую SVG. Для анимации полного эффекта экспортируйте как MP4 или GIF.
Советы
Советы по эффекту:
- Искренные эффекты лучше всего работают на предметах с четкими контурами
- Огонь и дым прогреваются автоматически — пламя появляется мгновенно без задержки запуска
- Используйте взрыв и конфетти экономно для ударных моментов
- Дождь и снег лучше всего работают на больших предметах или элементах полного холста
- Комбинируйте свечение с режимами смешивания для драматического освещения
- Сопоставьте цвета эффекта с вашей палитрой дизайна
Шадерные эффекты:
- Для текста в режиме Fill item создается «огненный текст» / «дымчатый текст». Для фигур попробуйте Halo вокруг элемента. Для изображений Overlay сохраняет изображение, тонируя его шейдером.
- Сложите несколько эффектов шейдера на один элемент: тепловая карта на Fill + gem smoke на Halo вокруг слои светящегося ядра под дымным ореолом.
- Используйте Offset X/Y, чтобы подтолкнуть яркое пятно тепловой карты к углу, а не к центру, что полезно для асимметричного «горячего края».
- Цветовой выборщик Tint смещает палитру без потери структуры. Держите его белым для естественного вида.
- Кривые каналов позволяют смешивать постоянный поток с наклонными деталями. Попробуйте Heatmap с Flow=Linear и Shimmer=Pulse для эффекта мерцающей свечи.
- Автоматическая настройка производительности на основе вашего устройства. На более медленных машинах редактор будет тихо снижать разрешение перед частотой кадров; вы можете заблокировать уровень качества через консоль разработчика (
PinePaper.itemAuraSystem.setQualityTier(N)).
Связанные: [Анимации] (/features/animations) | [Смешивание] (/features/blending) | [Маскировка] (/features/masking)