Meningkatkan Animasi CSS Dengan Kurva Gerak

Ada animasi UI, dan kemudian ada animasi UI yang bagus . Animasi yang bagus membuat Anda menjadi "Wow!" — itu halus, indah dan, yang terpenting, alami, tidak kuning, kaku atau robot. Jika Anda sering melakukan Dribbble atau UpLabs, Anda akan tahu apa yang saya bicarakan.

Bacaan lebih lanjut tentang Smashing:

• Animasi SVG dan CSS dengan clip-path
• Teknik Animasi Praktis
• Membuat Animasi 'gambar tangan' Dengan SVG
• API Animasi Web baru

Dengan begitu banyak desainer luar biasa yang membuat animasi yang begitu indah, pengembang mana pun secara alami ingin membuatnya kembali dalam proyek mereka sendiri. Sekarang, CSS memang menyediakan beberapa preset untuk transition-timing-function , seperti ease-in , ease-out dan ease-in-out , yang menambahkan beberapa tingkat kehalusan dan realisme, tetapi mereka sangat umum, bukan? Betapa membosankannya jika setiap animasi di web mengikuti tiga fungsi pengaturan waktu yang sama?

Salah satu sifat dari transition-timing-function adalah cubic-bezier(n1, n2, n3, n4) , di mana Anda dapat melewatkan empat angka untuk membuat fungsi pengaturan waktu Anda sendiri. Menjelang akhir artikel ini, Anda akan tahu persis apa yang diwakili oleh keempat angka ini — tetap saja, percayalah, menghasilkan empat angka untuk menangkap transisi yang Anda bayangkan di kepala Anda sama sekali tidak mudah. Tapi berkat cubic-bezier dan Caesar, Anda tidak perlu melakukannya. Alat-alat ini membawa kurva gerak ke web.

Kurva gerak terutama digunakan oleh animator (misalnya, dalam Adobe After Effects) untuk membuat animasi yang canggih dan realistis. Dengan cubic-bezier dan Caesar, Anda cukup memanipulasi bentuk kurva, dan keempat angka itu ( n1, n2, n3, n4 ) akan diisi untuk Anda, yang benar-benar hebat! Namun, untuk menggunakan dan memaksimalkan kurva gerak, Anda perlu memahami cara kerjanya, dan itulah yang akan kita lakukan dalam artikel ini. Mari kita mulai.

Memahami Kurva Gerak

Kurva gerak tidak lain adalah plot antara properti animasi dan waktu. Kurva gerak menentukan bagaimana kecepatan animasi yang berjalan di bawah pengaruhnya bervariasi dari waktu ke waktu.

Mari kita ambil jarak ( translateX ) sebagai contoh properti animasi. (Penjelasan ini berlaku untuk properti animasi lainnya.)

Jika Anda pernah memiliki pengalaman dengan fisika dan kalkulus dasar, Anda akan tahu bahwa menguraikan kecepatan dari grafik jarak-waktu sangat sederhana. Turunan pertama jarak sebagai fungsi waktu , terhadap waktu , adalah kecepatan, yang berarti bahwa suatu benda yang mengikuti kurva jarak-waktu akan memiliki kecepatan yang lebih besar di tempat-tempat yang kurvanya curam dan lebih rendah di tempat-tempat yang kurvanya lebih datar. . Jika Anda tahu cara kerjanya, bagus! Anda sudah siap dan dapat melompat ke bagian berikutnya.

Sekarang, saya menyadari bahwa desain dan pengembangan adalah bidang yang beragam, dan tidak semua orang memiliki latar belakang yang sama. Mungkin dua paragraf di atas adalah jargon bagi Anda. Jangan khawatir. Kami akan melanjutkan dan memahami jargonnya.

Perhatikan kotak merah di bawah ini. Mari kita mendapatkan sedikit callow di sini dan memanggil kotak merah "Boxy"; akan lebih mudah untuk merujuknya seperti itu. Baiklah, jadi Boxy akan berpindah dari satu sisi layar ke sisi lainnya secara linier, dan kita akan menganalisis gerakannya.

Salah satu preset transition-timing-function adalah linear . Untuk membuat Boxy bergerak, yang kita lakukan hanyalah menambahkan kelas berikut.

 .moveForward { transform: translateX(1000px); }

Untuk mengontrol animasi, kami akan mengatur properti transition untuk Boxy sebagai berikut:

 #boxy { width: 200px; height: 200px; background: red; transition-property: transform; transition-duration: 1s; transition-timing-function: linear; }

Itu cara yang sangat verbose untuk menentukan transition . Pada kenyataannya, Anda hampir selalu menemukan transition yang ditulis dalam bentuk singkatnya:

 #boxy { width: 200px; height: 200px; background: red; transition: transform 1s linear; }

