Руководство пользователя SVGA Design

анимация

SVGA предоставляет плагины для экспорта .svga из исходных файлов AE и An,
Дизайнерам удобно экспортировать файлы ресурсов .svga для разработки и использования одним щелчком мыши.
Ниже приведены рекомендации по использованию плагина.

Рабочее пространство

время

Продолжительность анимации SVGA-файла обычно определяется продолжительностью рабочего пространства элемента:

worktime

Пресеты можно выбрать в настройках в правом верхнем углу плагина:

worktimeSetting

Если вы выберете以动画实际时长为准
Длительность экспортируемой анимации будет равна длительности, установленной при создании элемента:

settingtime

Это значение может быть изменено в любое время.

**Уведомление: **
SVGA не поддерживает изменение времени начала анимации,
SVGA считывает анимацию только из начала временной шкалы, а продолжительность анимации — это установленная продолжительность анимации (Duration).

FPS

FPS анимации обычно находится в пределах 60,
Делитель 60 рекомендуется:
[1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30, 60]

Когда анимация будет экспортирована, она проверит, является ли FPS законным.
Если это незаконно, это будет автоматически исправлено рядом, но это не повлияет на исходный файл.

Легальный FPS на самом деле является ложным утверждением.
Эта спецификация в основном связана с частотой обновления экрана клиента.
Частота обновления экрана клиента обычно составляет 60 кадров в секунду.
Стоимость воспроизведения анимации в соответствии с этим ритмом будет значительно ниже.

холст

Для каждого создания предмета будет предустановленный холст.
Размер и цвет фона холста можно задать в Item:

canvas

Размер холста соответствует размеру файла SVGA.widthа такжеheight,
При просмотре материала можно увидеть:

svgasize
Разработка может пропорционально масштабировать эффект движения при воспроизведении SVGA.

Нет анимации SVGA цвета фона по умолчанию,
Таким образом, цвет фона холста не влияет на анимацию SVGA.

слой

Каждый раз, когда создается слой, в SVGA-анимации будет дополнительный элемент анимации.
Они передаются в имени слоя и в элементе анимации.imageKeyПереписка один на один.

заменять

При воспроизведении SVGA-анимации вы можетеimageKeyДинамически заменить содержимое слоя.
Информация, которую необходимо предоставить разработчику:

  • imageKey
  • Заменяемый материал того же размера, что и слой

маска

Слои можно маскировать, установив:

mask

управлять альфа-каналом слоя,
Для достижения эффекта отображения только части узора.

Маски обычно представляют собой закрытые пути, а открытые пути не могут создавать прозрачные области для слоя.

маска

Маска — это отношение между слоями, заданное слоем TrkMat,

Это может быть один к одному или один ко многим.
Соответствующий элемент анимации в анимации SVGAmatteKey.

** ПРИМЕЧАНИЕ. ** При установке растрового изображения в качестве маскирующего слоя
Попробуйте использовать только с помощью 8-BPC Alpha Channel Image, чтобы сохранить ресурсы.

Стоит отметить, что imageKey растровой маски также может быть заменен динамически.
То есть маска в анимации изменяется во время воспроизведения.

Анимированный контент в SVGA

SVGA 其实不叫 SVGA，应该叫 BVGA。
                    --官方吐槽

BVGA означает растровую векторную графическую анимацию,
Как видно из названия, содержание анимации в SVGA в основном растровое и векторное.

битовая карта

При создании анимации SVGA вы можете использовать:

  • png
  • jpg
  • psd

Эти три формата,
Но в конечном итоге они будут преобразованы в материал png.

** Уведомление:**
SVGA поддерживает стили слоя PSD,
При экспорте файла psd обязательно выберите:

importpsd
合成 -> 合并图层样式 -> 确定

Объединить стили слоя
Объединить стили слоя
Объединить стили слоя

Скажи важное три раза,
В противном случае материал будетразмерилистильаномальный.

вектор

Вектор — это набор метаданных, используемых для описания графики,
В АЕ вы можете использовать:

  • инструмент перо
  • графика формы

рисовать,
Но в конечном итоге они экспортируются как кривые Безье.

** Уведомление:**
SVGA поддерживает импорт файлов .ai
Файлы .ai также экспортируются как кривые Безье:

inportai

