Animasyonlar genellikle bir uygulamanın veya web sitesinin görsel çekiciliğini artırır ve kullanıcıların genel katılımını artırır. Forrester Research tarafından yapılan bir araştırmaya göre, iyi hazırlanmış animasyonlara sahip web siteleri, kullanıcı etkileşiminde %400'e kadar artış sağlıyor. İlgi çekici animasyonlar kullanıcıların dikkatini çekebilir ve onları platformla daha fazla etkileşime girmeye teşvik edebilir. Ancak geliştiricilerin, özellikle daha gelişmiş animasyon araçları ve teknikleriyle çalışırken, animasyonda uzmanlaşmaları için bir öğrenme eğrisi vardır. Animasyon konusunda hiçbir deneyimi olmayan bir geliştirici olarak Rive'ı kavramak, diğer animasyon araçlarına veya çerçevelerine kıyasla nispeten kolay olabilir. Rive (eskiden Flare olarak biliniyordu), kullanıcı dostu olacak ve önceden animasyon deneyimi çok az olan veya hiç olmayan geliştiriciler için bile erişilebilir olacak şekilde tasarlandı. Bu makalede, basit ve etkileyici Rive animasyonlarını kolaylıkla nasıl oluşturacağınızı ve bunları Flutter uygulamanızda nasıl yöneteceğinizi öğreneceksiniz. İçindekiler Rive'a Giriş🧙♂️ Rive'daki temel kavramlar🧗 Basit Bir İnteraktif Giriş Animasyonu🚀 Öğeyi Çalışma Yüzeyinizde ayarlayın📃 Animasyon Zamanı!🕶️ Durum Makinenizi kurun🏍️ Flutter Uygulamanıza Animasyon Uygulayın👨🚒 Sonuç🏋️♀️ Referanslar🧶 Rive'a Giriş🧙♂️ Rive, geliştiricilerin ve tasarımcıların mobil uygulamalar, web uygulamaları ve oyunlar da dahil olmak üzere çeşitli platformlar için çarpıcı ve etkileşimli animasyonlar oluşturmasına olanak tanıyan ve kullanıcı dostu bir animasyon aracı ve çalışma zamanı motorudur. güçlü Rive'daki temel kavramlar🧗 İşte temel kavramlar: Çalışma yüzeyi, animasyonunuzu oluşturduğunuz bir tuvaldir. Gruplar, kısıtlamalar, kemikler vb. gibi animasyon öğelerini oluşturmak ve düzenlemek için birincil yerdir. Çalışma Yüzeyi: Zaman çizelgesi, animasyonların tanımlandığı yerdir. Anahtar kareleri ayarlamanıza ve nesnelerin zaman içinde nasıl değişmesi gerektiğini belirtmenize olanak tanır. Anahtar kareler, bir nesnenin özelliklerinin açıkça tanımlandığı zamandaki belirli noktaları temsil eder. Animasyon sistemi, yumuşak geçişler oluşturmak için ana kareler arasında enterpolasyon yapar. Zaman Çizelgesi: Rive, animasyonunuz için farklı durumlar belirtmenize olanak tanıyan bir durum makinesi özelliğine sahiptir. Mevcut duruma göre farklı davranışlara sahip etkileşimli animasyonların oluşturulmasını sağlayarak, kullanıcı girdisine veya diğer koşullara bağlı olarak Durum geçişlerini tetikleyebilirsiniz. Durum Makinesi: Rive, animasyonları kod olarak dışa aktarmanıza olanak tanır, bu da onları uygulamalarınıza entegre etmenizi kolaylaştırır. Flutter geliştiricileri için Rive, Flutter projelerinde Rive animasyonlarının kullanılmasını kolaylaştıran bir Flutter çalışma zamanı ve entegrasyon paketi sunar. Kod Dışa Aktarma: Basit Bir İnteraktif Giriş Animasyonu🚀 Basit bir giriş animasyonu oluşturma ve bunu Flutter uygulamamıza aktarma sürecini gerçekleştireceğiz. Bu animasyonun uygulamadaki etkileşimini yönetmek için StateMachine'i kullanacağız. Sonunda şöyle görünmeli 👇🏽 Öğeyi Çalışma Yüzeyinizde ayarlayın📃 Öğeyi Rive çalışma yüzeyinde ayarlamak için aşağıdaki adımları izleyin: Öncelikle elementin kendisini almamız gerekecek. Bunu Figma'daki aldım. Öğeyi bir SVG dosyası olarak dışa aktarın. Kullanıcı Personas illüstrasyon Şablonlarından gidin Taslaklarınızı açmak için düğmesine tıklayın Rive'a Başlayın Taslaklarınızda yeni bir dosya oluşturun ve boş bir çalışma yüzeyi seçin. Öğeyi çalışma yüzeyine sürükleyip bırakın, otomatik olarak varlıklar klasörüne eklenecektir ve çalışma yüzeyinize yerleştirildiğini görebilirsiniz, şu şekilde görünmelidir 👇🏽 Kenar çubuğunda bu öğeyi oluşturan farklı şekilleri ve bunlara uygun şekilde isim vereceğiz. Gruplamak istediğiniz her şeyi kullanarak seçin. Seçtiğinizde bunları gruplandırmak için tuşlarını kullanın. Şöyle görünmeli 👇🏽 gruplandıracağız Ctrl veya Ctrl + Shift Ctrl + G Şimdi bu elemente kemik ekleyeceğiz. Kemikler daha dinamik ve gerçekçi animasyonlar oluşturmaya yardımcı olur. Bu animasyonun nasıl olmasını istediğimizi göz önünde bulundurarak nefes alma illüzyonu yaratmak için boyuna ve göğse kemikler ekleyeceğiz. Saçın da biraz hareket etmesini istediğimiz için saça kemik de ekleyeceğiz. Sol üst köşedeki kemik aracını seçin veya tuşlarını kullanın. Kemikleri ekledikten sonra bu şekilde görünmeli 👇🏽 Ctrl + B Şimdi kolay tanımlama için kemikleri yeniden adlandıracağız. Ayrıca yüzün tüm öğelerini gruplandıracağız ve bu yeni gruba adını vereceğiz. Hiyerarşik ilişkileri kullanarak kemikleri bu elementin etkilememiz veya deforme etmemiz gereken kısımlarına bağlayabiliriz. Bunu kemikleri doğrudan etkiledikleri şekillere taşıyarak yapabiliriz. Bir grubu veya kemiği taşımak için farenizi kullanarak seçin ve taşıyın. Şöyle görünecek 👇🏽 yüz Daha sonra kemiklerimizi bağlayıp tartacağız. Bağlama, bir kemik hareket ettiğinde karakterin yüzeyinin karşılık gelen bölümlerinin de buna göre hareket etmesini sağlayarak deformasyon yanılsaması yaratır. Köşe ağırlığı olarak da bilinen ağırlıklandırma, karakterin ağının her köşesine, belirli kemiklere olan yakınlığına bağlı olarak etki değerleri (ağırlıklar) atamayı içerir. Bağlayacağımız şeklin yoluna gideceğiz. Boyun için ise bu şekilde boyun kemiğine bağlıyoruz. Kemikleri bağladıktan sonra onlara ağırlıklar atayarak köşeleri belirliyoruz. Burada, son köşe kümesini %50'ye koyduğumuza dikkat edin, çünkü iki kemiğin onlar üzerinde %50 etkiye sahip olmasını istiyoruz. Özellikle ayarlanan köşeler iki kemiği etkileyen bir bölümü kapsıyorsa %50'yi kullanmalısınız. Şimdi aynısını saç yolu için de yapacağız. Saçta istediğimiz akıcı hareketi elde etmemize yardımcı olmak için sol ve sağ kemikleri de bir yerine iki kemik olarak değiştireceğiz. Bu animasyonda göz kırpma efekti yapmak isterdik, bunun için iki göz şekli üzerinde klip özelliğini bu şekilde kullanacağız 👇🏽 Daha sonra, animasyon sırasında kafayı hareket ettirmek istediğimiz için bu öğeye çeviri kısıtlamalarını kullanarak kafa izlemeyi ekleyeceğiz. 2 boyutlu bir öğe olduğundan, çeviri kısıtlamalarının eklenmesi ona derinlik ve bir çeşit 3 boyutlu efekt verecektir. Her şeyi seçin ve gruplayın. Artık tek bir grubumuz var. Daha sonra sol üst köşedeki grup aracını seçin ve kafanın ortasında (burun bölgesinde) bir grup oluşturun. Sağdaki araç çubuğunda stilini gruptan hedefe değiştirin, çoğaltın ve kopyalananı ctrl_front olarak adlandırın, ctrl_back olarak adlandırın. için sağdaki araç çubuğundan kısıtlamalar seçeneğini seçin. Mevcut kısıtlama seçenekleri listesinden çeviri kısıtlamalarını seçin. Özelliklerini ayarlamak için seçilen kısıtlama seçeneğinden önceki simgeye tıklayın. ctrl_back hedefi Gücü -100 olarak ayarlayın ve hedefini Artık hareket ettirildiğinde ters yönde hareket eder. Yüzün kulaklar gibi ters yönde hareket etmesi gereken kısımlarına sınırlamalar getirmemize yardımcı olacaktır. Şöyle görünmeli 👇🏽 ctrl front olarak ayarlayın. ctrl öne doğru ctrl back Şimdi yüzün geri kalanı için kısıtlamalar koyacağız. Ayrıca, onları daha iyi yönetmemize yardımcı olmak için gözleri (sol ve sağ) ve kulakları (sol ve sağ) gruplandıracağız. Gözlere böyle kısıtlamalar koyacağız 👇🏽 İlk olarak göz grubunun kökenini ile aynı olacak şekilde nasıl ayarladığımıza dikkat edin. Böylece hedefini hareket ettirdiğimizde artık bu hedefle sınırlandırılmış olan göz grubu da garip bir şekilde zıplamadan onunla birlikte hareket edecek. Aşağıdakiler için de aynısını yapacağız: ctrl_front ctrl_front Grup Kısıtlama gücü Başlangıç konumu Hedef gözlük %5 ctrl_front kökeni ile aynı ctrl_front kaşlar %10 ctrl_front kökeni ile aynı ctrl_front kulaklar %5 kökeni ayarlamaya gerek yok ctrl_back burun %5 ctrl_front kökeni ile aynı ctrl_front yüz %5 ctrl_front kökeni ile aynı ctrl_front Dudaklar için kısıtlamalar koymamıza gerek yok. Tüm kısıtlamalarımızı eklemeyi bitirdikten sonra böyle görünüyor 👇🏽 💃🏽 🥳 Tebrikler, elementimizi ulaşmak istediğimiz animasyon türüne başarıyla hazırladık. Vay!! Animasyon Zamanı!🕶️ Animasyon arayüzüne geçmek için sağdaki araç çubuğunda düğmesini tıklayın. Altı animasyon zaman çizelgesi oluşturacağız ve her şeyi bir durum makinesine bağlayacağız. Zaman çizelgesinde, daha önce kemikler ve kısıtlamalarla ayarladığımız şeyleri kullanarak, elde etmek istediğimiz animasyonu oluşturmak için ana kareleri ayarlayabiliriz. Canlandır İlk zaman çizelgesi animasyonu boşta kalma animasyonudur. Animasyonun Boşta durumu olacaktır. Animasyonlu öğe devrede olmadığında bunu kullanacağız. Animasyon işlemine başlamadan önce öncelikle elementimizin tüm parçalarını gruplandırıp karakter adını veriyoruz. Daha sonra süreyi 4 dakikaya ayarlıyoruz, Çalışma Alanımızı ayarlayın ve zaman çizelgesi türünü döngüye ayarlayın. Boş bir animasyon için idealdir. Bu boş animasyon için nefes alma, hafif saç hareketi ve göz kırpma illüzyonu yaratacağız. Boyun kemiğini, saç kemiklerini ve sağ/sol göz öğelerini kullanarak gerekli anahtar kareleri farklı pozlarda ayarlayacağız; bu, seçilen öğenin belirli özelliklerini zaman çizelgesindeki noktalara ayarlayabileceğimiz anlamına geliyor. Bir anahtar kareden diğerine geçiş stilini göz önünde bulundurarak ihtiyacımız olan enterpolasyon türünü seçeceğiz. Bunu Zaman Çizelgesi bölümünün sağ alt kısmında bulabilirsiniz. Bir anahtar kareden diğerine nasıl geçmek istediğinize bağlı olarak enterpolasyon tutma, doğrusal veya eğri olabilir. Şöyle görünecek 👇🏽 Yukarıdaki gif'ten, zaman çizelgesindeki farklı anahtar karelerde, seçilen öğeler için farklı pozlar ayarladığımızı fark edebilirsiniz. Bir anahtar kareden diğerine bu geçiş, animasyonu oluşturur. Aynı prosedürü kullanarak diğer beş zaman çizelgesini yaratacağız. Bu animasyonu görmek ve farklı zaman çizelgelerini detaylı olarak incelemek için tıklayabilirsiniz. Şöyle görünüyor 👇🏽 buraya Durum Makinenizi kurun🏍️ Bu animasyon sürecinin son kısmına geldik. Durum makinesi, animasyonu bağlamanın görsel bir yoludur. Durum makinesini kullanarak ayarladığımız girdiye göre hangi animasyonun oynatılacağını kontrol edebiliriz. İki veya daha fazla zaman çizelgesi animasyonunu aynı anda oynatılacak şekilde karıştırabilir veya harmanlayabiliriz. Durum makinesinde doğru türdeki girişleri seçmeliyiz çünkü uygulamadaki animasyonu kontrol etmek için kullanacağımız şey budur. Durum makinesinde üç tür girdimiz vardır: Sayı: Sayı girişi, niceliksel verileri temsil etmek ve kontrol etmek için durum makinesinde kullanılan sayısal bir değerdir. Sayı girişi sayısal değerine bağlı olarak durum makinesini belirli bir duruma geçiş yapacak şekilde ayarlayabilirsiniz. Boolean: Boolean girişi doğru veya yanlış olabilen ikili bir değerdir. Artık durum makinesi, giriş değerine bağlı olarak doğru veya yanlış olarak belirli bir duruma geçiş yapar. Tetikleyici: Tetikleyici giriş, bir olayı sinyallemek için kullanılan bir giriştir. Açıkça değiştirilene kadar durumlarını koruyan boole girişlerinin aksine, tetikleyiciler, tetiklendikten sonra varsayılan durumlarına sıfırlanır. Animasyon panelinde artı düğmesini tıklayın ve bir Durum makinesi oluşturun. Buna adını vereceğiz. Bu isim önemlidir çünkü kodda daha sonra durum makinemizi tanımlamak için ihtiyacımız olan isim budur. Oturum Açma Durumu Makinesi Durum makinenizi kurmak için aşağıdaki adımları izleyin: Durum makinemizde iki katman oluşturun ve birini olarak yeniden adlandırın. Çoklu katmanlar aynı anda birden fazla durumu oynamamıza yardımcı olur. Durum makinenize başka bir Katman eklemek için StateMachine grafiğinin üst kısmındaki artı simgesine tıklayın. Type Girişler bölümünde, durum makinesinin hemen yanında etiketlenmiş olduğunu görmelisiniz. Artı simgesini tıklayın, bir sayı girişi seçin ve bir ad verin. ve zaman çizelgesi animasyonlarını harmanlarken (karıştırırken) bu girişi kullanacağız, böylece sayılar arttıkça karakter soldan sağa bakıyormuş gibi görünecektir. görünümüne Look_left view_right Bu kez bir boole değeri olan başka bir giriş oluşturun ve bunu olarak adlandırın. Animasyonun ne zaman görünmesini istediğimizi kontrol eder. İki tetikleyici giriş oluşturun, birini , diğerini yeniden adlandırın. Başarı ve başarısızlık durumlarını tetiklemek için buna ihtiyacınız olacak. check başarısız başarı olarak Şimdi, animasyonunu ve animasyonunu katmanı grafiğine sürükleyip bırakın. Bu grafikte bazı varsayılan durumları göreceksiniz: görünüm_boşta görünüm_sol Tür Giriş - Bu, bu duruma bağlı herhangi bir animasyon durumunun giriş noktasıdır. Çıkış - Bu, bu duruma bağlı herhangi bir animasyon durumunun çıkış noktasıdır Herhangi bir durum - Buna bağlı herhangi bir animasyon durumu, geçişteki koşulları karşıladığı sürece oynatılır. Geçiş, iki veya daha fazla durumu birbirine bağlayan çizgi ve oktur. Ok yönüne baktığınızda durumların artık nasıl bağlantılı olduğunu görebilirsiniz. Buna tıkladığınızda geçişin özelliklerini görebilirsiniz. Özelliklerde bir Daha önce oluşturduğunuz herhangi bir girişi kullanarak, geçişteki bir sonraki durumdan önce yerine getirilmesini istediğiniz tanımlayabilirsiniz. koşul oluşturabilirsiniz. koşulu katmanında, geçişi doğrusal olarak kullanarak , ve durumlarını bağlayın. durumu için, ve animasyonunun bir karışımı olmasını isteriz. Bunu yapmak için grafikte durumunu seçin ve panelin sol tarafında Karışım 1d'yi seçin. Giriş seçeneği için girişini seçin. Bu girdi karışımımızı kontrol edecek. Daha sonra Zaman Çizelgeleri bölümünde ve zaman çizelgelerini seçin ve bunları 0 ve 100 olarak ayarlayın. girdi rakamını artırdığınızda iki animasyon harmanlanır. Yazım Entry view_Idle view_left Sol tarafa bakma sol tarafa bakma sağ tarafa bakma sol tarafa bakma görünüm sol tarafa bak sağa bak Görünüm Geçiş çizgisini ve oku kullanarak karışım durumunu bağlayın. Şimdi oka tıklayın ve koşulu, kontrol girişinin yanlış olduğu duruma ayarlayın. Bu, animasyonu kontrol etmemize ve StateMachine'e boolean kontrolü yanlış olduğunda durumunu göstermesini söylememize yardımcı olacaktır. karışım durumuna geri dönen geçiş oku için de aynısını yapın, ancak şimdi boolean'ın true olarak ayarlandığını . view_idle'a view_idle Look_idle'dan kontrol edin Artık girişi için onay kutusunu tıkladığınızda bunu doğru veya yanlış olarak ayarlayabilirsiniz. Durum makinesini çalıştırdığınızda, boolean'ını true olarak değiştirene kadar, durumunu göstermeye devam edecek ve daha sonra, animasyonunu başlatacaktır. ve karıştırmak için Look giriş numarası değerini artırırsınız. onay kontrol Look_Idle Look_left Look_left Look_right'ı Artık Layer1'de ve tetikleyicilerini ekleyeceğiniz yer burasıdır. durumundan durumuna bağlanacaksınız. durumundan hem hem de durumlarını bağlayın. durumundan durumuna geçişte bir Bu tetikleyici girişini ekleyin. Durum makinesinin animasyonunu yalnızca girişi tetiklendiğinde oynatması gerektiğini söylüyor. başarı başarısızlık Giriş boşta Boşta kalma başarı başarısızlık Boşta kalma başarı koşul ekleyin. durumda başarı başarı başarı durumu geçişi için de aynısını yapın ancak bunun yerine tetikleyicisini ekleyin. Şimdi sonra Burada seçeneğini seçin ve %100 olarak ayarlayın. Bu, boşta kalma animasyonunun yalnızca animasyonunun oynatılması bittiğinde oynatılacağı anlamına gelir. Aynısını geri dönüş geçişi için de yapın. Arıza arıza koşula başarıdan boşta bir geçiş çizgisi oluşturun. Çıkış zamanı başarı boşta çalışmaya Artık durum makinesindeki animasyonun tamamı şu şekilde görünecek 👇🏽 Animasyonun tamamına ve Durum makinesine göz atın. buradan Tebrikler 🥳, elementimizi başarılı bir şekilde canlandırdık ve state machine ile kurduk! Ancak rive dosyasını dışa aktarmadan önce arka planı ve karakterin gömlek renklerini değiştireceğiz. Şöyle görünecek👇🏽 Arka plan rengi (#B581EB) ve karakterin gömlek rengi (#BD08D7) Her şeyi ayrıntılı olarak görmek için animasyonun burada bağlantısı Flutter Uygulamanıza Animasyon Uygulayın👨🚒 Bu animasyonu Giriş sayfamızda kullanacağız. Bir Flutter uygulama projesi oluşturun ve Rive bağımlılığını dosyasına ekleyin pubspec.yaml dependencies: rive: ^0.11.12 Ayrıca dışa aktarılan Rive dosyasını proje varlıklarınıza ekleyin. Artık tasarımımıza göre kullanıcı arayüzünü oluşturmaya devam edebiliriz. Animasyonun aşağıdakileri yapmasını hedefliyoruz: E-posta/şifre doğru olduğunda başarı animasyonuyla tepki verin E-posta/şifre yanlış olduğunda başarısız animasyonla tepki verin metin alanındaki imlecin yönüne göre yanıt verin Widget Build fonksiyonundan önce ilk olarak bazı şeyleri tanımlayacağız. ///Login details String emailCred = "nikki@gmail.com"; String passwordCred = "123456"; /// input form controller FocusNode emailFocusNode = FocusNode(); TextEditingController emailCtr = TextEditingController(); FocusNode passwordFocusNode = FocusNode(); TextEditingController passwordCtr = TextEditingController(); /// rive controller and input values StateMachineController? controller; SMIInput<bool>? check; SMIInput<double>? look; SMIInput<bool>? success; SMIInput<bool>? fail; bool isLoading = false; bool isError = false; @override void initState() { emailFocusNode.addListener(emailFocus); passwordFocusNode.addListener(passwordFocus); super.initState(); } @override void dispose() { emailFocusNode.removeListener(emailFocus); passwordFocusNode.removeListener(passwordFocus); super.dispose(); } void emailFocus() { check?.change(emailFocusNode.hasFocus); } void passwordFocus() { check?.change(passwordFocusNode.hasFocus); } Burada şunları not edebiliriz: Doğru e-posta ve şifre tanımlanır. E-posta ve parola için odak düğümü ve metin düzenleme denetleyicisi de tanımlanır. Burada Rive denetleyicisi ve girişleri null olarak tanımlanır. Girişlerin durum makinesinde kullandıkları ad kullanılarak tanımlandığını fark edeceksiniz. Yükleme ve hata boolean'ı tanımlanır. ve işlevlerinde, kontrol girişi, boole değerine göre değiştirilir. emailFocus passwordFocus FocusNode.hasFocus Daha sonra ve fonksiyonlarında Dinleyicilerin eklendiğini ve kaldırıldığını görüyoruz. Dinleyiciler odak değişimini dinlemek için kullanılır. initState dispose Kullanıcı arayüzü kodunu ve kodun geri kalanını kontrol edebilirsiniz. Bu kod parçası RiveAsset'in nasıl ekleneceğini gösterir: buradan SizedBox( height: 250, width: 250, child: RiveAnimation.asset( "assets/login_screen.riv", fit: BoxFit.fitHeight, stateMachines: const ["Login State Machine"], onInit: (artboard) { controller = StateMachineController.fromArtboard( artboard, "Login State Machine", ); if (controller == null) return; artboard.addController(controller!); check = controller?.findInput("check"); look = controller?.findInput("look"); success = controller?.findInput("success"); fail = controller?.findInput("fail"); }, ), ), Yukarıdaki koddan şunları not edebiliriz: StateMachine, Rive editöründe verdiğimiz isim ile aynı adı taşıyor Denetleyici ve girişler tanımlanmıştır Oturum açma işlevinin kodu aşağıdadır: void login()async{ //extract the text coming from the text fields final email = emailCtr.text; final password = passwordCtr.text; //Set loading boolean to true and delay to give an illusion of loading setState(() { isLoading = true; }); await Future.delayed( const Duration(milliseconds: 2000), ); // check if details entered is the same as the correct creditials defined if (email == emailCred && password == passwordCred) { //if correct trigger the success input and set error boolean to false success?.change(true); setState(() { isError = false; }); if(context.mounted){ // delay and navigate to home screen await Future.delayed( const Duration(seconds: 2),(){ Navigator.push(context, MaterialPageRoute(builder: (context) =>const HomeScreen())); }); } } else { // if details don't match defined credentials // set error boolean to true and trigger the fail input // set loading boolean to false setState(() { isError = true; }); fail?.change(true); } setState(() { isLoading = false; }); } Kodun tamamını inceleyin. buradan Bunu yaparak Giriş animasyon kodumuzu tamamlamış oluyoruz. Her şey şu şekilde görünüyor: Sonuç🏋️♀️ Tebrikler! Bu basit etkileşimli giriş animasyonunu tamamladık. İşte başarabildiğimiz her şeye genel bir bakış: Öğemizi Rive çalışma yüzeyine kurun, Bu öğenin farklı animasyonlu durumlarını oluşturun, Tüm bu durumları durum makinesinin yardımıyla bir araya getirin Dışa aktarın ve Flutter uygulamasına ekleyin Bu öğreticiyi adım adım takip ettiğinizde birkaç darboğazla karşılaşabilirsiniz, ancak pratik yaptıkça bu daha da kolaylaşacaktır. Bu eğitimi takip ederken yardıma ihtiyacınız olursa bana ulaşabilir veya yorum yapabilirsiniz. Twitter'dan Rive animasyonunu daha iyi kavramak için bu video eğitimlerine göz atın Temel Arma Teknikleri Devlet Makineleri Kafa Takibi için Teçhizat Resmi Rive animasyonlarıyla ilgili çeşitli video eğitimleri için da göz atabilirsiniz. Rive kanalına Referanslar🧶 Animasyonlu Giriş Karakteri da yayınlandı. Burada
