Animasi Bertahap dan Berbasis Fisika
Buat gerakan yang kaya di Flutter dengan animasi bertahap yang digerakkan oleh Interval dan simulasi pegas berbasis fisika alami.
Animasi Bertahap dan Berbasis Fisika adalah pelajaran Flutter Mobile Development gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Flutter Mobile Development, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Flutter Mobile Development mencakup 4 pelajaran total.
Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.
Beyond a Single Tween
You already know implicit and explicit animations. Staggered animations sequence multiple properties on one controller, and physics-based animations make motion feel natural.
One Controller, Many Animations
A single AnimationController can drive several Animation objects, each running during a different slice of time.
final controller = AnimationController(
vsync: this,
duration: const Duration(seconds: 2),
);Intervals
A CurvedAnimation with an Interval restricts an animation to a fraction of the parent timeline.
final fade = CurvedAnimation(
parent: controller,
curve: const Interval(0.0, 0.4, curve: Curves.easeIn),
);Staggering Properties
Give each property its own interval so they animate in sequence — fade first, then slide, then scale.
final slide = CurvedAnimation(
parent: controller,
curve: const Interval(0.4, 0.7, curve: Curves.easeOut),
);
final scale = CurvedAnimation(
parent: controller,
curve: const Interval(0.7, 1.0, curve: Curves.elasticOut),
);Driving the Tweens
Map each curved animation through a Tween to the values you need.
final opacity = Tween<double>(begin: 0, end: 1).animate(fade);
final offset = Tween<Offset>(
begin: const Offset(0, 0.3), end: Offset.zero,
).animate(slide);Building the Widget
Use AnimatedBuilder to rebuild as the controller ticks, applying every staggered value at once.
AnimatedBuilder(
animation: controller,
builder: (context, child) => Opacity(
opacity: opacity.value,
child: SlideTransition(position: offset, child: child),
),
child: const Card(child: Text('Hello')),
);Starting the Sequence
Call forward() to play. Because intervals overlap or chain, the children animate in a pleasing stagger.
@override
void initState() {
super.initState();
controller.forward();
}What Are Physics Simulations?
Physics-based animations ignore fixed durations and instead model forces. A SpringSimulation produces realistic bounce and settle.
Spring Simulation
Define a SpringDescription (mass, stiffness, damping) and run it with the controller.
const spring = SpringDescription(mass: 1, stiffness: 100, damping: 10);
final sim = SpringSimulation(spring, 0, 1, 0);
controller.animateWith(sim);Fling Gestures
The fling method launches an animation with velocity, perfect for swipe-to-dismiss or drag release.
void onDragEnd(DragEndDetails d) {
controller.fling(velocity: d.primaryVelocity! / 1000);
}Dispose the Controller
Always dispose the controller to free its ticker.
@override
void dispose() {
controller.dispose();
super.dispose();
}Quick Check
How do you make several properties of one controller animate in sequence rather than all at once?
Recap
You learned advanced motion:
- Staggered animations via Intervals on one controller
- AnimatedBuilder to apply many values together
- Physics simulations with SpringSimulation and fling
These techniques make your UI feel alive and natural.
Belajar Dart dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 22
- Pelajaran
- 88
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Animasi Bertahap dan Berbasis Fisika” gratis?
Ya — teks lengkap “Animasi Bertahap dan Berbasis Fisika” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Flutter Mobile Development, upgrade ke CoddyKit PRO. Kursus Flutter Mobile Development mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Animasi Bertahap dan Berbasis Fisika”?
Buat gerakan yang kaya di Flutter dengan animasi bertahap yang digerakkan oleh Interval dan simulasi pegas berbasis fisika alami. Kamu berlatih Flutter Mobile Development dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Flutter Mobile Development?
Tidak diperlukan pengalaman sebelumnya. Flutter Mobile Development di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Animasi Bertahap dan Berbasis Fisika” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Flutter Mobile Development ini?
Ya. Setiap pelajaran Flutter Mobile Development menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- CustomPainter dan Canvas
- Animasi Implisit
- Animasi Eksplisit dan Hero
- Animasi Bertahap dan Berbasis Fisika