Import SVG do Apple Motion: sprawdź grafikę przed animowaniem

Apple Motion obsługuje import SVG. Apple wymienia obsługę SVG w przewodniku po funkcjach Motion 6.3, więc starsze porady zalecające konwersję każdego SVG do innego formatu nie są wiarygodnym punktem wyjścia dla tej wersji. Zacznij od statycznego pliku, zaimportuj go jako multimedia i sprawdź rezultat, zanim zaczniesz tworzyć animację.

Trzeba odpowiedzieć na trzy różne pytania: czy grafika się wyświetla, czy jej przezroczystość wygląda prawidłowo i czy możesz sterować elementami, które mają poruszać się niezależnie? Pojawienie się grafiki na obszarze roboczym odpowiada tylko na pierwsze pytanie. Nie dowodzi, że każda ścieżka SVG stała się natywnym kształtem Motion.

W tym procesie używamy prostego znaku złożonego z pierścienia i koła, aby łatwo było zaobserwować wyniki tych sprawdzeń. To udokumentowana procedura do wypróbowania w zainstalowanej wersji, a nie relacja z testu importu wykonanego bezpośrednio w Motion.

Dopasuj proces do swojej wersji Motion i zadania

Sprawdź zainstalowaną wersję, zanim zastosujesz się do starego wpisu na forum lub zaimportujesz duży zbiór plików. Aktualne wskazówki Apple dotyczące SVG opisują zarówno obsługiwane zastosowania, jak i konkretne ograniczenia. Jeśli Twoja instalacja różni się od wersji opisanej w dokumentacji, sprawdź odpowiedni przewodnik, zanim zaczniesz diagnozować samą grafikę.

Ustal, co ma się dziać po imporcie:

Ostatni wiersz jest szczególnie istotny. Dokumentacja SVG w Motion mówi, że animowane pliki SVG wyświetlają tylko pierwszą klatkę. Import animowanego pliku nie jest tym samym co import jego animacji.

Jeśli wybierasz między aplikacjami do animacji, przewodnik po obrysowywaniu logo w After Effects i proces obrysowywania w Adobe Animate wyjaśniają, jakie obiekty powstają w każdej z nich. Ich poleceń i typów obiektów nie można stosować zamiennie z importem multimediów w Motion.

Zacznij od pliku źródłowego, który możesz sprawdzić

Zapisz ten oryginalny przykład jako 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>

Turkusowy pierścień ma pusty środek. Mniejsze koralowe koło znajduje się nad nim i po jego prawej stronie, oddzielone odstępem. Plik nie zawiera prostokąta tła, tekstu, odwołania do zewnętrznego obrazu, skryptu ani animacji. Dzięki temu stanowi przydatny punkt odniesienia do późniejszego sprawdzenia bardziej złożonego znaku.

Najpierw otwórz go w edytorze źródłowym. Sprawdź otwór pierścienia, odstęp i granice obszaru roboczego. Zachowaj edytowalny plik główny, ponieważ poprawianie grafiki i poprawianie ustawienia importu to różne zadania.

W przypadku własnego pliku upraszczaj kopię do przekazania tylko tam, gdzie konkretna funkcja powoduje problem. Projekt z napisami wymaga jasno określonej strategii obsługi fontów; przed eksportem skorzystaj z listy kontrolnej zmian fontów w SVG. Zachowaj edytowalny tekst w pliku głównym, nawet jeśli w kopii do przekazania napisy muszą być zamienione na krzywe. Nie wektoryzuj ponownie grafiki wektorowej, która już nadaje się do użycia, tylko dlatego, że aplikacja docelowa jest inna.

Zaimportuj grafikę do kompozycji, a następnie sprawdź multimedia

Wybierz grupę, w której ma się pojawić znak. W aktualnym procesie importu w Motion wybierz File > Import > Media lub naciśnij Command-I, wybierz plik SVG i zaimportuj go. Możesz też przeciągnąć plik z Findera na obszar roboczy lub do grupy na liście Layers.

