ZLabs · SOP Motion

Motion Lab

Tiap kotak = satu aturan dari SOP motion. Tarik, lempar, genggam di tengah jalan. Semua gerak di halaman ini memakai pegas sungguhan m·x″ = −k·x − b·x′, bukan timer.

Dasar SOP

Tujuh aturan inti: rubber band, pegas, preset, dan hukum Jakob.

01

Rubber band ala Apple

Tarik daftar melewati ujung atas/bawah. Makin jauh ditarik, makin sedikit ikut, dan tidak pernah lewat satu layar.

Pesan dari Raka
Laporan harian
Pengingat rapat
Foto produk baru
Invoice #2041
Catatan Founder
↕ tarik
Jari0
Offset0
Plafon d0
offset = (1 − 1 / (c·x / d + 1)) · d   c = 0.55
02

Apple vs logaritma

Satu tarikan, dua rumus. Tarik ke bawah: logaritma terus naik melewati satu layar, rumus Apple berhenti di bawah plafon.

Logaritma
Apple
↓ tarik di sini
Tarikan0 layar
Log0
Apple0
03

Timer vs pegas

Tekan "Kirim", lalu genggam bola di tengah jalan dan lempar. Timer mulai lagi dari nol; pegas membawa kecepatan lemparanmu.

Timer 0.5 s
Pegas .smooth
Timer0
Pegas0
Saat dilepas–
04

.smooth · .snappy · .bouncy

Ketiganya pegas dengan response sama. Yang beda hanya redaman (gesekan). Geser response atau genggam bolanya.

.smooth ζ 1.00
.snappy ζ 0.85
.bouncy ζ 0.70
Response 0.50 s
m1
k157.9
b (.smooth)25.1
05

Lempar sheet

Seret atau lempar sheet. Kecepatan lemparan menentukan berhenti di mana, lalu pegas membawanya dengan kecepatan itu.

Kopi Senja
Jl. Malioboro 12 · Buka sampai 22.00
RuteTeleponSimpan
Lemparan0
TujuanKecil
Posisi0
06

Form pun wajib bergerak

Fokus kolom, tekan tombol, kirim email salah (goyang), lalu email benar (sukses). Semuanya pegas.

Tombol1.00
Goyang0
StatusSiap
07

Hukum Jakob ala iOS

Pengguna berharap gerak yang sudah mereka kenal. Toggle bisa diketuk atau diseret; baris bisa digeser ke kiri untuk hapus.

Wi-Fi
Mode Fokus
Hapus
Rapat timBesok 09.00
Hapus
Kirim invoiceJumat
Knob0
Geser baris0
Kecepatan0

Navigasi

Pindah halaman, tab, dan paging, semuanya bisa dilempar.

Overlay

Alert, notifikasi, menu, dan lipatan yang muncul dengan pegas.

Kontrol

Tombol kecil yang biasanya kaku, di sini semua berpegas.

Gestur

Cubit, seret, lempar, dan dock ala macOS.