Flutter Animation – Membuat Animasi Transisi Route

Untuk teman-teman yang akan baru memulai belajar Flutter silahkan masuk ke artikel ini dulu ya teman-teman ➡ Aplikasi Pertamaku “Halo Semuaaa…“. Jika sudah yuk lanjut baca artikel ini…

Sebuah bahasa desain seperti halnya Material, mendefinisikan standard behaviors saat bertransisi (transisi standar) antar route (atau layar aplikasi). Namun, terkadang transisi khusus antar layar dapat membuat aplikasi menjadi lebih unik. Agar dapat melakukan transisi, maka di sini PageRouteBuilder menyediakan objek Animation untuk melakukan transisi khusus tersebut. Animation ini dapat digunakan dengan objek Tween dan Curve untuk menyesuaikan transisi animasi. Nantinya artikel ini akan menjelaskan bagaimana cara melakukan transisi antar route dengan menganimasikan route baru yang ditampilkan atau ditransisikan dari bagian bawah layar. Langkah-langkahnya sebagai berikut:

1. Lakukan Set Up pada PageRouteBuilder.
2. Create Objek Tween.
3. Tambahkan AnimatedWidget.
4. Gunakan Objek CurveTween.
5. Kombinasikan 2 Objek Tween.

1. Lakukan Set Up pada PageRouteBuilder

Langkah pertama, gunakan PageRouteBuilder untuk membuat sebuah Route. Perlu teman-teman ketahui PageRouteBuilder memiliki 2 callbacks, satu untuk membuat konten route (pageBuilder) dan yang satu lagi untuk membuat transisi route (transitionsBuilder).

Contoh di bawah ini merupakan cara untuk membuat 2 route, yang pertama route awal dengan tampilan tombol “Go!”, dan route kedua berjudul “Page 2”.

2. Create Objek Tween

Berikutnya untuk membuat transisi animasi halaman baru dari bawah layar, halaman harus dianimasikan dari Offset(0,1) ke Offset(0, 0) (biasanya menggunakan konstruktor Offset.zero). Dalam hal ini, Offset merupakan vector 2D yang menggunakan widget ‘FractionalTranslation’. Pada saat melakukan setting di parameter Offset dengan memberikan nilai 1 merepresentasikan tampilan yang diterjemahkan secara vertical setinggi satu halaman penuh.

Callback transitionsBuilder memiliki parameter animation, yang dimana Animation<double> menghasilkan nilai antara 0 and 1. Berikut langkah konversi animation menggunakan objek Tween:

(Modifikasi dan tambahkan cuplikan kode berikut pada properti transitionsBuilder)

transitionsBuilder: (context, animation, secondaryAnimation, child) {
  var begin = Offset(0.0, 1.0);
  var end = Offset.zero;
  var tween = Tween(begin: begin, end: end);
  var offsetAnimation = animation.drive(tween);
  return child;
},

3. Tambahkan AnimatedWidget

Seperti yang teman-teman ketahui, Flutter memiliki sekumpulan widget yang dapat memperluas fungsi dari   AnimatedWidget  yang dapat membangun kembali dirinya sendiri saat nilai animasinya berubah. Misalnya, SlideTransition yang menggunakan Animation<Offset> dan menerjemahkan child-nya (menggunakan widget FractionalTranslation) setiap kali nilai animasinya berubah. Cuplikan di bawah ini, terlihat AnimatedWidget mengembalikan SlideTransition yang berisi Animation<Offset> dan widget child-nya:

(Modifikasi dan tambahkan cuplikan kode berikut pada properti transitionsBuilder)

transitionsBuilder: (context, animation, secondaryAnimation, child) {
  var begin = Offset(0.0, 1.0);
  var end = Offset.zero;
  var tween = Tween(begin: begin, end: end);
  var offsetAnimation = animation.drive(tween);

  return SlideTransition(
    position: offsetAnimation,
    child: child,
  );
},

4. Gunakan Objek CurveTween

Flutter menyediakan pilihan easing curves yang fungsinya untuk menyesuaikan laju animasi. Kelas Curves  menyediakan kumpulan curves yang umum digunakan. Misalnya, Curves.easeOut yang membuat animasi dimulai dengan cepat dan berakhir secara perlahan. Untuk menggunakan Curve, buat CurveTween baru dan berikan ke variabel Curve:

(Modifikasi dan tambahkan cuplikan kode berikut pada properti transitionsBuilder)

var curve = Curves.ease;
var curveTween = CurveTween(curve: curve);

Tween baru di atas masih menghasilkan nilai 0 ke 1. Pada langkah selanjutnya kita akan menggabungkan Tween<Offset> dari langkah nomor 2.

5. Kombinasikan 2 Objek Tween

Selanjutnya, kita gunakan chain() untuk mengkombinasikan Tween:

(Modifikasi dan tambahkan cuplikan kode berikut pada properti transitionsBuilder)

var begin = Offset(0.0, 1.0);
var end = Offset.zero;
var curve = Curves.ease;

var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

Kemudian gunakan Tween ini dengan meneruskannya ke animation.drive(), sehingga akan membuat Animation<Offset> baru yang dapat diberikan ke widgetSlideTransition:

(Modifikasi dan tambahkan cuplikan kode berikut pada properti transitionsBuilder)

return SlideTransition(
  position: animation.drive(tween),
  child: child,
);

Perlu teman-teman ketahui, Tween yang baru ini menghasilkan nilai Offset dengan mengevaluasi CurveTween terlebih dahulu dan kemudian mengevaluasi Tween<Offset>. Saat animasi berjalan, nilai dihitung berdasarkan urutan berikut:

1. Animasi (disediakan untuk melakukan callback transitionsBuilder) menghasilkan nilai 0 ke 1.
2. CurveTween memetakan nilai-nilai tersebut ke nilai baru antara 0 dan 1 berdasarkan curve-nya.
3. Tween<Offset> memetakan nilai double ke nilai Offset.

Cara lain untuk membuat Animation<Offset> dengan easing curve yaitu menggunakan CurvedAnimation:

(Modifikasi dan tambahkan cuplikan kode berikut pada properti transitionsBuilder)

transitionsBuilder: (context, animation, secondaryAnimation, child) {
  var begin = Offset(0.0, 1.0);
  var end = Offset.zero;
  var curve = Curves.ease;

  var tween = Tween(begin: begin, end: end);
  var curvedAnimation = CurvedAnimation(
   parent: animation,
   curve: curve,
  );

  return SlideTransition(
   position: tween.animate(curvedAnimation),
   child: child,
  );
}

Berikut cuplikan kode dan simulasinya, jika teman-teman menggunakan VSCode jalankan projectnya dengan menekan F5, klik hot reload (⚡) atau klik tombol ▶, maka berikut hasil akhirnya (Klik tombol “Go!”):

Jika ada pertanyaan silahkan komen dan jika artikel ini dirasa bermanfaat, jangan lupa like dan sharenya ya teman-teman. ??????? Sampai bertemu di artikel selanjutnya.
Terima Kasih, Assalamu’alaykum… Salam KODINGINDONESIA

Referensi : https://flutter.dev//

Anton Prafanto

Konten developer kodingindonesia.com & staf pengajar tetap di Universitas Mulawarman Samarinda

all author posts