Po imporcie sprawdź, czy grafika jest widoczna na obszarze roboczym, a jej warstwa znajduje się w wybranej grupie. Nie oceniaj pliku wyłącznie na podstawie tego, czy jego nazwa pojawia się na liście Media. Apple opisuje też import do tej listy bez dodawania multimediów do kompozycji; w takim przypadku grafika nie pojawi się jeszcze na obszarze roboczym ani na liście Layers.

Umieść znak na kontrastowym tle, aby go sprawdzić. Przyjrzyj się pustemu środkowi i przestrzeni między dwoma elementami. Ciemne tło podglądu może sprawić, że brakująca zawartość i przezroczysta zawartość będą wyglądać łudząco podobnie.

Aby sprawdzić zastępowanie tła w Motion, kliknij Media w panelu Project i wybierz obiekt SVG. Otwórz Media Inspector. Na stronie Apple dotyczącej SVG opisano opcję Use Background Color i powiązane ustawienia koloru. Pozostaw tę opcję wyłączoną, jeśli chcesz zachować przezroczyste obszary pliku źródłowego; włącz ją tylko wtedy, gdy celowo chcesz zastąpić je kolorem.

Nieprzezroczysty prostokąt już narysowany wewnątrz SVG to osobny problem. Wyłączenie opcji tła multimediów nie usuwa ścieżki należącej do grafiki. Przewodnik po przezroczystym tle SVG opisuje diagnozowanie tego problemu w pliku źródłowym.

Sprawdź sterowanie elementami przed dodaniem klatek kluczowych

Zaznacz zaimportowany znak i wprowadź niewielką, odwracalną zmianę położenia. Jeśli pierścień i koło przesuwają się razem, jest to przydatne zachowanie dla pojedynczej grafiki. Przywróć jej położenie, a następnie zastanów się, czy planowana animacja wymaga większej kontroli.

Jeśli koło ma poruszać się niezależnie, spróbuj zaznaczyć i przesunąć tylko ten element. Zaakceptuj przekazaną grafikę dopiero wtedy, gdy pierścień pozostaje na miejscu, a wybrany obiekt można wskazać niezależnie. Nazwa grupy SVG, widoczny odstęp lub miniatura warstwy same w sobie nie są wystarczającym dowodem.

Jeśli dostępny obiekt nie udostępnia potrzebnych ustawień, wybierz konstrukcję, która je zapewnia. W tym prostym przykładzie rozsądną opcją jest narysowanie pierścienia i koła jako osobnych natywnych kształtów. Przewodnik Apple po prostych kształtach wyjaśnia działanie narzędzia Circle oraz jego ustawień koloru i obrysu. Utwórz pierścień z obrysem i bez wypełnienia, a koło z jednolitym wypełnieniem, a następnie sprawdź zaznaczanie każdego obiektu osobno.

W przypadku bardziej złożonej grafiki inną opcją jest przygotowanie osobnych plików źródłowych dla elementów, które mają poruszać się niezależnie. Zachowaj wspólny obszar roboczy i zapisz ich zamierzone ułożenie w edytorze źródłowym. Sprawdź ich położenie po imporcie; zbiór plików nie staje się automatycznie układem gotowym do animacji.

To decyzja o wymaganych obiektach, a nie obietnica, że import SVG rozdzieli grafikę na natywne kształty. Jeśli potrzebujesz deformacji na poziomie węzłów, upewnij się, że wybrana konstrukcja zapewnia wymagane ustawienia geometrii, zanim przystąpisz do animowania.

Diagnozuj nieobsługiwaną zawartość za pomocą prostszej kopii

Opisane przez Apple ograniczenia SVG wskazują kilka powodów, dla których plik może wyglądać inaczej niż w edytorze źródłowym. Na podstawie objawu wybierz kolejny element do sprawdzenia.

Nie traktuj ograniczenia dotyczącego odwołań zewnętrznych jako dowodu, że każda możliwa funkcja samowystarczalnego pliku SVG działa. Mniejszy plik bazowy pomaga wyizolować zależność, ale ostateczna grafika nadal wymaga osobnego sprawdzenia.

