Animation Guidelines
Prinsip
- Purposeful — Animasi harus memiliki tujuan (feedback, transition, attention).
- Fast — Durasi ideal: 200–300ms. Jangan lebih dari 500ms.
- Interruptible — User harus bisa membatalkan/menginterupsi animasi.
- Respect Reduced Motion — Hormati setting
Reduce Motiondi device user.
Duration Guide
| Tipe | Durasi | Contoh |
|---|---|---|
| Micro-interaction | 100–200ms | Button press, toggle, ripple |
| Transition | 200–300ms | Screen transition, modal appear |
| Complex animation | 300–500ms | Page reveal, skeleton loading |
| Background | Loop / infinite | Shimmer effect, loading spinner |
Checking Reduce Motion
Selalu cek preferensi user sebelum menampilkan animasi:
| Platform | API |
|---|---|
| Android | Settings.Global.getFloat(contentResolver, Settings.Global.ANIMATOR_DURATION_SCALE) — bernilai 0f jika reduce motion aktif |
| iOS | UIAccessibility.isReduceMotionEnabled |
| Flutter | MediaQuery.of(context).disableAnimations |
| React Native | AccessibilityInfo.isReduceMotionEnabled() |
Jetpack Compose
Sejak Compose 1.2.0, API animasi bawaan Compose (animate*AsState, Animatable, dll.) sudah otomatis menghormati setting reduce motion — cek manual di atas hanya diperlukan untuk animasi custom di luar API Compose (custom Canvas drawing, dsb.).