Mari kita lihat.

Robot, bukan? Anda dapat mengatakan bahwa gerakan ini terasa seperti robot karena linier, yang merupakan jawaban yang sangat masuk akal. Tapi bisakah Anda menjelaskan alasannya? Kita dapat melihat bahwa pengaturan linear menghasilkan gerakan robot, tetapi apa sebenarnya yang terjadi di balik layar? Itulah yang akan kita cari tahu dulu; kita akan masuk ke jeroan dan memahami mengapa gerakan ini terasa seperti robot, kotak-kotak, dan tidak alami.

Mari kita mulai dengan membuat grafik gerakan Boxy untuk melihat apakah kita dapat memperoleh beberapa wawasan. Grafik kami akan memiliki dua sumbu, yang pertama adalah jarak, dan yang kedua. Boxy mencakup total jarak 1000 piksel (jarak) dalam 1 detik (waktu). Sekarang, jangan takut dengan semua matematika di bawah ini — ini sangat sederhana.

Berikut adalah grafik kami yang sangat sederhana, dengan sumbu seperti yang disebutkan.

Saat ini, itu kosong. Mari kita isi dengan beberapa data.

Untuk memulainya, kita tahu bahwa pada 0 detik, saat animasi belum dimulai, Boxy berada di posisi awalnya (0 piksel). Dan setelah 1 detik berlalu, Boxy telah menempuh total 1000 piksel, mendarat di tepi berlawanan dari layar.

Mari kita plot data ini pada grafik.

Sejauh ini bagus. Tetapi dua titik data tidak cukup — kami membutuhkan lebih banyak. Gambar berikut menunjukkan posisi Boxy pada titik waktu yang berbeda (semua berkat kamera kecepatan tinggi saya).

Mari tambahkan data ini ke grafik kita.

Anda tentu saja dapat memiliki lebih banyak titik data untuk waktu yang berbeda (misalnya, 0,375 detik, 0,6 detik, dll.) tetapi apa yang kita miliki sudah cukup untuk melengkapi grafik kita. Dengan menggabungkan semua titik, kami telah menyelesaikan grafik. tinggi lima!

Keren, tapi apa artinya ini bagi kita? Ingat bahwa kami memulai penyelidikan kami dengan tujuan untuk memahami mengapa gerakan linier Boxy terasa tidak wajar dan seperti robot? Sekilas, grafik yang baru saja kita buat ini tidak memberi tahu kita apa pun tentang itu. Kita perlu masuk lebih dalam.

Ingatlah grafiknya dan mari kita bicara sebentar tentang kecepatan. Saya tahu Anda tahu apa itu kecepatan — saya hanya ingin memasukkannya ke dalam istilah matematis. Sebagai kelanjutannya, rumus untuk kecepatan adalah ini:

Oleh karena itu, jika sebuah mobil menempuh jarak 100 kilometer dalam 1 jam, kita katakan kecepatannya adalah 100 kilometer per jam.

Jika mobil menggandakan kecepatannya, ia akan mulai menempuh jarak dua kali lipat (200 kilometer) dalam interval yang sama (1 jam), atau, dengan kata lain, ia akan menempuh jarak awal 100 kilometer dalam setengah waktu (0,5 jam) . Masuk akal?

Demikian pula, jika mobil mengurangi separuh kecepatannya (yaitu, diperlambat setengahnya), ia akan mulai menempuh jarak 50 kilometer dalam interval yang sama (1 jam), atau, dengan kata lain, ia akan menempuh jarak awal 100 kilometer dalam dua kali waktu (2 jam).

Besar! Dengan itu, mari kita lanjutkan di mana kita tinggalkan. Kami mencoba mencari tahu bagaimana grafik antara jarak dan waktu dapat membantu kami memahami mengapa gerakan linier Boxy terasa seperti robot.

Hei, tunggu sebentar! Kami memiliki grafik antara jarak dan waktu, dan kecepatan dapat dihitung dari jarak dan waktu, bukan? Mari kita coba menghitung kecepatan Boxy pada interval waktu yang berbeda.

