7 tips animasi praktis – Beragampengetahuan

Satu kesalahan yang saya buat di awal karir saya adalah berpikir bahwa desain, dan khususnya animasi, adalah seni yang bisa Anda “dapatkan” atau tidak.

Segala sesuatu yang indah terasa seperti keajaiban, dan keajaiban itu terasa benar-benar di luar jangkauan.

Meskipun memerlukan pengembangan intuisi yang baik, ada banyak teknik yang dapat Anda gunakan untuk membuat animasi Anda terasa lebih baik tanpa harus mempelajari “keajaiban”.

Berikut tujuh ide sederhana yang dapat Anda gunakan untuk meningkatkan animasi Anda saat ini.

1. Tombol perbesar

Antarmukanya akan terasa seperti mendengarkan pengguna. Anda harus berusaha memberikan umpan balik kepada pengguna tentang semua tindakan mereka secepat mungkin. Mengirimkan formulir harus menunjukkan status pemuatan dan operasi penyalinan ke papan klip harus menunjukkan status sukses.

Cara mudah untuk membuat antarmuka langsung terasa lebih responsif adalah dengan menambahkan efek zoom-out halus saat tombol ditekan. Skalanya adalah 0.97 ada :active Kelas semu harus melakukan pekerjaan:

2. Jangan bernyawa sesuai skala (0)

elemen animasi scale(0) Dapat membuat animasi terasa buruk. Coba animasikan dengan skala awal yang lebih tinggi (0,9+). Membuat gerakan terasa lebih lembut, natural, dan elegan.

scale(0) Rasanya kurang pas karena elemennya terlihat muncul begitu saja. Semakin tinggi nilai awalnya, semakin dekat dengan dunia nyata. Ibarat balon, ia tetap terlihat bentuknya meskipun sudah mengempis, namun tidak pernah hilang seluruhnya.

3. Jangan tunda tooltip berikutnya

Tooltip harus memiliki penundaan sebelum muncul untuk mencegah aktivasi yang tidak disengaja. Setelah tooltip terbuka, mengarahkan kursor ke tooltip lainnya akan segera membukanya dan tanpa animasi. Ini terasa lebih cepat tanpa menggagalkan tujuan penundaan aslinya.

Radix dan Base UI adalah dua pustaka komponen tanpa gaya yang melewatkan penundaan setelah tooltip ditampilkan. UI dasar juga memungkinkan Anda melewati animasi. Untuk melakukan ini, Anda perlu menargetkan data-instant properti dan atur durasi transisi ke 0ms.

Inilah gaya untuk mencapai hal ini:

.tooltip {
  transition:
    transform 0.125s ease-out,
    opacity 0.125s ease-out;
  transform-origin: var(--transform-origin);
 
  &[data-starting-style],
  &[data-ending-style] {
    opacity: 0;
    transform: scale(0.97);
  }
 
  /** This takes care of disabling subsequent animations */
  &[data-instant] {
    transition-duration: 0ms;
  }
}

4. Pilih pelonggaran yang sesuai

Easing menggambarkan tingkat perubahan sesuatu seiring waktu dan merupakan bagian terpenting dari setiap animasi.

Hal ini dapat membuat animasi yang buruk tampak bagus, dan dapat membuat animasi yang bagus terlihat buruk.

Jika Anda ingin menganimasikan konten yang masuk atau keluar layar, gunakan ease-out. Ini berakselerasi di awal, memberikan perasaan responsif kepada pengguna.

Gunakan menu tarik-turun di kiri bawah ease-indimulai perlahan. Yang di sebelah kanan menggunakan ease-outdimulai dengan cepat dan membuat animasi terasa lebih cepat.

Durasi menu drop-down ini sama, 300ms (Anda dapat memeriksa kode untuk memverifikasi ini), tapi ease-in Seseorang merasa lebih lambat. Inilah perbedaan yang dihasilkan oleh kebijakan pelonggaran.

Anda dapat mengurangi durasi kerajinan ease-in Berhasil, namun pelonggaran ini tidak berfungsi untuk animasi UI. itu berakselerasi menjadi akhiryang merupakan kebalikan dari apa yang kita inginkan.

Ini adalah representasi visual dari dua kurva, berwarna biru ease-out. Perhatikan seberapa cepat pergerakannya di awal, inilah animasi yang kita inginkan.

Kebanyakan animasi yang pernah Anda lihat sejauh ini juga menggunakan kurva easing khusus untuk membuatnya terasa lebih baik.

Kurva pelonggaran yang dibangun ke dalam CSS biasanya tidak cukup kuat, itulah sebabnya saya hampir tidak pernah menggunakannya. Lihatlah contoh di bawah ini di mana kami membandingkan dua versi ease-in-out melengkung:

Anda tetap bisa menerapkan prinsip easing, gunakan saja custom ease-out untuk dampak yang lebih besar. Ada banyak situs web yang menawarkan variasi khusus untuk semua easing, saya merekomendasikan salah satunya: easings.co.

5. Jadikan animasi Anda sadar akan asal usulnya

Salah satu cara untuk membuat popup Anda terasa lebih baik adalah dengan membuat mereka mengetahui asal usulnya. Mereka harus mulai mengurangi dampaknya dengan memicunya. Anda membutuhkan CSS transform-origin untuk tujuan ini, tetapi nilai defaultnya adalah centeryang dalam banyak kasus salah.

Klik tombol umpan balik di bawah untuk membuka popup dan melihat animasinya dari tengah, menutupnya, dan menurut J Klik pada ikon X abu-abu Tetapkan asal yang benar dan buka popup lagi.
mendesak S Animasi akan diperlambat sehingga Anda dapat melihat perbedaannya dengan lebih baik.

Anda juga dapat mengklik tombol putus-putus untuk memindahkan komponen ke lokasi lain. Perbedaannya paling terlihat ketika titik asal horizontal dan vertikal tidak cocok (misalnya sudut kanan atas).

UI Dasar dan UI Radix mendukung animasi sadar asal melalui variabel CSS. Artinya, penerapan variabel-variabel ini secara otomatis akan menetapkan asal yang benar.

.radix {
  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
}
 
.baseui {
  transform-origin: var(--transform-origin);
}

Anda mungkin berpikir perbedaannya tidak kentara, atau mungkin Anda bahkan tidak menyadarinya. Sejujurnya, tidak masalah apakah Anda atau pengguna Anda memperhatikan hal ini. Secara keseluruhan, detail-detail yang tidak terlihat menjadi terlihat, menjadi semakin rumit.

“

Semua detail tak terlihat ini digabungkan untuk menghasilkan sesuatu yang menakjubkan, seperti ribuan suara yang nyaris tak terdengar bernyanyi serempak.

“

6. Buat animasi tetap cepat

Spinner yang berputar lebih cepat membuat aplikasi tampak memuat lebih cepat, meskipun waktu pemuatannya sama. Hal ini meningkatkan kinerja yang dirasakan.

satu 180ms Pilih rasio nuansa animasi 400ms satu:

Sebagai aturan praktis, animasi UI umumnya harus dipertahankan 300ms.

Jika animasi atau interaksi hover muncul puluhan atau bahkan ratusan kali sehari, hapus seluruhnya. Alih-alih membuat pengguna Anda senang, mereka dengan cepat menjadi mengganggu dan membuat antarmuka Anda terasa lebih lambat.

Saya membahas topik ini lebih detail di artikel “Anda Tidak Perlu Animasi”.

7. Gunakan blur saat tidak ada yang berhasil

Jika Anda sudah mencoba beberapa easing dan durasi berbeda untuk animasi Anda dan masih terasa kurang pas, coba tambahkan beberapa filter: blur() untuk menutupi kekurangan tersebut.

Di bawah ini kami memiliki tombol untuk melakukan crossfade antara dua status dan tombol lain untuk menambahkan 2px Betapa buramnya animasi ini. Ini juga menggunakan trik #1 untuk mengecilkan tombolnya 0.97 saat ditekan. Perhatikan betapa nyamannya tombol kedua.

Blur berfungsi di sini karena menjembatani kesenjangan visual antara keadaan lama dan baru. Tanpanya, Anda melihat dua objek berbeda, yang tidak terasa alami.

Ini menipu mata untuk melihat transisi yang mulus dengan memadukan dua keadaan menjadi satu.

Perhatikan bahwa kedua keadaan ini lebih jelas tanpa mengaburkan:

terus belajar

Kiat-kiat ini akan meningkatkan animasi Anda, tetapi artikel ini hanya membahas permukaan tentang cara meningkatkan antarmuka Anda melalui gerakan.

Di animations.dev, kita melihat lebih dekat teori dan praktik animasi yang hebat. Terdapat video dan komponen interaktif untuk membantu Anda memahami teori, dan latihan untuk membantu Anda berlatih membuat animasi yang terasa pas.

Pendaftaran terakhir untuk tahun ini kurang dari seminggu lagi 10 hari. Anda dapat menggunakan tautan di bawah ini untuk mendaftar ke daftar tunggu Pratinjau kursus gratis Lihat apakah ini berhasil untuk Anda:

Lihat animations.dev