Tutorial Dart 37: Cara Mengaplikasikan Flutter Staggered Animations

Last Updated on October 24, 2022 by

Halo pembaca setia codekey.id! Masih dalam seri belajar Flutter, kali ini kami akan kembali membahas tentang cara membuat animasi pada Flutter. Kali ini kami akan membahas tentang Flutter Staggered Animations. Animasi ini akan berjalan atau diproses secara berurutan dan sistematis. Nah, berikut ini poin-poin yang akan kita bahas:

• Struktur Dasar Animasi Flutter Staggered
• Complette Staggered Animation
• Stateless widget: StaggerAnimation
• Stateful widget: StaggerDemo

Struktur Dasar Animasi Flutter Staggered

Flutter Staggered Animations merupakan animasi dengan konsep langsung. Di mana perubahan visual terjadi sebagai serangkaian operasi, tidak dilakukan sekaligus. Animasi mungkin murni berurutan, dengan satu perubahan terjadi setelah perubahan berikutnya. Namun keadaan juga mungkin terjadi sebagian atau seluruhnya tumpang tindih. Mungkin juga memiliki celah, di mana tidak ada perubahan yang terjadi.

Anda dapat menonton video pada link https://www.youtube.com/shorts/0fFvnZemmh8?feature=share  untuk melihat bagaimana Flutter Staggered Animations dijalankan. Dalam video tersebut Anda akan melihat animasi berikut dari satu widget, yang dimulai sebagai kotak biru berbatas dengan sudut sedikit membulat. Kotak berjalan melalui perubahan dengan urutan berikut ini:

1. Memudar
2. melebar
3. Menjadi lebih tinggi saat bergerak ke atas
4. Berubah menjadi lingkaran berbatas
5. Berubah warna menjadi oranye

Setelah bergerak maju, animasi kemudian akan bergerak secara terbalik.

Struktur dasar animasi satu ini memiliki beberapa poin penting sebagai berikut:

• Semua animasi dijalankan oleh fungsi yang sama, yaitu AnimationController.
• Terlepas dari berapa lama animasi berlangsung secara real time, nilai pengontrol harus antara 0,0 dan 1,0, inklusif.
• Setiap animasi memiliki Intervalantara 0,0 dan 1,0, inklusif.
• Untuk setiap properti yang bergerak dalam interval, buatlah file Tween. File Tween ini akan menentukan nilai awal dan akhir untuk properti tersebut.
• File Tweenakan menghasilkan objek  Animation yang akan dikelola oleh controller.

Perhatikan diagram berikut ini.

Diagram di atas menunjukkan Intervals yang biasa digunakan dalam animasi. Di mana memiliki karakteristik sebagai berikut:

• Opacity berubah selama 10% pertama dari timeline.
• Sebuah celah kecil terjadi antara perubahan opacity, dan perubahan lebar.
• Tidak ada yang dianimasikan selama 25% waktu terakhir dari timeline.
• Meningkatkan padding membuat widget tampak naik ke atas.
• Meningkatkan radius perbatasan menjadi 0,5, mengubah persegi dengan sudut membulat menjadi lingkaran.
• Perubahan padding dan ketinggian terjadi selama interval yang sama persis, tetapi tidak harus.

Untuk mengatur animasi yang dibuat, Anda dapat melakukan:

• Buatlah AnimationControlleryang berfungsi untuk mengelola semua file Animations.
• Buat Tween untuk setiap properti yang sedang dianimasikan.
• Tween kemudian mendefinisikan rentang nilai.
• Metode Tween’ animatemembutuhkan parent pengontrol, dan menghasilkan Animation untuk properti tersebut.
• Tentukan interval pada properti Animation’ curve.

Saat nilai animasi pengontrolnya berubah, nilai animasi baru akan turut berubah. Hal ini akan memicu pembaruan pada User Interface (UI).

Pengkodean di bawah ini menunjukkan cara untuk membuat Tween pada properti width. Di mana properti ini akan membangun CurvedAnimation, mengkalsifikasikan  kurva yang dilonggarkan.

width = Tween<double>(
  begin: 50.0,
  end: 150.0,
).animate(
  CurvedAnimation(
    parent: controller,
    curve: Interval(
      0.125, 0.250,
      curve: Curves.ease,
    ),
  ),
),

Nilai begin dan end pada prakteknya tidak harus ganda. Kode berikutya menunjukkan bagaimana membuat tween untuk properti borderRadius yang berfungsi mengontrol kebulatan sudut perseg). Di sini akan menggunakan BorderRadius.circular().

borderRadius = BorderRadiusTween ( 
  mulai : BorderRadius . melingkar ( 4.0 ), 
  akhir : BorderRadius . melingkar ( 75.0 ), ). animate ( CurvedAnimation ( 
    parent : controller , 
    curve : Interval ( 0.375 , 0.500 , 
      curve : Curves . ease , ), ), ),

Complette Staggered Animation

Sama seperti semua widget interaktif, Complette Staggered Animation terdiri dari sepasang widget, yaitu widget stateless dan stateful. Widget stateless berfungsi untuk menentukan Tweens, mendefinisikan Animationobjek, dan menyediakan fungsi build()yang bertanggung jawab untuk membangun bagian animasi dari pohon widget.

