Apple Motion’a SVG aktarımı: Animasyon öncesi kontrol

Apple Motion, SVG içe aktarımını destekler. Apple’ın Motion 6.3 özellik kılavuzu, SVG desteğini listeler; dolayısıyla her SVG’yi başka bir biçime yönlendiren eski öneriler, bu sürüm için güvenilir bir başlangıç noktası değildir. Statik bir dosyayla başlayın, medya olarak içe aktarın ve animasyonu oluşturmadan önce sonucu kontrol edin.

Yanıtlamanız gereken üç farklı soru vardır: görsel görünüyor mu, saydamlığı doğru görünüyor mu ve bağımsız hareket etmesi gereken parçaları kontrol edebiliyor musunuz? Tuvalde bir grafiğin görünmesi yalnızca ilk soruyu yanıtlar. Her SVG yolunun yerleşik bir Motion şekline dönüştüğünü göstermez.

Bu iş akışı, bu kontrolleri görünür tutmak için basit bir halka ve disk amblemi kullanır. Bu, kurulu sürümünüzde denemeniz için belgelere dayanan bir prosedürdür; Motion’ın kendi içe aktarma sistemiyle gerçekleştirilmiş bir testin raporu değildir.

İş akışını Motion sürümünüze ve görevinize uygun seçin

Eski bir forum yazısını izlemeden veya büyük bir koleksiyonu içe aktarmadan önce kurulu sürümü kontrol edin. Apple’ın güncel Work with SVG files in Motion kılavuzu, hem desteklenen kullanımı hem de belirli sınırlamaları açıklar. Kurulumunuz belgelenen sürümden farklıysa görselin kendisini teşhis etmeden önce ilgili sürümün kılavuzunu kontrol edin.

İçe aktardıktan sonra ne olması gerektiğine karar verin:

Son satır özellikle önemlidir. Motion’ın SVG belgesi, animasyonlu SVG’lerin yalnızca ilk karelerini gösterdiğini söyler. Animasyonlu dosyayı içe aktarmak, animasyonunu içe aktarmakla aynı şey değildir.

Animasyon uygulamaları arasında seçim yapıyorsanız After Effects logo vektörleştirme kılavuzu ve Adobe Animate vektörleştirme iş akışı, kendi hedef nesnelerini açıklar. Bunların komutları ve nesne türleri, Motion’ın medya içe aktarımıyla birbirinin yerine kullanılamaz.

İnceleyebileceğiniz bir kaynakla başlayın

Bu özgün örneği orbit-mark.svg olarak kaydedin:

<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>

Turkuaz halkanın merkezi boştur. Daha küçük, mercan rengi bir disk, bir boşlukla ayrılmış olarak halkanın sağ üstünde durur. Dosyada arka plan dikdörtgeni, metin, harici görsel referansı, betik veya animasyon yoktur. Bu seçimler, dosyayı daha sonra ayrıntılı bir amblemi kontrol etmek için yararlı bir temel hâline getirir.

Önce kaynak düzenleyicide açın. Halkanın açıklığını, aradaki boşluğu ve tuval sınırını kontrol edin. Düzenlenebilir ana dosyayı saklayın; görseli düzeltmek ve içe aktarma ayarını düzeltmek farklı işlerdir.

Kendi dosyanızda teslim kopyasını yalnızca belirli bir özelliğin sorun çıkardığı yerlerde sadeleştirin. Yazı içeren bir tasarım, açık bir yazı tipi stratejisi gerektirir; dışa aktarmadan önce SVG yazı tipi değişikliği kontrol listesini kullanın. Teslim kopyasında yazıların yola dönüştürülmesi gerekse bile ana dosyada düzenlenebilir metni koruyun. Yalnızca hedef uygulama farklı diye zaten kullanılabilir olan bir vektörü yeniden vektörleştirmeyin.

Kompozisyona içe aktarın, ardından medyayı kontrol edin

Amblemin görünmesini istediğiniz grubu seçin. Güncel Motion içe aktarma iş akışında File > Import > Media seçeneğini kullanın veya Command-I tuşlarına basın, SVG’yi seçip içe aktarın. Dosyayı Finder’dan tuvale veya Layers listesindeki bir gruba da sürükleyebilirsiniz.

