Исследование формата движения SVGA

анимация

Человеческий глаз создает ощущение движения через визуальный остаток динамической графики, поэтому возникает динамический эффект.

Динамическая графика

Будь то в AE & Animate при создании графики,
Отрегулируйте функцию изменения настройки ключевого кадра;
Или используйте PS для рисования и экспорта GIF кадр за кадром,
По сути, все они создают связную последовательность изображений.
Графика движения также включена.

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

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

О чем именно мы говорим, когда говорим о SVGA?

"它是个转换插件，把设计师做的动画导出来，放到设备上去播放。"

converting

"它是一个客户端播放器，一种播放动效的方式，酱紫我们就不用手撸动画，可以早点下班。"

"它是一套协议，降低设计师与技术在动效方面的沟通成本"

"它是一份解决方案，本质上解决的是图形效果与实现成本之间的矛盾问题。"

Как клиентский игрок, мы можем обсуждать SVGA с двух точек зрения:

Animation(Player)

Content(Frames)
Tickers(FPS)

.svga(Parser)
 
序列化
反序列化

SVGA

Animation(Player)

С точки зрения игрока это SVGA(оптимизировано)анимация кадра последовательности,
Протолкните кадр последовательности через тикер с заданным интервалом.

В это время некоторые студенты хотят спросить,

"所以 SVGA 与我们常见的序列帧动画有什么区别呢？"

На него можно ответить из двух измерений:

  1. Детализация элементов анимации (Оптимизировать 1):
    Частицы SVGA очень мелкие и управляемые.
    Кадры последовательности имеют только один слой.

  2. Содержимое анимированного элемента (Оптимизация 2):
    SVGA может быть использованвектора такжебитовая картаОбъединено для балансировки накладных расходов ЦП и ГП.
    Кадры последовательности могут использовать только растровые изображения.

Хотя кадры векторной последовательности также существуют, они менее распространены и здесь не обсуждаются.
Та же анимация, форма организации контента следующая:

СВГА:

svga

Последовательность кадров:

frames

Лотти:

lottie

То же самое и при игре:
Разделяйте анимацию на отдельные элементы, рендерите анимацию каждого элемента покадрово, и не нужно повторно рендерить, если он не движется.

UI-Sprites
(Элементы пользовательских пользователей, как то же самое)

.svga(Parser)

Компьютеры Designer часто экспортируют множество файлов .svga, которые невозможно просмотреть напрямую.

svga-file

"这些个不可预览的文件，里面装的到底是什么东西呢?"

Я думал об этом два года назад.

Исходя из принципа "все можно распаковать",

右键-打开方式-The Unarchiver

Unarchive

(╯‵□′)╯︵┻━┻z
Какое к черту решение, скрипт так не написан!
Это потому, что распакованная .svga 2x,
Если вам интересно, вы можете использовать файл 1.x, чтобы разархивировать его.

2.x 的 .svga 是一个船新的版本，
使用的是当下最流行的 Protocol Buffers 来做序列化，
将素材和动效描述文件储存成二进制格式，自然无法直接解压。

Насколько быстрее удаляется файл SVGA, анализирующий JSON,
См. Сравнение 1.x и 2.x ниже.

Сериализовать и десериализировать

    通过某种协议(Proto)
     把对象转换为字节序列的过程称为对象的序列化(Serialize)。
    把字节序列恢复为对象的过程称为对象的反序列化(Deserialize)。
    对象的序列化主要有两种用途：
      1） 把对象的字节序列永久地保存到硬盘上，通常存放在一个文件中；
      2） 在网络上传送对象的字节序列。

Возьмите каштан:

demo-serialize

Ставим слона в холодильник через шаги 1, 2, 3.
Он положен в холодильникСериализация,
Из холодильникадесериализовать,
И шаги 1, 2 и 3 - это то, о чем мы договорились.протокол,
Если этот протокол не соблюдается, то из холодильника достают не слона, а
Может придумать что-нибудь странное.

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

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

векторная поддержка

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

Если вы думаете о векторе как об отношении между точкой и началом координат,
Тогда задачу исследования линейной алгебры можно понимать так:
«Графические свойства ряда связанных точек в двумерной (x y) или трехмерной (x y z) системе координат».
Связь между рядом точек является функцией.

linervectors