Sementara Widget stateful berfungsi untuk membuat pengontrol, memutar animasi, dan membangun bagian non-animasi dari pohon widget. Animasi dimulai ketika ketukan terdeteksi di mana saja di layar.

Stateless widget: StaggerAnimation

Pada widget stateless, StaggerAnimation, fungsi build() digunakan untuk membuat instance AnimatedBuilder—di mana widget memiliki tujuan umum untuk membuat animasi. Membangun AnimatedBuilderwidget dan mengonfigurasinya menggunakan nilai Tweens’ saat ini. Contoh membuat fungsi bernama _buildAnimation() yang melakukan pembaruan UI secara aktual. Untuk kemudian menetapkannya pada properti builder. AnimatedBuilder akan merespon notifikasi dari pengontrol animasi, menandai pohon widget kotor saat nilai berubah. Untuk setiap centang animasi, nilainya diperbarui, menghasilkan panggilan ke _buildAnimation(). Pengkodeannya dapat Anda lihat di bawah ini:

class StaggerAnimation extends StatelessWidget {
  StaggerAnimation({ Key key, this.controller }) :

    // Setiap animasi yang didefinisikan di sini mengubah nilainya selama
    // durasi subset pengontrol yang ditentukan oleh interval animasi.
    // Misalnya animasi opacity mengubah nilainya selama
    // 10% pertama dari durasi pengontrol.

    opacity = Tween<double>(
      begin: 0.0,
      end: 1.0,
    ).animate(
      CurvedAnimation(
        parent: controller,
        curve: Interval(
          0.0, 0.100,
          curve: Curves.ease,
        ),
      ),
    ),

    // ... Other tween definitions ...

    super(key: key);

  final AnimationController controller;
  final Animation<double> opacity;
  final Animation<double> width;
  final Animation<double> height;
  final Animation<EdgeInsets> padding;
  final Animation<BorderRadius> borderRadius;
  final Animation<Color> color;

  // Fungsi ini digunakan setiap kali controller “menandai” frame baru
  //Ketika berjalan, seluruh nilai animasi akan muncul
  // pembaruan akan mencerminkan nilai sebenarnya pada pengontrol
  Widget _buildAnimation(BuildContext context, Widget child) {
    return Container(
      padding: padding.value,
      alignment: Alignment.bottomCenter,
      child: Opacity(
        opacity: opacity.value,
        child: Container(
          width: width.value,
          height: height.value,
          decoration: BoxDecoration(
            color: color.value,
            border: Border.all(
              color: Colors.indigo[300],
              width: 3.0,
            ),
            borderRadius: borderRadius.value,
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      builder: _buildAnimation,
      animation: controller,
    );
  }
}

Stateful widget: StaggerDemo

Pada widget stateful, StaggerDemo akan membuat AnimationController yang berfungsi untuk mengatur secara menyeluruh, serta menetapkan durasi 2000 ms. Ini memainkan animasi, dan membangun bagian non-animasi dari pohon widget. Animasi dimulai ketika ketukan terdeteksi di layar. Animasi akan berjalan maju, lalu mundur.

class StaggerDemo memperluas StatefulWidget    { 
  @mengesampingkan
  _StaggerDemoState createState () => _StaggerDemoState (); } 


class _StaggerDemoState memperluas Status < StaggerDemo > dengan TickerProviderStateMixin { AnimationController _controller ;    
  

  @mengesampingkan
  void initState () { super . initState (); 
void initState () { super . initState (); 
    

    _controller = AnimationController ( 
      durasi : const Durasi ( milidetik : 2000 ), 
vsync : this ); }     
    
  

  // ...Pelat ketel...

  Masa depan < void > _playAnimation () async  { try { menunggu _controller . maju (). atau Batal ; menunggu _controller . terbalik (). atau Batal ; } pada TickerCanceled { // animasi dibatalkan, mungkin karena dibuang } } 
     
      
      
       
      
    
  

  @mengesampingkan
  Pembuatan widget ( konteks BuildContext ) { 
    timeDilation = 10.0 ; // 1.0 adalah kecepatan animasi normal. return Scaffold ( 
      appBar : AppBar ( 
        title : const Text ( 'Staggered Animation' ), ), 
      body : GestureDetector ( 
        behavior : HitTestBehavior . opaque , 
        onTap : () { 
          playAnimation ();   
        
          
        }, 
        anak : Pusat ( 
          anak : Wadah ( 
            lebar : 300.0 , 
            tinggi : 300.0 , 
            dekorasi : KotakDekorasi ( 
              warna : Warna . hitam . dengan Opacity ( 0.1 ), 
              batas : Batas . semua ( 
                warna : Warna . hitam . dengan Opacity (         0.5 ), ), ), 
            anak : StaggerAnimation ( 
              controller : _controller . view
             ), ), ), ), ); } }
      

Itulah penjelasan tentang Flutter Staggered Animations khusus untuk Anda pembaca setia codekey.id untuk berbagai artikel tutorial bahasa pemrograman lainnya Anda juga dapat menemukannya di sini. Sampai di sini pembahasan kali ini, sampai jumpa di artikel menarik lainnya. Selamat berlatih!