Rive’a SVG aktarma: Animasyon için düzenlenebilir tasarım

Dosyayı düzenleyiciye sürükleyerek veya Assets panelini kullanarak Rive'a SVG içe aktarabilirsiniz. Rive, tasarımı düzenleyebileceğiniz Rive’ın kendi vektör nesnelerine dönüştürür. İçe aktarılan sonuçta iki kontrol gerekir: Doğru görünüyor mu ve animasyon uygulamak istediğiniz parçaları seçebiliyor musunuz? Rive'ın SVG belgeleri dönüşümü ve sınırlarını açıklar.

Elinizde varsa özgün vektör dosyasından başlayın. Kaynak PNG veya JPG ise görsel olarak korumak, gereken şekilleri çizmek veya önce SVG'ye vektörleştirmek arasında seçim yapın. Vektörleştirme, düzenlenebilir konturları yeniden oluşturmak için yararlıdır; yine de bu konturları animasyona göre düzenlemeniz gerekir.

SVG, Rive içinde neye dönüşür?

İçe aktardıktan sonra Rive nesneleriyle çalışırsınız. Kaynak SVG dışa aktarılan .riv dosyasına eklenmez ve Rive çalışma zamanı ortamları şu anda SVG varlıklarını çalışma sırasında dönüştürmez. Rive dosyasını dışa aktarmadan önce SVG hazırlığını ve içe aktarmayı düzenleyicide tamamlayın. Rive'ın dışa aktarma davranışı bu sınırı açıklar.

Bu ayrım tasarımı seçerken de önemlidir. Şekil katmanı dolguyu ve kontur çizgisini kontrol eder; içindeki yol veya yollar ise geometriyi tanımlar. Bu yolları incelemek için Hierarchy içinde şekli genişletin. Bir üst grubu seçmek, alt öğeleri düzenlenebilir olsa bile tüm illüstrasyonu hareket ettirebilir. Rive'ın şekiller ve yollar rehberi bu yapıyı gösterir.

Kaynak SVG'nin kendisi ayrılmıyorsa değiştirmeden önce grup, bileşik yol veya gömülü görseli belirlemek için SVG nesnesi ve gruptan çıkarma tanısını kullanın.

Dışa aktarmadan önce parçaları hazırlayın

Tasarımı birleştirmeden veya düzleştirmeden önce istediğiniz hareketleri yazın. Bir masa lambası düşünün: başlık sallanacak, kol eğilecek ve taban sabit kalacak. Bu hareketler, seçip düzenleyebileceğiniz ayrı parçalar hazırlamanın uygun olacağını düşündürür.

Aynı yöntem bir karakterin göz kapakları, el sallayan eli veya logo öğesi için de geçerlidir: hareketi adlandırın; ardından kaynakta bu hareketi sağlayacak parçanın olup olmadığını kontrol edin.

Hareketli parçaları planlayın

Kaynak belgede anlamlı parçaları adlandırın ve ana kopyayı koruyun. Birlikte hareket etmesi gereken ilgili ayrıntıları birlikte tutun. Yalnızca nesne listesini kısaltmak için tüm illüstrasyonu tek yolda birleştirmekten kaçının.

İçe aktardıktan sonra bu parçaları düzenlemek ve ayrı dönüşüm kontrolleri vermek için Rive gruplarını kullanın. Rive, Hierarchy içinde grup oluşturup içine nesneler yerleştirmenizi sağlar. Seçimi macOS'ta Command+G, Windows'ta Ctrl+G ile de gruplayabilirsiniz. Rive'ın grup belgeleri bu kontrolleri açıklar.

SVG, Figma veya Illustrator'dan içe aktarın

Kaydedilmiş SVG dosyası

1. Düzenlenebilir ana dosyanın korunması için ayrı bir SVG dışa aktarımı kaydedin.
2. Dosyayı Rive'a sürükleyin veya Assets panelindeki + simgesine tıklayıp içe aktarılacak dosyayı seçin.
3. Tasarımı gereken yere yerleştirin ve Hierarchy içinde yapısını genişletin.
4. Küçük bir parçayı seçip dolgusunu değiştirin; ardından değişikliği geri alın. Yalnızca amaçlanan bölgenin değişip değişmediğini kontrol edin.

İki dosya içe aktarma yöntemi Rive'ın Assets genel bakışında belgelenmiştir. Başarılı içe aktarma, düzenleme kontrolünün başlangıcıdır.