Конвертер SVGA выполнит преобразование автоматически,
Тем не менее, дизайнерам рекомендуется самостоятельно преобразовывать файл .ai при его импорте и предварительно просматривать эффект анимации.

цвет

Глубина цвета (или глубина цвета) — это количество битов на канал (бит/канал), используемое для представления цвета пикселя. каждый RGB
Чем больше битов в каналах (красный, зеленый и синий), тем больше цветов может представлять каждый пиксель.

В After Effects можно использовать цвет 8 бит на канал, 16 бит на канал или 32 бит на канал.

Помимо битовой глубины цвета, еще одной характеристикой чисел, используемых для представления значений пикселей, является то, является ли число целым числом или числом с плавающей запятой.
Числа с плавающей запятой могут представлять более широкий диапазон чисел с тем же количеством цифр.
В After Effects 32-битные пиксельные значения являются значениями с плавающей запятой.

Каждый цветовой канал 8-битного пикселя может иметь значение от 0 (черный) до 255 (чистый насыщенный цвет). Каждый цветовой канал 16-битного пикселя может иметь значения от 0 (черный) до 32 768 (чистый насыщенный цвет). Если все три цветовых канала имеют максимальное значение чистого цвета, результатом будет белый. Пиксели с 32 битами на канал могут иметь значения ниже 0,0 и выше 1,0 (чистый насыщенный цвет), поэтому цвет 32 бит на канал в After Effects также является цветом High Dynamic Range (HDR). Значения HDR могут быть ярче белого.

8 бит на канал, 16 бит на канал, 32 бита на канал в AE

дорожка
обрезать путь

TrimPath — это стиль векторной анимации.
Он имеет три связанных свойства:

trimPathStart,
trimPathEnd,
trimPathOffset，

Они указывают, где начинается Путь, где он заканчивается и как далеко от начальной точки.
В слое формы AE вы можете добавить:

add-trimpath

Его можно добавить в свойство Shape или добавить за пределы Shape, чтобы воздействовать на несколько Shapes:

muti-trimpath-1
** ПРИМЕЧАНИЕ. ** Внешняя отделка в настоящее время не поддерживается в SVGA.
trimPathOffset также не поддерживается,
В следующей версии он будет улучшен.

текст

Экспорт текста не поддерживается в SVGA,
Статический текст может быть преобразован в PNG,
Чтобы преобразовать анимированный текстовый слой в слой формы, используйте:

changetext

Иногда преобразованные слои имеют проблемы,
Однако преобразование обрабатывается черным ящиком AE,

Мы не знаем и не смеем спрашивать...

Свойства анимации в SVGA

Использование движения и отображение

Анимация меняется со временем.
В AE дизайнер изменяет одно или несколько свойств слоя или эффекта слоя с течением времени.
для создания анимационных эффектов.

Ключевой кадр

Ключевые кадры используются для установки параметров действий, эффектов, звука и многих других свойств.
Заставьте эти параметры изменяться с течением времени.

Анимация свойства

Свойства включают масштаб, вращение, смещение, прозрачность, цвет и т. д.
Пока на панели свойств справа есть небольшой ромб,
Все попадают в эту категорию.

SVGA поддерживает настройку анимации атрибутов по ключевым кадрам для получения крутых эффектов,
Это также возможность анимации в ядре SVGA.

** Уведомление:** Анимированные свойства, такие как прозрачность фигур и т. д.,
Лучше установить его прямо на элемент, не использовать его на дрожжах,
В противном случае исключения могут быть объединены.

наконец

экспорт

  • Откройте плагин

    extension

  • нажмите选择位置Выберите место для создания файла SVGA. ** Примечание: ** Здесь вы можете выбрать несколько композиций для экспорта одновременно.

  • нажмите开始转换, файл SVGA будет создан в соответствующем каталоге.

  • в правом верхнем углу设置Вы можете переключить версию SVGA и выбрать продолжительность экспорта.

Обзор характеристик

В дополнение ко многим свойствам динамического эффекта AE, упомянутым выше, также поддерживаются многие функции,
SVGA сейчас постепенно улучшается,
Вот список функций,
будет обновляться постепенно.
Лист характеристик АЭ

FAQ

Почему SVGA всегда не экспортируется. . .

Ссылки

2D Manual
SVGA вступает в пит-дневник
After Effects Handbook
README Board

Категории