Полиномиальное уравнение Бесселя является одной из таких функций.
Его графическое отношение, то есть диаграмма отношения ряда точек, таково:

bezie
Уравнение кривой Безье соответствует кривой Безье,
Кривая Безье выглядит следующим образом:
bezie

Отсюда видно, что(Что?)(╯‵□′)╯ ┴─┴
Ключевые элементы, определяющие кривую Безье:

  • starPoint
  • endPoint
  • controllerPoint1
  • controllerPoint2

По существу, эти точки влияют на полиномиальные коэффициенты уравнения Бесселя.

кривая Безье первого порядка

bezierPath1

starPoint:        :P0
endPoint          :P1 
controllerPoint1  :P0 (重合)
controllerPoint2  :P1 (重合)

Кривая Безье второго порядка

bezierPath2

starPoint:        :P0
endPoint          :P2
controllerPoint1  :P1
controllerPoint2  :P1 (重合)

Кривая Безье третьего порядка

bezierPath3

starPoint:        :P0
endPoint          :P3
controllerPoint1  :P1
controllerPoint2  :P2

Таким образом, все строки в компьютере, Оба могут быть использованы:

var curve = new Bezier(
    P0.x, P0.y,
    P1.x, P1.y,
    P2.x, P2.y,
    P3.x, P3.y,
);

Создано, все безье!
┬─┬ ノ( ' - 'ノ) {настроить хорошо настроить)

И линии, которые мы обычно видим в компьютере,
Или кривая, нарисованная с помощью [Pen Tool] в инструменте дизайнера:

aebezierPaths
Это тоже принцип.

Вот некоторые осторожные студенты, чтобы спросить:
Как упоминалось выше, кривая имеет только четыре точки.
Но каждый раз, когда мы перетаскиваем линию в AE,
Будет начало и конец,
Эти две точки имеют две контрольные точки соответственно,
В Цзянцзы шесть часов,
что случилось?

При перетаскивании кривой вы можете нажать клавишу Alt, чтобы разделить две контрольные точки,
Тогда вы обнаружите, что единственное, что действительно влияет на текущую кривую, это:

  • Контрольная точка вторая исходной точки;
  • Контрольная точка одна из конечных точек;

То есть, по сути, в AE он также соответствует правилам, о которых мы говорили выше.
Какие два дополнительных очка?
они соответственно:

  • Контрольная точка 2 конечной точки последней кривой;
  • Контрольная точка Одна из отправной точки следующей кривой;

Это не влияет на текущую кривую.

Путь в SVG

Если вы откроете файл SVG (XML) в текстовом редакторе,
Вы найдете абзац в SVG:

M153 334 
C153 334 151 334 151 334 
C151 339 153 344 156 344 
C164 344 171 339 171 334 
C171 322 164 314 156 314 
C142 314 131 322 131 334 
C131 350 142 364 156 364 
C175 364 191 350 191 334 
C191 311 175 294 156 294 
C131 294 111 311 111 334 
C111 361 131 384 156 384 
C186 384 211 361 211 334 
C211 300 186 274 156 274

Буква M внутри соответствует методу MoveTo API рисования:

- (void)moveToPoint:(CGPoint)point;

C, соответствующие кривой Безье, рисуется:

- (void)addCurveToPoint:(CGPoint)endPoint 
          controlPoint1:(CGPoint)controlPoint1 
          controlPoint2:(CGPoint)controlPoint2;

Отсутствующий здесь starPoint на самом деле является последним endPoint или movePoint,
** Так что трех баллов в C достаточно,
Их порядок таков: endPoint, controlPoint1, controlPoint2;
Приведенные выше два предложения являются основной причиной моей недели на работе.

Путь в SVGA

Эта спецификация пути также используется в SVGA,
Однако в исходном коде конвертера для SVGA обнаружено, что
Порядок C(Curve): controlPoint1, controlPoint2, endPoint;
И точка, заданная M(MoveTo): controlPoint1;

Игрок тоже ошибается и сам меняет порядок разбора C(Curve):

SVGAOC

В это время M(MoveTo) использует точку: controlPoint1,
Экспортированная анимация выглядит так:

aebicycle

Пожалуйста, используйте определитель, чтобы найти теневую область психологии Чжан Чжаня...
Исправление, конечно же, заключается в том, чтобы исправить путь в SVGA обратно...

TrimPath в SVGA

