Studio Editor: Rive Animasyonu Ekleme ve Ayarlama
4 dakikalık okuma
Bu makalede
- 1. Adım | Rive ögesini ekleyin
- 2. Adım | Rive ögesini özelleştirin
- SSS
Rive animasyonları ekleyerek müşterinizin sitesini zengin, interaktif ve etkileyici deneyimlerle geliştirin. Sorunsuz entegrasyonumuz sayesinde Rive topluluğundaki önceden tasarlanmış öğeleri veya kendi Rive tasarımlarınızı kolayca entegre edebilirsiniz.
Rive dosyasını yükledikten sonra, editörden özelleştirin – uygunluğu ayarlayın, belirli bir çalışma yüzeyi ve durum makinesi seçin, animasyonu otomatik oynatmaya ayarlayın ve daha fazlasını yapın. Bu, ziyaretçileri etkileyen ve projelerinizi bir üst seviyeye taşıyan dinamik deneyimler oluşturma esnekliği sağlar.
Rive'da yeni misiniz?
Platformu kullanarak nasıl animasyon tasarlayacağınızı öğrenmek için Rive Docs'u adresini ziyaret edin.
1. Adım | Rive ögesini ekleyin
Öge Ekle panelinden Rive ögesini ekleyerek başlayın. Ardından, ögede gösterilen varsayılan animasyonu kendi Rive dosyanızla değiştirebilirsiniz.
Başlamadan önce:
Entegrasyona hazır olması için Rive dosyasını sitenin Medya Yöneticisi'ne önceden yüklemenizi öneririz. Ancak, ögeyi ayarlarken de yükleyebilirsiniz.
Rive ögesini eklemek için:
- Editörünüze gidin.
- Editörün sol çubuğundaki Öge Ekle simgesine
tıklayın. - Medya'ya tıklayın.
- Rive seçeneğine tıklayın.
- Rive Animasyonları'nın yanındaki Siteye Ekle simgesine
tıklayın.
- Rive dosyasını yükleyin:
- Dosyayı Değiştir'e tıklayın.
- (Medya Yöneticinizde) Daha önceden yüklediğiniz .riv dosyasını seçin veya yeni bir dosya yüklemek için + Medya Yükle'ye tıklayın.
- Sayfaya Ekle'ye tıklayın.
2. Adım | Rive ögesini özelleştirin
Müşterinizin vizyonu ve site tasarımı ile uyumlu olması için Rive animasyonunuza ince ayar yapın. Animasyonun siteyle nasıl entegre olacağını belirlerken, hizalama ve oynatma ayarlarının yapılandırmasından çalışma yüzeyi seçimine kadar geniş bir çerçevede tüm kontrol sizde olur.
Kesme noktalarıyla çalışma:
Varsayılan olarak, Rive animasyonunuzun ayarları tüm kesme noktalarına uygulanır.
Rive ögesini özelleştirmek için:
- Editörünüzde Rive ögesine tıklayın.
- Ayarlar simgesine
tıklayın ve mevcut ayarları yapılandırın:
- Medya: Farklı bir dosya seçmek / yüklemek için .riv Dosyasını Değiştir'e tıklayın.
- Çalışma yüzeyi: Rive dosyanızda birden fazla çalışma yüzeyi (ör. tekil tuvaller) varsa, ögede göstermek istediğiniz tuvali seçebilirsiniz.
- Durum makinesi: Rive dosyanız birden fazla durum makinesi (ör. animasyon kombinasyonları) içeriyorsa, ögenin hangisini oynatacağını belirleyebilirsiniz.
- Sığdır: Ögenin sınırlayıcı kutusuna animasyonun nasıl sığacağını (ör. kapla, doldur, vb.) belirleyin.
- Hizalama: Ögenin sınırlayıcı kutusunda animasyonun nasıl hizalanacağını (ör. orta, sol alt, vb.) belirleyin.
- Otomatik oynatma: Animasyonun otomatik olarak oynatılıp oynatılmayacağına karar vermek için geçiş düğmesine tıklayın.
- Dokunarak kaydırmayı etkinleştir: Dokunmatik cihazlarda kaydırma davranışının görünmesine izin vermek için geçiş düğmesini etkinleştirin. Ziyaretçiler Rive ögesine dokunduğunda veya sürüklediğinde kaydırma davranışı tetiklenir. Aksi takdirde, dokunma/sürükleme eylemlerinde kaydırma davranışı varsayılan olarak engellenebilir.
- Animasyonda ne oluyor?: Animasyonu tanımlayan bir alt metin yazın. Öge dekoratif amaçlı kullanılıyorsa, Bu animasyon dekoratif, açıklamaya ihtiyacı yok onay kutusunu işaretleyin.
- (İsteğe bağlı) Yeniden boyutlandırmak için ögenin sürükleme tutamaçlarını kullanın.
İpucu: Rive animasyonlarının gösterimi ögenin sınırlayıcı kutusuyla sınırlanır.
Animasyonu doğrudan tuval üzerinde görmek için Animasyonu Önizle'ye tıklayın.
SSS
Daha fazla bilgi edinmek için aşağıdaki sorulara tıklayın.
Rive animasyonları hangi dosya formatında olmalı?
Sayfama birden fazla Rive animasyonu ekleyebilir miyim?
Animasyon düzgün gösterilmiyorsa ne yapmalıyım?
Animasyonumu nasıl duyarlı hale getirebilirim?
Belirlediğim duyarlı davranışları Rive'da kullanabilir miyim?