Figma

Figma'da istediğiniz tasarım için Copy as SVG kullanın; ardından Rive düzenleyicisine yapıştırın. Büyük bir kompozisyonun geri kalanını kopyalamadan önce içe aktarılan şekilleri ve görünümü kontrol edin. Bu, Rive'ın belgelenmiş Figma içe aktarma yöntemidir.

Illustrator

SVG stilini Presentation Attributes olarak ayarlayın. Rive, Illustrator'ın dışa aktarma yöntemleri için biraz farklı etiketler belirtir:

• Save As: SVG Options içinde CSS Properties değerini Presentation Attributes yapın.
• Export As: SVG Options içinde Styling değerini Presentation Attributes yapın.
• Doğrudan kopyalayıp yapıştırma: Illustrator bu yöntem için o ayarları kullandığından Export As SVG stil seçeneklerini kontrol edin.

Teslim edilecek SVG'de Preserve Illustrator Editing Capabilities seçeneğini de kapatın. Illustrator ana dosyasını ayrı saklayın. Rive, bu seçeneğin ek Illustrator verisi eklediği, dosya boyutunu artırdığı ve içe aktarıcısının tanımadığı veriler içerebileceği konusunda uyarır. Bu ayarların kaynağı Rive'ın Illustrator rehberidir.

İçe aktarma belirtisini ilk kontrolle eşleştirin

Rive doğrusal ve radyal gradyanları destekler; ancak her SVG özelliğini yeniden üretmez. Aşağıdaki tablo, desteklenmeyen özellikler listesini bir onarım sırasına dönüştürür. İlk kontrol sütunu bir tanı önerisidir; dosyanız için garanti değildir.

Illustrator SVG'si siyah görünüyorsa önce Presentation Attributes dışa aktarma ayarından başlayın; ardından etkilenen şeklin boyasını inceleyin. Siyah tasarım tek başına nedeni belirlemez. Rive'ın inherit için belgelenmiş beyaz varsayılanıyla karıştırılmamalıdır.

Kaybolan görsel içeriği için gömülü raster SVG rehberi, dosyanın gerçek yollar mı yoksa SVG kapsayıcısının içinde resim mi içerdiğini kontrol etmeyi açıklar. Varlık türleri listesine göre Rive, JPEG, PNG ve WebP'yi ayrı görsel varlıkları olarak içe aktarabilir. Dokulu bir arka planı ayrı raster görüntü olarak tutmak doğru seçim olabilir.

İçe aktarma hiç bitmiyorsa

Aynı oturumda küçük, basit bir SVG deneyin. O da başarısız olursa tasarımı yeniden oluşturmadan önce çalışmanızı kaydedip düzenleyiciyi yeniden başlatın. Yalnızca bir dosya başarısız oluyorsa etkilenen bölümü bulana kadar gruplarını ayrı dışa aktarma kopyalarında yalıtın. Bu, oturum sorununu dosyaya özgü sorundan ayırır; evrensel bir karmaşıklık sınırı belirlemez.

PerfectVector bu iş akışına ne zaman dâhil olur?

Kaynak tasarımınız raster görüntüyse ve Rive için düzenlenebilir vektör konturları gerekiyorsa PerfectVector yararlıdır. İki boyutlu bir PNG veya JPG illüstrasyon için görseli SVG yollarına dönüştürün; ardından içe aktarmadan önce sonucu vektör düzenleyicisinde inceleyin. Silüeti, küçük boşlukları ve ayrı hareket etmesi gereken parçalar arasındaki sınırları kontrol edin. Vektörleştirme görünür bölgeleri yeniden oluşturur; özgün katman adlarını geri getirmez veya animasyon eklemlerinizin nerede olması gerektiğini belirlemez.

Lamba örneğine dönelim. Kol ve taban tek bağlantılı şekle dönüştüyse bu sınırı ayırın veya yeniden çizin. Hareket eden bir parça kaynak görselde gizlenmiş bir alanı açığa çıkarıyorsa eksik alanı kendiniz çizin. Animasyonu içe aktarılan yapı üzerine kurmadan önce bunu yapın.

