Импорт SVG в Apple Motion: проверьте графику до анимации

Apple Motion поддерживает импорт SVG. Руководство Apple по функциям Motion 6.3 перечисляет поддержку SVG, поэтому старые советы переводить каждый SVG в другой формат — ненадежная отправная точка для этой версии. Начните со статичного файла, импортируйте его как медиа и проверьте результат перед созданием анимации.

Нужно ответить на три разных вопроса: появляется ли графика, правильно ли выглядит прозрачность и можно ли управлять частями, которым нужно независимое движение? Появление графики на холсте отвечает только на первый. Оно не устанавливает, что каждый контур SVG стал встроенной фигурой Motion.

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

Подберите процесс под версию Motion и задачу

Проверьте установленную версию перед следованием старому сообщению на форуме или импортом большой коллекции. Текущие рекомендации Apple по SVG описывают поддерживаемое использование и конкретные ограничения. Если установка отличается от документированной версии, проверьте соответствующее руководство перед диагностикой самой графики.

Решите, что должно происходить после импорта:

Последняя строка особенно важна. Документация Motion по SVG говорит, что анимированные SVG показывают только первый кадр. Импорт анимированного файла не равен импорту его анимации.

Если выбираете между приложениями анимации, руководство по трассировке логотипов в After Effects и процесс трассировки Adobe Animate объясняют собственные целевые объекты. Их команды и типы объектов не взаимозаменяемы с медиаимпортом Motion.

Начните с исходника, который можно проверить

Сохраните этот исходный пример как orbit-mark.svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 120">
  <circle cx="68" cy="66" r="34" fill="none" stroke="#157D78" stroke-width="14"/>
  <circle cx="126" cy="24" r="12" fill="#EF8067"/>
</svg>

Бирюзовое кольцо имеет пустой центр. Меньший коралловый диск расположен выше и правее, отделенный зазором. В файле нет фонового прямоугольника, текста, внешней ссылки на изображение, скрипта или анимации. Поэтому он полезен как исходная проверка более сложной эмблемы позднее.

Сначала откройте его в исходном редакторе. Проверьте отверстие кольца, зазор и границу холста. Сохраните редактируемый оригинал, поскольку исправление графики и исправление настройки импорта — разные задачи.

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

Импортируйте в композицию, затем проверьте медиа

Выберите группу, где должна появиться эмблема. В текущем процессе импорта Motion выберите File > Import > Media или нажмите Command-I, выберите SVG и импортируйте. Также можно перетащить файл из Finder на холст или в группу списка Layers.

После импорта найдите графику на холсте и ее слой в нужной группе. Не оценивайте файл только по появлению имени в списке Media. Apple также описывает импорт в этот список без добавления медиа в композицию; в таком случае оно пока не появится на холсте или в Layers.

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

Для проверки замены фона Motion нажмите Media на панели Project и выберите объект SVG. Откройте Media Inspector. Страница Apple по SVG описывает Use Background Color и связанные настройки цвета. Оставьте эту замену выключенной, если цель — сохранить прозрачные области исходника; включайте ее только при намеренной замене цвета.

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

Проверьте управление частями перед добавлением ключевых кадров

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

Для независимо движущегося диска попробуйте выделить и переместить только его. Принимайте результат передачи лишь когда кольцо остается на месте, а нужный объект доступен независимо. Одного названия группы SVG, видимого зазора или миниатюры слоя недостаточно как доказательства.

Если доступный объект не дает нужных элементов управления, выберите конструкцию, которая дает. Для этого простого примера разумно нарисовать кольцо и диск как отдельные встроенные фигуры Motion. Руководство Apple по простым фигурам объясняет инструмент Circle и его управление цветом и обводкой. Постройте кольцо с обводкой и без заливки, а диск со сплошной заливкой, затем отдельно проверьте выделение каждого объекта.

Для более сложной графики еще один вариант — подготовить отдельные исходные файлы частей, которым нужно независимое движение. Сохраните общий холст и запишите нужное выравнивание в исходном редакторе. Проверьте размещение после импорта; набор файлов не становится автоматически компоновкой, готовой к анимации.

Это решение о нужных объектах, а не обещание, что импорт SVG разбивает графику на встроенные фигуры Motion. Если нужна деформация на уровне точек, установите наличие нужных элементов управления геометрией у выбранной конструкции перед началом анимации.

Диагностируйте неподдерживаемое содержимое на более простой копии

Ограничения SVG Apple указывают несколько причин отличия файла от исходного редактора. Используйте симптом для выбора следующей проверки.

Не воспринимайте ограничение внешних ссылок как доказательство работы каждой возможной функции автономного SVG. Меньший базовый файл помогает изолировать зависимость, но окончательной графике все равно нужна собственная проверка.

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

Подготовьте эмблему только в растре для Motion

Если редактируемая эмблема отсутствует и остался только простой PNG или JPG, процесс преобразования изображения в вектор в PerfectVector может помочь подготовить пробный статичный SVG. Обрежьте до эмблемы, проверьте предпросмотр на заполненное отверстие кольца, слитый диск или ненужные фоновые фигуры и сравните пробный вариант с исходником. Скачайте принятую графику, затем повторите проверки импорта и независимых объектов.

Векторизация не восстанавливает ключевые кадры, временные параметры, встроенные слои Motion или анимационный риг. Используйте существующий векторный оригинал, если доступен. Сохраняйте фотографии и изображения с обилием эффектов в растре, если это лучше сохраняет вид; рисуйте простое кольцо и диск напрямую в Motion, когда реальное требование — управление встроенными объектами Motion.

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

Частые вопросы

Может ли Apple Motion импортировать SVG напрямую? Да. Документация Apple Motion 6.3 перечисляет поддержку SVG. Используйте процесс импорта для установленной версии, затем проверьте графику и необходимые элементы управления.

Сохраняет ли импорт SVG его анимацию? Нет. Motion показывает только первый кадр анимированного SVG. Если он прозрачный, импортированная графика может выглядеть пустой.

Почему SVG имеет цветной фон в Motion? Проверьте Use Background Color в Media Inspector и исходник на непрозрачную фоновую фигуру. Настройка медиафона и прямоугольник, нарисованный в SVG, — отдельные причины.

Становится ли каждый контур SVG редактируемой фигурой Motion? Не предполагайте это по успешному импорту. Проверьте доступность нужных частей и управления геометрией. Подготовьте отдельные объекты или используйте подходящую конструкцию из встроенных объектов Motion, если анимации нужен независимый контроль.

Источники

1. Apple — What’s new in Motion — Документированная поддержка SVG в Motion 6.3.
2. Apple — Work with SVG files in Motion — Управление прозрачностью и ограничения функций SVG.
3. Apple — Import media into Motion — Импорт медиа, размещение в группе и импорт только в список Media.
4. Apple — Draw simple shapes in Motion — Встроенные средства для отдельно управляемой простой геометрии.

Проверьте вид и структуру объектов одной эмблемы перед подготовкой всей последовательности. Если осталась только растровая графика, подготовьте пробный статичный SVG, проверьте отдельные части и подтвердите принятый файл в Motion перед анимацией.