Gdy statyczny wygląd jest już prawidłowy, sprawdź znak w najmniejszym i największym rozmiarze używanym w kompozycji. Zwróć uwagę na otwór wewnątrz pierścienia i odstęp obok koła. Następnie sprawdź krótki wyeksportowany fragment w docelowej rozdzielczości. Wektorowa geometria źródłowa nie eliminuje potrzeby sprawdzenia składania obrazu, efektów i końcowej klatki wideo.

Przygotuj do Motion znak dostępny tylko jako obraz rastrowy

Jeśli brakuje edytowalnego znaku i pozostał tylko prosty plik PNG lub JPG, proces konwersji obrazu na grafikę wektorową w PerfectVector może pomóc przygotować statyczny plik SVG do oceny. Przytnij obraz do znaku, sprawdź w podglądzie, czy otwór pierścienia nie został wypełniony, koło nie zostało połączone z pierścieniem i nie pojawiły się niepożądane kształty tła, a następnie porównaj proponowaną grafikę ze źródłem. Pobierz zaakceptowaną grafikę, po czym powtórz import i sprawdzenia niezależności obiektów.

Wektoryzacja nie odzyskuje klatek kluczowych, rozkładu w czasie, natywnych warstw Motion ani systemu sterowania animacją. Korzystaj z istniejącego wektorowego pliku głównego, jeśli jest dostępny. Zachowaj zdjęcia i obrazy z wieloma efektami w postaci rastrowej, gdy pozwala to lepiej utrzymać ich wygląd; narysuj prosty pierścień i koło bezpośrednio w Motion, jeśli rzeczywistym wymaganiem jest sterowanie natywnymi obiektami.

Zanim przekażesz projekt komuś innemu, zapisz nazwę pliku źródłowego, wersję Motion, wybór tła i elementy, które muszą pozostać osobne. Dołącz edytowalny plik główny oraz materiał referencyjny pokazujący zamierzony układ. Opisane na blogu procesy przygotowania grafiki obejmują decyzje, które należy podjąć przed jej przekazaniem.

Najczęściej zadawane pytania

Czy Apple Motion może bezpośrednio importować pliki SVG? Tak. Dokumentacja Apple dla Motion 6.3 wymienia obsługę SVG. Zastosuj proces importu odpowiedni dla zainstalowanej wersji, a następnie sprawdź grafikę i wymagane możliwości sterowania nią.

Czy import SVG zachowuje jego animację? Nie. Motion wyświetla tylko pierwszą klatkę animowanego SVG. Jeśli ta klatka jest przezroczysta, zaimportowana grafika może wyglądać na pustą.

Dlaczego mój SVG ma kolorowe tło w Motion? Sprawdź opcję Use Background Color w Media Inspector i sprawdź, czy plik źródłowy zawiera nieprzezroczysty kształt tła. Ustawienie tła multimediów i prostokąt narysowany w SVG to dwie odrębne przyczyny.

Czy każda ścieżka SVG staje się edytowalnym kształtem Motion? Nie zakładaj tego na podstawie udanego importu. Sprawdź, czy dostępne są wymagane elementy i ustawienia geometrii. Przygotuj osobne obiekty lub użyj odpowiedniej natywnej konstrukcji, gdy animacja wymaga niezależnego sterowania.

Źródła

1. Apple — What’s new in Motion — udokumentowana obsługa SVG w Motion 6.3.
2. Apple — Work with SVG files in Motion — ustawienia przezroczystości i ograniczenia funkcji SVG.
3. Apple — Import media into Motion — import multimediów, umieszczanie w grupie i import wyłącznie do listy Media.
4. Apple — Draw simple shapes in Motion — natywna alternatywa dla prostej geometrii sterowanej osobno.

Sprawdź wygląd i strukturę obiektów jednego znaku, zanim przygotujesz całą sekwencję. Jeśli pozostała tylko grafika rastrowa, przygotuj statyczny plik SVG do oceny, sprawdź osobne elementy i zweryfikuj zaakceptowany plik w Motion przed animowaniem.