TrimPath — это стиль векторной анимации.

TrimPath на самом деле должен называться Trim Bezier,
Все линии в SVGA — это кривые Безье.
Он имеет три связанных свойства:

trimPathStart,
trimPathEnd,
trimPathOffset，

Они указывают, где начинается Путь, где он заканчивается и как далеко от начальной точки.
Что касается того, как его использовать, это зависит от нашего воображения.

В слое формы AE вы можете добавить:

add-trimpath

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

muti-trimpath

Динамический дисплей:

trimpathdemo

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

пройти черезSVGA PreviewМы можем ясно понять его структуру:

4circlepath

Затем мы передаем PathMeasure Android (веб слишком сложен для отладки)
для имитации SVGA, чтобы восстановить эффект обрезки этой анимации.

Здесь SVGA используется в бизнесе Amway для восстановления этих эффектов одним щелчком мыши.
(Возьми горшок полностью на продукт и дизайн, мы можем уйти с работы пораньше~😯)

SVGAnimation Demo

TrimPathActivity

TrimAndroidDemo_540x960_4s

PathUtil Подробнее об этом позже.

trimmedPath в SVGA AE Converter
svgatrimmedPath

···

маска маска

Маски и маски по сути являются альфа-каналами для направленной обработки нарисованных слоев.

mask

Задайте свойства маски через панель в AE:

mask

Преобразователь получает параметры через,
Настройте сценарии воспроизведения на iOS и Android & Web.

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

Goodness

Вы также можете установить свойство маски:

mask

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

Сравнение производительности

«Сначала установила небольшую цель, которая может быть достигнута, например, анимация, достигающая 60 кадров в секунду, анимационный анализ завершен в течение 100 мс».

Накладные расходы на оборудование — это очень общее понятие.Если накладные расходы слишком велики, оборудование будет зависать, пропадать кадры, выделяться тепло, энергопотребление, виновник и корень всех зол.

С точки зрения развития,
Размер файла, трудоемкий синтаксический анализ, использование памяти, ЦП и ГП — все параметры, которые могут измерить стоимость.
Ниже приведен анализ производительности 1.x, 2.x, кадров последовательности и GIF по этим измерениям.

SVGA 1.x

1.x — исходная версия формата SVGA,
Фиг.8 Элемент ресурсов фактически записывается вместе с элементами каждого кадра JSON Performance Performance Data, сжаты по-баллы в ZIP.

SVGA 2.x

SVGA 2.x преобразует файл описания анимации в формате JSON в двоичный файл Protobuf, который значительно улучшает скорость декодирования файла.

Кадры последовательности и GIF-файлы

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

Сравнение 1.x и 2.x

compare-total-data

резюме:

  1. Протестируйте в относительно чистой демо-среде;
  2. Тестовый телефон — iPhone 7P 12.3.1 Xiaomi 6 MIUI 9.6;
  3. Анимация - Shengli (90% растровое изображение) Brithday (вектор 90%);
  4. Динамическая сложность: шэнли > день рождения;

Сторона iOS:

  1. 2.x пиковое время декодирования быстрее, чем 1.x, когда имеется больше (90%) растровых текстур движения70%, средне быстро84%;
  2. 2.x пиковое время декодирования быстрее, чем 1.x, когда есть больше элементов вектора движения (90%)66%, средне быстро104%;
  3. Другие данные похожи, и логика рендеринга после декодирования одинакова;

Сторона Android:

  1. 2.x пиковое время декодирования быстрее, чем 1.x, когда есть больше элементов вектора движения (90%)308%, средне быстро276%;
  2. При длительном времени декодирования загрузка ЦП будет высокой в ​​течение длительного времени в процессе декодирования файлов 1.x.
  3. Остальные данные аналогичны, и логика рендеринга после декодирования такая же;

Таблица загрузки ЦП анимации Android 1.x:

android-cpu-cost

В заключение:

  1. Скорость декодирования файлов SVGA 2.x выше, чем у 1.x, средняя высота120%, разница между младшими и средними моделями более очевидна.
  2. Чем больше векторных элементов, тем больше размер файла описания анимации и тем больше разрыв во времени декодирования.
  3. Логика последующего рендеринга такая же, да и остальные данные мало чем отличаются.

приложение

Подробный техпаспорт

compare-detail-data

compare-detail2-data

Категории