İçe aktardıktan sonra grafiği tuvalde, katmanını ise hedeflenen grupta arayın. Dosyayı yalnızca adının Media listesinde görünüp görünmediğine göre değerlendirmeyin. Apple, medyayı kompozisyona eklemeden bu listeye içe aktarmayı da belgeler; bu durumda görsel henüz tuvalde veya Layers listesinde görünmez.

İncelemek için amblemi kontrast oluşturan bir arka planın üzerine yerleştirin. Açık merkeze ve iki parça arasındaki boşluğa bakın. Koyu bir görüntüleyici arka planı, eksik içerikle saydam içeriği yanıltıcı biçimde benzer gösterebilir.

Motion’ın arka plan değiştirme davranışını incelemek için Project bölmesinde Media öğesine tıklayıp SVG nesnesini seçin. Media Inspector panelini açın. Apple’ın Work with SVG files in Motion sayfası, Use Background Color seçeneğini ve ilgili renk kontrollerini belgeler. Amaç kaynağın saydam alanlarını korumaksa bu değiştirmeyi kapalı tutun; yalnızca bilinçli olarak yerine bir renk koymak istediğinizde etkinleştirin.

SVG’nin içine zaten çizilmiş opak bir dikdörtgen ayrı bir sorundur. Medyanın arka plan seçeneğini kapatmak, görsele ait bir yolu kaldırmaz. Saydam SVG arka planı kılavuzu, bu kaynak düzeyindeki teşhisi ele alır.

Anahtar kare eklemeden önce parçaların kontrolünü test edin

İçe aktarılan amblemi seçip küçük, geri alınabilir bir konum değişikliği yapın. Halka ve disk birlikte hareket ediyorsa bu, tek bir grafik için yararlı bir davranıştır. Konumunu geri alın, ardından planlanan animasyonun daha fazla kontrol gerektirip gerektirmediğini değerlendirin.

Bağımsız hareket eden bir disk için yalnızca o parçayı seçip taşımayı deneyin. Teslimi ancak halka yerinde kaldığında ve hedeflenen nesneye bağımsız olarak erişilebildiğinde kabul edin. SVG grup adı, görünür bir boşluk veya katman küçük resmi, tek başına yeterli kanıt değildir.

Mevcut nesne, ihtiyaç duyduğunuz kontrolleri sunmuyorsa bunları sağlayan bir yapı seçin. Bu basit örnekte halkayı ve diski ayrı yerleşik şekiller olarak çizmek makul bir seçenektir. Apple’ın Draw simple shapes in Motion kılavuzu, Circle aracını ve renk ile kontur kontrollerini açıklar. Halkayı konturla ve dolgusuz, diski ise düz renk dolguyla oluşturun; ardından her nesnenin seçimini ayrı ayrı kontrol edin.

Daha ayrıntılı görseller için başka bir seçenek, bağımsız hareket etmesi gereken parçaları ayrı kaynak dosyaları olarak hazırlamaktır. Ortak bir tuval kullanın ve kaynak düzenleyicide amaçlanan hizalamalarını kaydedin. İçe aktardıktan sonra yerleşimlerini doğrulayın; bir dosya koleksiyonu kendiliğinden animasyona hazır bir düzene dönüşmez.

Bu, gerekli nesneler hakkında bir karardır; SVG içe aktarımının görseli yerleşik şekillere ayırdığına dair bir vaat değildir. Nokta düzeyinde deformasyona ihtiyacınız varsa animasyona başlamadan önce seçilen yapının gerekli geometri kontrollerini sağladığını belirleyin.

Desteklenmeyen içeriği daha basit bir kopyayla teşhis edin

Apple’ın SVG sınırlamaları, dosyanın kaynak düzenleyiciden farklı görünebilmesinin çeşitli nedenlerini belirtir. Sonraki kontrolü seçmek için belirtiyi kullanın.

Harici referans sınırlamasını, kendi kendine yeterli her olası SVG özelliğinin çalıştığının kanıtı olarak yorumlamayın. Daha küçük bir temel dosya, bağımlılığı ayırmaya yardımcı olur; ancak son görselinizin yine de ayrıca kontrol edilmesi gerekir.

