Flutter için Rive Animation: Yeni Başlayanlar İçin Kolaylıkla Çarpıcı Animasyonlar Oluşturma Kılavuzu!

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 güçlü ve kullanıcı dostu bir animasyon aracı ve çalışma zamanı motorudur.

Rive'daki temel kavramlar🧗

İşte temel kavramlar:

1. Çalışma Yüzeyi: Ç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.
2. Zaman Çizelgesi: 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.
3. Durum Makinesi: 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.
4. Kod Dışa Aktarma: 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.

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 Kullanıcı Personas illüstrasyon Şablonlarından aldım. Öğeyi bir SVG dosyası olarak dışa aktarın.
• Rive'a gidin Taslaklarınızı açmak için Başlayın düğmesine tıklayı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 gruplandıracağız ve bunlara uygun şekilde isim vereceğiz. Gruplamak istediğiniz her şeyi Ctrl veya Ctrl + Shift kullanarak seçin. Seçtiğinizde bunları gruplandırmak için Ctrl + G tuşlarını kullanın. Şöyle görünmeli 👇🏽

• Ş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 Ctrl + B tuşlarını kullanın. Kemikleri ekledikten sonra bu şekilde görünmeli 👇🏽

• Ş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 yüz 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 👇🏽

• 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, ctrl_front olarak adlandırın, çoğaltın ve kopyalananı ctrl_back olarak adlandırın.

• ctrl_back hedefi 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.

• Gücü -100 olarak ayarlayın ve hedefini ctrl front olarak ayarlayın. Artık ctrl öne doğru hareket ettirildiğinde ctrl back 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 👇🏽

  
  

  

• Ş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 ctrl_front ile aynı olacak şekilde nasıl ayarladığımıza dikkat edin. Böylece ctrl_front 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:

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 Canlandır 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.

İ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 buraya tıklayabilirsiniz. Şöyle görünüyor 👇🏽

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 Oturum Açma Durumu Makinesi adını vereceğiz. Bu isim önemlidir çünkü kodda daha sonra durum makinemizi tanımlamak için ihtiyacımız olan isim budur.

Durum makinenizi kurmak için aşağıdaki adımları izleyin:

1. Durum makinemizde iki katman oluşturun ve birini Type 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.
2. 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 görünümüne bir ad verin. Look_left ve view_right 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.
3. Bu kez bir boole değeri olan başka bir giriş oluşturun ve bunu check olarak adlandırın. Animasyonun ne zaman görünmesini istediğimizi kontrol eder. İki tetikleyici giriş oluşturun, birini başarısız , diğerini başarı olarak yeniden adlandırın. Başarı ve başarısızlık durumlarını tetiklemek için buna ihtiyacınız olacak.
4. Şimdi, görünüm_boşta animasyonunu ve görünüm_sol animasyonunu Tür katmanı grafiğine sürükleyip bırakın. Bu grafikte bazı varsayılan durumları göreceksiniz:
   • 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.
5. 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 koşul oluşturabilirsiniz. Daha önce oluşturduğunuz herhangi bir girişi kullanarak, geçişteki bir sonraki durumdan önce yerine getirilmesini istediğiniz koşulu tanımlayabilirsiniz.
6. Yazım katmanında, geçişi doğrusal olarak kullanarak Entry , view_Idle ve view_left durumlarını bağlayın. Sol tarafa bakma durumu için, sol tarafa bakma ve sağ tarafa bakma animasyonunun bir karışımı olmasını isteriz. Bunu yapmak için grafikte sol tarafa bakma durumunu seçin ve panelin sol tarafında Karışım 1d'yi seçin. Giriş seçeneği için görünüm girişini seçin. Bu girdi karışımımızı kontrol edecek. Daha sonra Zaman Çizelgeleri bölümünde sol tarafa bak ve sağa bak zaman çizelgelerini seçin ve bunları 0 ve 100 olarak ayarlayın. Görünüm girdi rakamını artırdığınızda iki animasyon harmanlanır.
7. Geçiş çizgisini ve oku kullanarak karışım durumunu view_idle'a 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 view_idle durumunu göstermesini söylememize yardımcı olacaktır. Look_idle'dan 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ı kontrol edin .
8. Artık onay girişi için onay kutusunu tıkladığınızda bunu doğru veya yanlış olarak ayarlayabilirsiniz. Durum makinesini çalıştırdığınızda, kontrol boolean'ını true olarak değiştirene kadar, Look_Idle durumunu göstermeye devam edecek ve daha sonra, Look_left animasyonunu başlatacaktır. Look_left ve Look_right'ı karıştırmak için Look giriş numarası değerini artırırsınız.
9. Artık Layer1'de başarı ve başarısızlık tetikleyicilerini ekleyeceğiniz yer burasıdır. Giriş durumundan boşta durumuna bağlanacaksınız. Boşta kalma durumundan hem başarı hem de başarısızlık durumlarını bağlayın. Boşta kalma durumundan başarı durumuna geçişte bir koşul ekleyin. Bu durumda başarı tetikleyici girişini ekleyin. Durum makinesinin başarı animasyonunu yalnızca başarı girişi tetiklendiğinde oynatması gerektiğini söylüyor.
10. Arıza durumu geçişi için de aynısını yapın ancak bunun yerine arıza tetikleyicisini koşula ekleyin. Şimdi başarıdan sonra boşta bir geçiş çizgisi oluşturun. Burada Çıkış zamanı seçeneğini seçin ve %100 olarak ayarlayın. Bu, boşta kalma animasyonunun yalnızca başarı animasyonunun oynatılması bittiğinde oynatılacağı anlamına gelir. Aynısını boşta çalışmaya geri dönüş geçişi için de yapın.

Artık durum makinesindeki animasyonun tamamı şu şekilde görünecek 👇🏽

Animasyonun tamamına ve Durum makinesine buradan göz atın.

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 bağlantısı burada

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ı pubspec.yaml dosyasına ekleyin

 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 = "[email protected]"; 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.
• emailFocus ve passwordFocus işlevlerinde, kontrol girişi, FocusNode.hasFocus boole değerine göre değiştirilir.
• Daha sonra initState ve dispose fonksiyonlarında Dinleyicilerin eklendiğini ve kaldırıldığını görüyoruz. Dinleyiciler odak değişimini dinlemek için kullanılır.

Kullanıcı arayüzü kodunu ve kodun geri kalanını buradan kontrol edebilirsiniz. Bu kod parçası RiveAsset'in nasıl ekleneceğini gösterir:

 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ı buradan inceleyin.

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 Twitter'dan ulaşabilir veya yorum yapabilirsiniz.

Rive animasyonunu daha iyi kavramak için bu video eğitimlerine göz atın

Rive animasyonlarıyla ilgili çeşitli video eğitimleri için Rive kanalına da göz atabilirsiniz.

Referanslar🧶

Animasyonlu Giriş Karakteri