Gerak

Gerak menjelaskan, lalu berhenti

Gerak di Patepang menjelaskan sesuatu, lalu berhenti. Ia pendek, bisa dipotong saat orangnya sudah beralih, tidak pernah berulang tanpa akhir, dan diam saat HP meminta gerak dikurangi.

Gerak antarmuka tidak lebih dari 300 ms. Yang pergi kira-kira seperlima lebih cepat daripada saat datang, dan tidak ada yang mulai dengan lambat: setiap kurva berangkat dengan cepat.

Situs menyimpan lebih sedikit lagi: kedatangan halus saat halaman digulir, transisi antarhalaman bawaan browser, dan dua bagian yang digarap di halaman depan patepang.com.

Tiga kurva

Tiga kurva, masing-masing dengan satu tugas.

out(0,23; 1; 0,32; 1)Datang, pergi, menjawab tekanan. Bawaan, dan kurva situs untuk hampir semuanya.

inOut(0,77; 0; 0,175; 1)Sesuatu yang berpindah dari satu tempat di layar ke tempat lain.

sheet(0,32; 0,72; 0; 1)Dialog dan lembar.

out · 220 ms

inOut · 240 ms

sheet · 300 ms

Setiap kurva pada durasi yang paling sering dipakainya.

Jenis dan durasi

Setiap gerak di aplikasi adalah salah satu jenis ini. Animasi baru memilih jenisnya; ia tidak pernah membawa durasi sendiri.

Jenis	ms	Penuh	Saat gerak dikurangi
`press`	120	Ease-out; tombol mengecil ke 0,97, tombol ikon bundar ke 0,92	Seketika, hanya warna latar
`selection`	160	Ease-out: tuas sakelar, centang, titik radio	Seketika
`enter / exit`	220 / 180	Ease-out; naik 8 sambil muncul, dan pergi lebih cepat daripada datang	Pudar 120 ms, tanpa gerak
`move`	240	Ease-in-out: penanda kontrol segmen, isian langkah	Seketika
`overlayEnter / overlayExit`	300 / 240	Kurva lembar; dialog membesar dari 0,96, lembar naik dari bawah	Pudar 120 ms
`pulse`	900	Per setengah siklus selama memuat, paling banyak delapan siklus	Diam
`stagger`	40	Antara satu baris daftar dan baris berikutnya, paling banyak enam baris	Tidak ada

Tidak ada yang bergerak jauh. Yang datang naik 8, tidak lebih; dialog membesar dari 0,96, tidak pernah dari nol; tanda konfirmasi muncul dari 0,9.

Pegas disimpan untuk saat jari menyerahkan kecepatannya, seret atau jentik. Selebihnya adalah kurva dengan durasi.

Saat gerak dikurangi

Aplikasi mengikuti setelan HP, juga saat setelan itu berubah selagi aplikasi terbuka. Saat itu tidak ada yang bergeser, membesar, berputar, atau berulang: tekanan dan pilihan dijawab seketika, dan yang datang atau pergi memudar 120 ms.

Situs mengikuti setelan browser: tanpa kedatangan, tanpa transisi, tanpa yang berjalan. Yang digambar lewat gerak menampilkan keadaan akhirnya.

Yang bergerak sendiri

Beberapa hal bergerak sendiri, dan masing-masing dibatasi.

Apa	Batasnya
Denyut sesuatu yang sedang dimuat	Delapan siklus, 900 ms per setengahnya, lalu diam
Tiga titik orang yang sedang mengetik	Enam gelombang pendek; sinyal baru memulainya lagi
Pita fakta di patepang.com	Tombol jeda di sampingnya, dan ia berhenti di bawah penunjuk
Pratinjau tempel	Sekali untuk setiap tekanan

Wordmark punya geraknya sendiri, 300 ms dari awal sampai akhir: kedua pa bergeser masuk, te muncul di antaranya, dan panyecek naik paling akhir. Geraknya dijabarkan di halaman Logo.

Aturan

Lakukan

Menggerakkan sesuatu hanya untuk mengatakan dari mana ia datang, ke mana ia pergi, atau bahwa tekanan terasa.
Membiarkan orang memotongnya: yang diketuk selama gerak tetap menjawab.
Memutar satu rangkaian gerak sekali untuk setiap tekanan.
Memberi cara menjeda pada apa pun yang berjalan sendiri.

Jangan

Berulang tanpa akhir.
Mulai dengan lambat: tanpa ease-in di awal gerak.
Mengaburkan atau membesarkan yang datang di halaman situs.
Bergerak untuk menarik mata ke sesuatu yang tidak diminta orangnya.

Di kode

Di kode, jenis dan kurva punya nama, dan kebijakan gerak dikurangi ikut bersamanya.

/* patepang.com */
transition: transform 220ms var(--ease);

@media (prefers-reduced-motion: reduce) {
  transition: none;
}

// the app: a kind, never a raw duration
const spec = useMotionSpec('enter');
opacity.set(withTiming(1, timing(spec)));