Statik görünüm doğru olduğunda amblemi kompozisyonda kullanılan en küçük ve en büyük boyutlarda inceleyin. Halkanın iç açıklığını ve diskin yanındaki boşluğu izleyin. Ardından dışa aktarılmış kısa bir bölümü hedeflenen teslim çözünürlüğünde inceleyin. Kaynak geometrisinin vektör olması, birleştirmeyi, efektleri ve son video karesini kontrol etme ihtiyacını ortadan kaldırmaz.

Yalnızca raster olarak bulunan amblemi Motion için hazırlayın

Düzenlenebilir amblem kayıpsa ve yalnızca basit bir PNG veya JPG kaldıysa PerfectVector’ın görselden vektöre dönüştürme iş akışı, statik bir SVG adayı hazırlamanıza yardımcı olabilir. Ambleme göre kırpın, önizlemede dolmuş halka açıklığını, birleşmiş diski veya istenmeyen arka plan şekillerini inceleyin ve adayı kaynakla karşılaştırın. Kabul ettiğiniz görseli indirin, ardından içe aktarma ve bağımsız nesne kontrollerini tekrarlayın.

Vektörleştirme; anahtar kareleri, zamanlamayı, yerleşik Motion katmanlarını veya bir animasyon rig’ini geri getirmez. Mevcutsa vektör ana dosyasını kullanın. Görünüşlerini daha iyi koruyorsa fotoğrafları ve yoğun efektli görselleri raster olarak tutun; asıl gereksinim yerleşik nesne kontrolüyse basit bir halka ve diski doğrudan Motion’da çizin.

Projeyi başka birine teslim etmeden önce kaynak dosya adını, Motion sürümünü, arka plan seçimini ve hangi öğelerin ayrı kalması gerektiğini kaydedin. Düzenlenebilir ana dosyayı ve amaçlanan düzeni gösteren bir referansı ekleyin. Blogun görsel iş akışları, bu teslimden önce gelen hazırlık kararlarını ele alır.

Sık sorulan sorular

Apple Motion, SVG dosyalarını doğrudan içe aktarabilir mi? Evet. Apple’ın Motion 6.3 belgesi SVG desteğini listeler. Kurulu sürümünüzün içe aktarma iş akışını kullanın, ardından görseli ve gerekli kontrollerini inceleyin.

SVG içe aktarmak animasyonunu korur mu? Hayır. Motion, animasyonlu SVG’nin yalnızca ilk karesini gösterir. Bu kare saydamsa içe aktarılan görsel boş görünebilir.

SVG’min Motion’da neden renkli bir arka planı var? Media Inspector içindeki Use Background Color seçeneğini kontrol edin ve kaynakta opak bir arka plan şekli olup olmadığını inceleyin. Medya arka plan ayarı ile SVG’nin içine çizilmiş bir dikdörtgen ayrı nedenlerdir.

Her SVG yolu düzenlenebilir bir Motion şekline dönüşür mü? Başarılı bir içe aktarımdan bunu varsaymayın. Gerekli parçaların ve geometri kontrollerinin mevcut olup olmadığını test edin. Animasyon bağımsız kontrol gerektiriyorsa ayrı nesneler hazırlayın veya uygun bir yerleşik yapı kullanın.

Kaynaklar

1. Apple — What’s new in Motion — Motion 6.3’ün belgelenmiş SVG desteği.
2. Apple — Work with SVG files in Motion — saydamlık kontrolleri ve SVG özellik sınırlamaları.
3. Apple — Import media into Motion — medya içe aktarımı, gruba yerleştirme ve yalnızca Media listesine içe aktarma.
4. Apple — Draw simple shapes in Motion — ayrı ayrı kontrol edilen basit geometri için yerleşik bir alternatif.

Tam sekansı hazırlamadan önce tek bir amblemin görünümünü ve nesne yapısını kontrol edin. Yalnızca raster görsel kaldıysa statik bir SVG adayı hazırlayın, ayrı parçaları inceleyin ve animasyona başlamadan önce kabul ettiğiniz dosyayı Motion’da doğrulayın.