Di sini, saya telah memilih tiga interval waktu yang berbeda: satu di dekat awal, satu di tengah dan satu di akhir di dekat posisi akhir. Seperti terbukti, pada ketiga interval, Boxy memiliki kecepatan yang persis sama (s1 = s2 = s3) 1000 piksel per detik; yaitu, berapa pun interval yang Anda pilih pada grafik di atas, Anda akan menemukan Boxy bergerak pada 1000 piksel per detik. Bukankah itu aneh? Hal-hal dalam kehidupan nyata tidak bergerak dengan kecepatan konstan; mereka mulai perlahan, secara bertahap meningkatkan kecepatannya, bergerak sebentar, dan kemudian melambat lagi sebelum berhenti, tetapi Boxy tiba-tiba mulai dengan kecepatan 1000 piksel per detik, bergerak dengan kecepatan yang sama dan tiba-tiba berhenti pada kecepatan yang sama persis. Inilah mengapa gerakan Boxy terasa seperti robot dan tidak natural. Kita harus mengubah grafik kita untuk memperbaikinya. Tapi sebelum menyelam, kita harus tahu bagaimana perubahan kecepatan akan mempengaruhi grafik yang ditarik antara jarak dan waktu. Siap? Ini akan menjadi menyenangkan.

Mari gandakan kecepatan Boxy dan lihat bagaimana tampilan grafik berubah sebagai respons. Kecepatan asli Boxy, seperti yang kami hitung di atas, adalah 1000 piksel per detik. Karena kami telah menggandakan kecepatannya, Boxy sekarang dapat menempuh jarak 1000 piksel dalam separuh waktu — yaitu, dalam 0,5 detik. Mari kita menempatkan bahwa pada grafik.

Bagaimana jika kita melipatgandakan kecepatan? Boxy sekarang mencakup 1000 piksel dalam sepertiga waktu (sepertiga detik).

Hmm, perhatikan sesuatu? Perhatikan bagaimana, ketika grafik berubah, sudut yang dibuat garis dengan sumbu waktu meningkat dengan meningkatnya kecepatan.

Baiklah, mari kita lanjutkan dan membagi dua kecepatan Boxy. Dengan mengurangi separuh kecepatannya, Boxy hanya akan mampu menempuh 500 piksel (setengah jarak aslinya) dalam 1 detik. Mari kita menempatkan ini pada grafik.

Mari kita memperlambat Boxy sedikit lagi, membuat kecepatan sepertiga dari aslinya. Boxy akan dapat menempuh sepertiga dari jarak semula dalam 1 detik.

Lihat sebuah pola? Garis semakin curam dan semakin curam saat kita meningkatkan kecepatan Boxy, dan mulai mendatar saat kita memperlambat Boxy.

Ini masuk akal karena, untuk jalur yang lebih curam, sedikit kemajuan dalam waktu menghasilkan perubahan jarak yang jauh lebih tinggi, yang menyiratkan kecepatan yang lebih besar.

Sebaliknya, untuk jalur yang kurang curam, perubahan waktu yang besar hanya menghasilkan sedikit perubahan jarak, yang berarti kecepatan lebih rendah.

Dengan semua perubahan yang kami buat, Boxy masih bergerak secara linier, hanya dengan kecepatan yang berbeda. Namun, dengan pengetahuan baru yang kami peroleh tentang bagaimana perubahan jarak versus waktu dapat memengaruhi kecepatan, kami dapat bereksperimen dan menggambar grafik yang membuat Boxy bergerak dengan cara yang terlihat alami dan realistis.

Mari kita ambil langkah demi langkah. Pertama, hal-hal dalam kehidupan nyata mulai lambat dan perlahan-lahan meningkat dalam kecepatan. Jadi, mari kita lakukan itu.

Dalam semua iterasi grafik yang ditunjukkan di bawah ini, Anda akan melihat bahwa titik-titik di sudut yang berlawanan tetap tetap. Ini karena kami tidak mengubah durasi animasi berjalan, kami juga tidak mengubah jarak yang ditempuh Boxy.

Jika Boxy mengikuti grafik di atas, ia akan bergerak dengan kecepatan lebih lambat selama 0,25 detik, karena jalurnya kurang curam mulai dari 0 hingga 0,25 detik, dan kemudian akan tiba-tiba beralih ke kecepatan yang lebih tinggi setelah 0,25 detik (alasannya adalah bahwa garis pada grafik menjadi lebih curam setelah 0,25 detik). Namun, kita perlu memperlancar transisi ini; kami tidak ingin ada sudut — bagaimanapun juga ini disebut kurva gerak . Mari kita ubah sudut itu menjadi kurva.

Perhatikan transisi mulus yang dialami Boxy dari keadaan diam ke peningkatan kecepatan secara bertahap.

Bagus! Selanjutnya, objek dalam kehidupan nyata secara progresif melambat sebelum berhenti. Mari kita ubah grafiknya untuk mewujudkannya. Sekali lagi, kami akan mengambil titik waktu setelah kami ingin Boxy mulai melambat. Bagaimana kalau sekitar 0,6 detik? Saya telah menghaluskan sudut transisi ke kurva di sini.

Lihatlah Boxy pergi! Jauh lebih alami, bukan?

