Flutter: Membuat Animasi Widget
Disini kita akan membuat sebuah class yang berisi method animasi. beberapa animasi yang kita terapkan adalah :
a. Animasi Rotate (Berputar)
b. Animasi Translate (Berpindah)
c. Animasi Route (Animasi transisi ketika berpindah halaman)
Disini kita akan membuat class yang berisi method di bawah ini
1 - Animasi Rotate
TweenAnimationBuilder animationRotate({required child,double begin=0.0,double end=6.28,int durationSecond=1}){
return TweenAnimationBuilder<double>(
tween: Tween<double>(begin: begin, end: end),
duration: Duration(seconds: durationSecond),
builder: (BuildContext _,double angel, Widget? __){
return Transform.rotate(
angle: angel,
child: child,
);
}
);
}Keterangan Parameter :
a. child : berisi widget yang akan di animasikan
b. begin : berisi start tween
c. end : berisi end tween
d. durationSecend: menentukan waktu proses animasi berdasarakan detik
Contoh penerapan:
final Animasi _animasi = Animasi();
@override
Widget build(BuildContext context) {
return Scaffold(
body:_animasi.animationRotate(
child: const Image(
image: AssetImage("assets/images/opening_a.png"),
width: 200,
)
),
)
}2 - Animasi Translate
TweenAnimationBuilder animationTranslate({required child,required double beginX,required double beginY,double endX=0.0,double endY=0.0,int secondDuration=1}){
return TweenAnimationBuilder<Offset>(
tween: Tween<Offset>(begin: Offset(beginX, beginY),end: Offset(endX, endY)),
duration: Duration(seconds: secondDuration),
builder: (BuildContext _,Offset offset, Widget? __){
return Transform.translate(
offset: offset,
child: child,
);
}
);
}Keterangan Parameter :
a. child : widget yang akan di animasikan
b. beginX : posisi awal koordinat x
c. beginY : posisi awal koordinat y
d. endX : posisi akhir koordinat x
e. endY : posisi akhir koordinat y
f. secondDuration : menentukan waktu proses animasi berdasarakan detik
Contoh penerapan :
final Animasi _animasi = Animasi();
@override
Widget build(BuildContext context) {
return Scaffold(
body: _animasi.animationTranslate(
beginX: -1000.0,
beginY: 0.0,
child: Container(
margin: const EdgeInsets.only(top: 10),
child: const Image(
image: AssetImage("assets/images/opening_b.png"),
width: 200,
),
)
),
)
}3 - Animasi Route
Animasi route hanya untuk animasi transisi halaman. Untuk animasi transisi yang kita terapkanya hanya 4
a. Page muncul dari Kanan
b. Page muncul dari Kiri
c. Page muncul dari Atas
d. Page muncul dari Bawah
Route route({required Widget page,double beginX=0.0, double beginY=1.0}) {
return PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) => page,
transitionsBuilder: (context, animation, secondaryAnimation, child) {
Offset begin = Offset(beginX, beginY);
const end = Offset.zero;
const curve = Curves.ease;
final tween = Tween(begin: begin, end: end);
final curvedAnimation = CurvedAnimation(
parent: animation,
curve: curve,
);
return SlideTransition(
position: tween.animate(curvedAnimation),
child: child,
);
},
);
}Keterangan Parameter :
a. page : paga yang akan diberikan animasi transisi
b. beginX : posisi awal koordinat X
c. beginY : posisi awal koordinat Y
Contoh penerapan :
a. Transasisi dari KANAN : beginX=1.0 beginY=0.0
b. Transasisi dari KIRI : beginX=-1.0 beginY=0.0
c. Transasisi dari BAWAH : beginX=0.0 beginY=1.0
d. Transasisi dari ATAS : beginX=0.0 beginY=-1.0
final Animasi _animasi = Animasi();
Navigator.of(context).push(_animasi.route(page: const KabarkuPage(),beginX:0.0, beginY:1.0));Untuk kode lengkapnya bisa dilihat disini