Bab 04 · Gerak
Gerak yang punya bobot.
Antarmuka menjawab cepat, karakter bergerak dengan niat, dunia memberi ruang. Bab ini mengukur pegas yang dipakai Bit dan memperlihatkan siklus langkah yang membuat jalan dan berkendara terasa wajar, bukan kaku.
04.1 — Motion lab
Gerak punya maksud.
Respons yang cepat, karakter yang punya bobot, dunia yang memberi ruang. Studi ini memakai Bit produksi; koreografinya belum menggantikan perilaku maskot.
Antarmuka
Singkat dan tegas. Mengakui input serta menjelaskan perubahan keadaan.
Karakter
Antisipasi → aksi → pemulihan → diam. Satu aksi utama per momen.
Dunia
Gerak latar lebih tenang. Memberi konteks dan mengalah saat karakter beraksi.
Antisipasi, lepas landas, mendarat, lalu kembali tenang.
Preferensi perangkat: gerak standar. Preferensi perangkat selalu diutamakan.
Siap diputar.
Durasi dan kurva studi berasal dari token gerak di Bab 01 · Token gerak UI.
04.2 — Pegas produksi
Pegas produksi Bit.
Kurva dihitung dari konstanta yang dipakai maskot (kekakuan k, redaman c) dengan fungsi pegas yang sama. ζ < 1 memantul; garis putus-putus = sasaran, pita = ±2%.
- squash k 520 · c 20
- ζ
- 0.44
- lewat
- 21%
- menetap
- 0.35 s
- kepala k 320 · c 19
- ζ
- 0.53
- lewat
- 13%
- menetap
- 0.31 s
- antena k 170 · c 10
- ζ
- 0.38
- lewat
- 27%
- menetap
- 0.63 s
- lengan k 240 · c 15
- ζ
- 0.48
- lewat
- 17%
- menetap
- 0.51 s
- miring k 170 · c 12
- ζ
- 0.46
- lewat
- 19%
- menetap
- 0.63 s
- pandang k 220 · c 22
- ζ
- 0.74
- lewat
- 3%
- menetap
- 0.37 s
- hadap k 160 · c 20
- ζ
- 0.79
- lewat
- 1%
- menetap
- 0.29 s
- toleh k 260 · c 24
- ζ
- 0.74
- lewat
- 2%
- menetap
- 0.33 s
- condong k 200 · c 18
- ζ
- 0.64
- lewat
- 7%
- menetap
- 0.41 s
Antarmuka memakai transisi CSS 150–300 ms; hanya karakter yang memakai pegas. Rentang sendi produksi saat ini: ζ 0.38–0.79, lewat sasaran 1–27%, menetap 0.29–0.63 detik. Pantulan kecil itu disengaja untuk memberi bobot; jika sebuah sendi terasa gelisah, naikkan redaman c lebih dulu.
04.3 — Siklus langkah
Langkah dari jarak.
Siklus prosedural untuk dua kaki dan empat kaki, dari maskot/siklus.ts — fungsi yang sama dengan yang dipakai sandbox dan galeri tokoh.
Hadap badan · 30°
Toleh kepala · 0°
Setiap bagian Bit adalah balok 3D yang diputar lalu diproyeksikan dengan sudut voxel yang sama seperti sebelumnya. Pada 0° Bit tampak seperti gambar lama; saat berjalan ia berbalik ±64° (¾) supaya langkah terlihat dari samping dan wajah LED tetap terbaca. Kepala memimpin, badan menyusul.
Intensitas · 1.0 (jalan)
Fase langkah dihitung dari jarak tempuh, bukan waktu: makin cepat, makin cepat kaki berayun dengan panjang langkah sama. Badan turun persis sebanyak kaki yang mengayun memendek, jadi telapak tumpu menapak lantai.
-
Kontak
kaki kiri di depan, badan terendah
-
Lewat
kaki kanan melintas, badan tertinggi
-
Kontak
kaki kanan di depan
-
Lewat
kaki kiri melintas, terangkat
Prinsip klasik: lengan berayun berlawanan dengan kaki di sisinya, badan terendah saat kontak dan tertinggi saat kaki melintas, kepala dan antena menyusul sedikit terlambat. Semua dari satu fungsi murni (siklus.ts) yang dipakai panggung beranda, sandbox, dan studi ini.
04.4 — Aturan gerak
Aturan gerak.
Daftar periksa sebelum gerak baru masuk produksi. Uji di keyboard, layar sempit, terang dan gelap, reduced motion, interupsi, dan pemutaran berulang.
- 01
Kaki tidak meluncur
Fase langkah maju menurut jarak tempuh, bukan waktu. Makin cepat berjalan, makin cepat kaki berayun dengan panjang langkah yang sama.
- 02
Badan menyusul, kepala terlambat
Kontak → turun → lewat → naik. Lengan berayun berlawanan dengan kaki; kepala dan antena menyusul sesaat kemudian.
- 03
Kendaraan punya massa
Condong saat menyentak, mengangguk saat mengerem, suspensi memantul. Pesawat lepas landas dan mendarat bertahap, tidak melayang diam.
- 04
Satu aksi utama
Bit beraksi, Oyen bereaksi sesudahnya, latar mengalah. Idle menyisakan waktu diam.
- 05
Berhenti saat tak dilihat
Jam gerak berhenti di luar viewport, saat tab disembunyikan, dan saat dijeda. Listener dan frame dibersihkan ketika komponen dilepas.
- 06
Reduced motion bermakna
Bukan sekadar diam: pose statis yang tetap menceritakan aksinya. Preferensi perangkat selalu menang atas simulasi lokal.
Tanpa runtime React, motion, Lottie, atau WASM: gerak karakter dihitung dari pose dan pegas di Svelte, dirender sebagai SVG, dan memakai transform serta opacity.