Media Belajar Bahasa Pemrograman | by APPKEY

DartTutorial Dart 37: Cara Mengaplikasikan Flutter Staggered Animations

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

flutter staggered animations

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.

flutter staggered animations body

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 , ), ), ),
Artikel Terkait  Tutorial Dart 45: Memahami Flutter JSON Serialization

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 builderAnimatedBuilder 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!


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Tutorial

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang bahasa pemrograman langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Blog Post Ranking 10

Tutorial PHP 22 : Cara Membuat Redirect PHP dengan Cepat dan Mudah

Jika Anda melakukan browsing di browser kesayangan Anda, mungkin Anda pernah melihat link yang berisikan “php redirect” atau yang...

Tutorial PHP 23 : Cara Membuat Messages Alert PHP

Alert box atau alert messages digunakan di situs web untuk menampilkan pesan peringatan kepada pengguna bahwa mereka telah memasukkan...

Tutorial PHP 2 : Cara Install PHP, Langkah Awal Belajar PHP

PHP adalah bahasa pemrograman gratis dan open source. Secara teknis tidak perlu menginstal PHP: sebagian besar host web dan...

Tutorial Python 9 : Cara Membuat Looping Python

Pada artikel sebelumnya, Codekey telah menjelaskan tentang Operasi Kondisional Python yang di dalamnya menyinggung tentang percabangan dan perulangan. Belajar...

Tutorial HTML/CSS 23 : Cara Membuat Form Sederhana dengan HTML

Form memiliki peran yang sangat krusial bagi website atau aplikasi untuk menjaga sistem keamanannya. Form HTML digunakan untuk mengumpulkan...

Tutorial SQL 8 : Constraint SQL, Bagaimana Fungsi dan Penggunaannya?

Pada artikel sebelumnya Anda telah mempelajari tentang wildcard SQL, pada artikel kali ini kami akan menjelaskan tentang constraint SQL. Jika...

Tutorial Javascript 8 : Array Javascript, Panduan Lengkap Cara Membuatnya

Seperti bahasa pemrograman yang berorientasi objek lainnya, dalam JavaScript juga terdapat array. Jika Anda memiliki banyak objek yang ingin...

Tutorial SQL 20 : Mari Pelajari Cara Menggunakan Fungsi GROUP by SQL

Pada pembahasan seri Tutorial SQL ke- 20 ini, Codekey akan membahas tentang GROUP BY yang merupakan statement di dalam...

Tutorial Python 7 : Python String Format dan Cara Mudahnya

Anda ingin belajar Python dan ingin menjadi ahli dalam bahasa pemrograman Python? Mari belajar bersama Codekey! Pada pembahasan kali...

Tutorial Python 8 : Langkah Mudah Membuat Operasi Kondisional pada Python

Pada pembahasan sebelumnya, Codekey telah menjelaskan kepada Anda tentang pengoperasian string pada Python mulai dari menggabungkan hingga memanipulasi string...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya