Flutter'da animasyon yapmaya başlayın

⚠ Bu makale Basit Animasyon'un önceki bir sürümünü kapsamaktadır. Temel bilgiler aynı kalıyor ancak sınıf adları değişti .

Flutter'ı seviyor musun? Daha sonra zaten rekor sürede güzel kullanıcı arayüzleri oluşturmayı başardınız. Animasyonu denediniz mi? Animasyonlar harikadır, ancak her animasyon için tüm StatefulWidget, InitState, OnDispose, AnimationController, Tween öğelerini ayarlamanız gerekir .

Artık değil. Rekor sürede özel animasyonların nasıl oluşturulacağını size göstereceğim.

Şu mavi kareye bakın. Genişliği , yüksekliği ve rengi olan bir Konteynerdir . Genişliğini iki katına çıkaralım. Bunu bir ControlledAnimation içine sarmanız yeterlidir :

return ControlledAnimation(
  duration: Duration(seconds: 1),
  tween: Tween(begin: 100.0, end: 200.0),
  builder: (context, width) {
    return Container(width: width, height: 100, color: Colors.blue);
  },
);

      

       Blue square animates to rectangle.
      

Sadece belirtmeniz yeterli…

• bir süre (animasyonun uzunluğu)
• ara (animasyon sırasında ne yapılmalı )
• animasyonlu değişkene ikinci bir parametre olarak erişilebilen bir oluşturucu (film sahneniz nasıl görünüyor) . Bu örnekte genişliktir .

Sanırım şu anda oldukça etkilendin ? Olumsuz? Hadi devam edelim.

Animasyonu oynatma özelliğiyle kolayca kontrol edebilirsiniz :

return ControlledAnimation(
  playback: Playback.MIRROR,
  duration: Duration(seconds: 1),
  tween: Tween(begin: 100.0, end: 200.0),
  builder: (context, width) {
    return Container(width: width, height: 100, color: Colors.blue);
  },
);

Kolaylıkla gevşeme ekleyin. Sadece eğri özelliğini ayarlayın …

…veya bir gecikme belirterek bağımsız animasyonları kademelendirin . Animasyon, gecikme süresi geçmeden önce yürütülmeyecektir.

Harika! Ama şaşırtıcılıktan bahsettiğimizde. Ayrıca sizin için bir aracım da var - simple_animations ile birlikte geliyor: MultiTrackTween'e merhaba deyin !

Bir ara gibi davranır ancak bağımsız olarak canlandırmak için birden fazla özelliği destekler . Her özellik, kendisi de kademeli bir animasyona sahip olabilen bir Parçadır .

Kare animasyonumuzu geliştirmenin zamanı geldi:

final tween = MultiTrackTween([
  Track("width")
      .add(Duration(seconds: 1), Tween(begin: 100.0, end: 200.0))
      .add(Duration(seconds: 1), ConstantTween(200.0)),
  Track("height")
      .add(Duration(seconds: 1), ConstantTween(100.0))
      .add(Duration(seconds: 1), Tween(begin: 100.0, end: 300.0)),
  Track("color")
      .add(Duration(seconds: 2), 
                 ColorTween(begin: Colors.blue, end: Colors.green)),
  Track("rotation")
      .add(Duration(seconds: 3), Tween(begin: 0.0, end: pi),
           curve: Curves.easeIn),
  Track("radius")
      .add(Duration(milliseconds: 500), ConstantTween(0.0))
      .add(Duration(milliseconds: 1500), 
                                    Tween(begin: 0.0, end: 50.0))
]);

return ControlledAnimation(
  playback: Playback.MIRROR,
  duration: tween.duration,
  tween: tween,
  curve: Curves.easeInOutSine,
  builder: (context, animation) {
    return Transform.rotate(
      angle: animation["rotation"],
      child: Container(
        width: animation["width"],
        height: animation["height"],
        child: Center(
          child: Text("simple\nanimations"),
        ),
        decoration: BoxDecoration(
            color: animation["color"],
            borderRadius:  
          borderRadius.all(Radius.circular(animation["radius"]))),
      ),
    );
  },
);

Bu kadar basit. Bu yüzden onu simple_animations olarak adlandırdım . Ve ücretsiz!

Bu projenin amacı Flutter geliştiricileri için animasyon oluşturma sürecini basitleştirmektir . Belgelere ve örneklere çok yatırım yaptım.

Şimdi deneyin ve güzel animasyonlar yaratın…

https://pub.dartlang.org/packages/simple_animations

… ve resmi belgelere dalın veya örnek uygulamayı inceleyin .

Umarım beğenmişsindir. Bu konuda blog yazmaktan veya video eğitimleri oluşturmaktan çekinmeyin ! Onunla neler yaratacağınızı görmek için sabırsızlanıyorum .

Flutter bağımlınız,
— Felix —

Devam makalesini okuyun:

Flutter'da kullanıcı arayüzlerinizi soldurun