Zaten uygun yollar içeriyorsa özgün SVG'yi kullanın. Birkaç basit geometrik parça için Rive’ın kendi çizim araçlarını kullanın. Görünümleri düzenlenebilir konturlardan daha önemliyse fotoğrafları ve boyalı dokuları raster görüntü varlıkları olarak koruyun. Görsel vektörleştirme genel bakışımız kaynak görsel ödünleşimlerini açıklar; hedefiniz Animate ise Adobe Animate vektörleştirme rehberi ayrı bir iş akışını ele alır.

Animasyonu kurmadan önce bir hareketi kontrol edin

Çalışma kopyasında lamba başlığını seçip hafifçe döndürün. Taban sabit kalırken amaçlanan ayrıntıların onunla hareket ettiğini doğrulayın. Geri alın, kolu seçin ve tekrarlayın. Yanlış parçalar hareket ediyorsa daha fazla yolu düzenlemeden önce üst-alt öğe düzenini inceleyin.

Dönme merkezini de kontrol edin. Rive'da alt öğeler üst öğenin dönüşümlerini devralır; orijin ise dönme veya ölçeklemenin nerede gerçekleşeceğini belirler. Freeze, alt öğeleri hareket ettirmeden üst öğeyi yeniden konumlandırmanızı sağlar; Y ile açıp kapatın ve orijini ayarladıktan sonra kapatın. Kontroller için Rive'ın Freeze and Origin rehberini izleyin.

Animasyona başlamadan önce şunları doğrulayın:

• gereken her parça bağımsız seçilebiliyor;
• dolgular, konturlar, boşluklar ve gradyanlar hâlâ amaçlanan görünümle eşleşiyor;
• ayrı içe aktarılan raster görüntüler, korumayı seçtiğiniz yerlerde bulunuyor;
• hareket, istemeden oluşmuş boşlukları veya eksik gizli tasarımı açığa çıkarmıyor;
• hareketli her parça amaçlanan eklem etrafında dönüyor;
• özgün kaynak ve temiz bir içe aktarma kopyası hâlâ mevcut.

Sık sorulan sorular

SVG içe aktarmak onu Rive'da düzenlenebilir yapar mı? Evet, Rive'ın desteklediği SVG özellikleri için. Gereken parçayı seçmek üzere içe aktarılan tasarımı Hierarchy içinde genişletin. Birkaç bölge hâlâ tek nesne gibi davranıyorsa gruplandırmalarını ve yol yapılarını inceleyin.

SVG'min içindeki görsel neden kayboldu? Rive, SVG içe aktarırken gömülü görselleri yok sayar. Özgün rasterı bulup görsel varlığı olarak içe aktarın veya düzenlenebilir konturlar gerektiğinde uygun tasarımı yollara vektörleştirin.

Rive SVG gradyanlarını destekler mi? Doğrusal ve radyal gradyanlar desteklenir. Gradyan dönüşümleri yok sayıldığı için içe aktardıktan sonra gradyanın yerleşimini ayarlamak gerekebilir.

PNG'yi vektörleştirmek Rive animasyonu oluşturur mu? Vektörleştirme, uygun raster görüntüden SVG geometrisi oluşturabilir. Yine de hareketli parçaları inceleyip ayırmanız, hiyerarşilerini ve orijinlerini ayarlamanız ve animasyonu Rive'da oluşturmanız gerekir.

Kaynaklar

1. Rive — SVG & Vector Assets — Rive’ın kendi nesnelerine dönüşüm, Illustrator ve Figma içe aktarma, çalışma zamanı dışa aktarma davranışı ve desteklenmeyen SVG özellikleri.
2. Rive — Assets — Dosya içe aktarma kontrolleri ve ayrı raster görüntü varlıkları.
3. Rive — Shapes and Paths Overview — Şekil stilleri ve şekil katmanındaki yol geometrisi.
4. Rive — Groups — Parçaları düzenleme ve Hierarchy içindeki gruplandırma kontrolleri.
5. Rive — Freeze and Origin — Üst-alt öğe dönüşümleri ve alt öğe tasarımını hareket ettirmeden orijini yeniden konumlandırma.

---

Tasarımınız PNG veya JPG olarak başlıyorsa ve düzenlenebilir konturlar gerekiyorsa PerfectVector ile SVG hazırlayın. Vektörleştirilmiş parçaları inceleyin, dosyayı Rive'a içe aktarın ve animasyonun geri kalanını kurmadan önce bir bağımsız hareketi deneyin.