Kurva yang kita gambar di tempat sudut sebenarnya adalah kumpulan dari banyak segmen garis kecil; dan, seperti yang sudah Anda ketahui, semakin curam garis pada grafik, semakin tinggi kecepatannya, dan semakin datar garisnya, semakin lambat kecepatannya. Perhatikan bagaimana di bagian kiri gambar, segmen garis yang membentuk kurva menjadi semakin curam, menghasilkan peningkatan kecepatan secara bertahap, dan semakin mendatar di sisi kanan, sehingga kecepatan semakin menurun?

Dengan semua pengetahuan ini, memahami kurva gerak menjadi lebih mudah. Mari kita lihat beberapa contoh.

Menggunakan Kurva Gerak Dalam Animasi UI

Lain kali Anda harus menganimasikan elemen UI, Anda akan memiliki kekuatan kurva gerak yang Anda inginkan. Baik itu bilah geser, jendela modal, atau menu tarik-turun, menambahkan jumlah animasi yang tepat dan membuatnya terlihat halus dan alami akan sangat meningkatkan kualitas antarmuka pengguna Anda. Ini akan membuat antarmuka pengguna terasa nyaman. Ambil menu slide-out di bawah ini:

Mengklik menu hamburger membawa menu dari kiri, tetapi animasinya terasa seperti kotak-kotak. Baris 51 dari CSS menunjukkan bahwa animasi memiliki transition-timing-function disetel ke linear . Kami dapat meningkatkan ini. Mari kita beralih ke kubik-bezier dan membuat fungsi pengaturan waktu khusus.

Jika Anda membaca ini, aman untuk berasumsi bahwa Anda seorang desainer atau pengembang atau keduanya dan, karenanya, tidak asing dengan kurva bezier kubik; ada kemungkinan besar Anda pernah bertemu mereka setidaknya sekali. Kurva Bezier adalah keajaiban. Mereka digunakan terutama dalam grafik komputer untuk menggambar bentuk dan digunakan dalam alat seperti Sketch dan Adobe Illustrator untuk menggambar grafik vektor. Alasan mengapa kurva kubik bezier sangat populer adalah karena sangat mudah digunakan: Cukup ubah posisi keempat titik yang berbeda, dan buat jenis kurva yang Anda butuhkan.

Karena kita selalu mengetahui keadaan awal dan akhir dari objek animasi, kita dapat memperbaiki dua titik. Itu hanya menyisakan dua poin yang posisinya harus kita ubah. Dua titik tetap disebut titik jangkar, dan dua sisanya adalah titik kontrol.

Seperti yang Anda ingat, cubic-bezier menerima empat angka ( n1, n2, n3, n4 ) saat Anda membuat transition-timing-function khusus . Keempat angka ini tidak mewakili apa pun kecuali posisi dua titik kontrol: n1, n2 mewakili koordinat x dan y dari titik kontrol pertama, dan n3, n4 mewakili koordinat titik kontrol kedua. Karena mengubah posisi titik kontrol akan mengubah bentuk kurva dan, oleh karena itu, animasi kita secara keseluruhan, hasilnya sama ketika salah satu atau semua n1, n2, n3, n4 dimodifikasi. Misalnya, gambar di bawah ini mewakili cubic-bezier(.14, .78, .89, .35) :

Matematika di balik kurva yang tampaknya sederhana ini sangat menarik.

Baiklah, baiklah, mari kembali ke tujuan kita menggunakan cubic-bezier: membuat fungsi transition-timing-function kustom . Saya ingin jenis animasi di mana menu meluncur dengan sangat cepat dan kemudian melambat dan berakhir dengan anggun:

Ini terlihat bagus. Animasi akan dimulai dengan cepat dan kemudian melambat, alih-alih bergerak dengan kecepatan konstan. Saya hanya akan menyalin cubic-bezier(.05, .69, .14, 1) dari bagian atas halaman dan mengganti linear dengannya.

Lihat perbedaannya? Iterasi kedua terasa jauh lebih alami dan menarik. Bayangkan jika setiap animasi di UI Anda mengikuti fungsi pengaturan waktu alami. Betapa hebatnya itu?

Seperti yang telah kita lihat, kurva gerak tidak rumit sama sekali. Mereka sangat mudah dimengerti dan digunakan. Dengan mereka, Anda dapat membawa UI Anda ke tingkat berikutnya.

Saya harap Anda telah mempelajari cara kerja kurva gerak. Jika Anda melalui banyak percobaan dan kesalahan untuk mendapatkan kurva gerak bekerja seperti yang Anda inginkan, atau jika Anda tidak menggunakannya sama sekali, Anda sekarang harus nyaman menekuknya sesuai keinginan Anda dan membuat animasi yang indah. Karena bagaimanapun juga, animasi itu penting.