Cara Membuat Animasi Tingkat Lanjut Dengan CSS — Smashing Magazine

Kami menjelajahi web setiap hari, dan sebagai pengembang, kami cenderung memperhatikan detail halus di situs web. Satu hal yang selalu saya perhatikan adalah seberapa halus animasi di situs web. Animasi sangat bagus untuk tujuan UX dan desain. Anda dapat membuat website interaktif yang menyenangkan pengunjung dan membuat mereka mengingat website Anda.

Membuat animasi tingkat lanjut terdengar seperti topik yang sulit, tetapi kabar baiknya adalah, di CSS, Anda dapat menumpuk beberapa animasi sederhana satu sama lain untuk membuat yang lebih kompleks!

Dalam postingan blog ini, Anda akan mempelajari hal-hal berikut:

• Apa itu bezier kubik dan bagaimana penggunaannya untuk membuat animasi “kompleks” hanya dalam satu baris CSS;
• Cara menumpuk animasi satu sama lain untuk membuat animasi tingkat lanjut;
• Cara membuat animasi rollercoaster dengan menerapkan dua poin yang Anda pelajari di atas.

Catatan: Artikel ini mengasumsikan bahwa Anda memiliki pengetahuan dasar tentang animasi CSS. Jika tidak, silakan periksa tautan ini sebelum melanjutkan dengan artikel ini.

Cubic Beziers: Apa Itu?

Fungsi cubic-bezier di CSS adalah fungsi pelonggaran yang memberi Anda kendali penuh atas perilaku animasi Anda terhadap waktu. Berikut definisi resminya:

Fungsi easing kubik Bézier adalah jenis fungsi easing yang ditentukan oleh empat bilangan real yang menentukan dua titik kontrol, P1 dan P2dari kurva Bézier kubik yang titik akhirnya P0 dan P3 ditetapkan pada (0, 0) dan (1, 1) masing-masing. Itu x koordinat dari P1 dan P2 terbatas pada jangkauan [0, 1].

Catatan: Jika Anda ingin mempelajari lebih lanjut tentang fungsi easing, Anda dapat membaca artikel ini. Ini berjalan di belakang layar tentang bagaimana fungsi linear, kubik-bezier, dan tangga bekerja!

Tapi Apa Itu Fungsi Easing?

Mari Kita Mulai Dengan Kurva Linear

Bayangkan dua poin P₀ dan P₁di mana P₀ adalah titik awal dari animasi dan P₁ adalah titik akhir. Sekarang bayangkan titik lain bergerak secara linear antara dua titik sebagai berikut:

Ini disebut kurva linier! Ini adalah animasi paling sederhana di luar sana, dan Anda mungkin pernah menggunakannya sebelumnya saat mulai belajar CSS.

Selanjutnya: Kurva Bezier Kuadrat

Bayangkan Anda memiliki tiga poin: P₀, P₁ dan P₂. Anda ingin animasi berpindah dari P₀ ke P₂. Pada kasus ini, P₁ adalah titik kontrol yang mengontrol kurva animasi.

Ide dari bezier kuadrat adalah sebagai berikut:

1. Hubungkan garis imajiner antara P₀ dan P₁ dan antara P₁ dan P₂ (diwakili oleh garis abu-abu).
2. Titik Q₀ bergerak sepanjang garis antara P₀ dan P₁. Pada saat yang sama, Titik Q₁ bergerak sepanjang garis antara P₁ dan P₂.
3. Hubungkan garis imajiner antara Q₀ dan Q₁ (diwakili oleh garis hijau).
4. Pada saat yang sama Q₀ dan Q₁ mulai bergerak, intinya B mulai bergerak di sepanjang garis hijau. Jalur titik itu B ambil adalah jalur animasi.

Perhatikan bahwa Q₁, Q₂ dan B tidak bergerak dengan kecepatan yang sama. Mereka semua harus memulai pada waktu yang sama dan menyelesaikan jalan mereka pada waktu yang sama pula. Jadi setiap titik bergerak dengan kecepatan yang sesuai berdasarkan panjang garis yang dilaluinya.

Akhirnya: Kurva Cubic Bezier

Kurva bezier kubik terdiri dari 4 poin: P₀, P₁, P₂ dan P₃. Animasi dimulai pada P₀ dan berakhir pada P₃. P₁ dan P₂ adalah titik kontrol kita.

Bezier kubik berfungsi sebagai berikut:

1. Hubungkan garis imajiner antara (P₀, P₁), (P₁, P₂) dan (P₂, P₃). Ini diwakili oleh garis abu-abu.
2. Poin Q₀, Q₁ dan Q₂ bergerak sepanjang garis (P₀, P₁), (P₁, P₂) dan (P₂, P₃) masing-masing.
3. Hubungkan garis imajiner antara (Q₀, Q₁) dan (Q₁, Q₂). Mereka diwakili oleh garis hijau.
4. Poin R₀ dan R₁ bergerak sepanjang garis (Q₀, Q₁) dan (Q₁, Q₂) masing-masing.
5. Hubungkan garis antara R₀ dan R₁ (diwakili oleh garis biru).
6. Terakhir, Titik B bergerak sepanjang garis yang menghubungkan antara R₀ dan R₁. Titik ini bergerak di sepanjang jalur animasi.

Jika Anda ingin lebih memahami cara kerja bezier kubik, saya sarankan untuk memeriksa tautan desmos ini. Bermain-main dengan titik kontrol dan periksa bagaimana animasi berubah seiring waktu. (Perhatikan bahwa animasi di tautan diwakili oleh garis hitam.)

Susun Animasi

Animasi besar dengan banyak langkah dapat dipecah menjadi beberapa animasi kecil. Anda dapat mencapainya dengan menambahkan animation-delay properti ke CSS Anda. Menghitung penundaan itu sederhana; Anda menjumlahkan waktu semua animasi sebelum animasi yang Anda hitung penundaan animasinya.

Sebagai contoh:

animation: movePointLeft 4s linear forwards, movePointDown 3s linear forwards;

Di sini, kami memiliki dua animasi, movePointLeft dan movePointDown. Penundaan animasi untuk movePointLeft akan menjadi nol karena itu adalah animasi yang ingin kita jalankan terlebih dahulu. Namun, penundaan animasi untuk movePointDown akan menjadi empat detik karena movePointLeft akan dilakukan setelah waktu tersebut.

Oleh karena itu, animation-delay properti akan menjadi sebagai berikut:

animation-delay: 0s, 4s;

Perhatikan bahwa jika Anda memiliki dua atau lebih animasi yang dimulai pada waktu yang sama, penundaan animasinya akan sama. Selain itu, saat Anda menghitung penundaan animasi untuk animasi yang akan datang, Anda akan menganggapnya sebagai satu animasi.

Sebagai contoh:

animation: x 4s linear forwards, y 4s linear forwards, jump 2s linear forwards;

Asumsikan kita ingin memulai x dan y serentak. Dalam hal ini, penundaan animasi untuk keduanya x dan y akan menjadi nol, sedangkan penundaan animasi untuk animasi lompatan akan menjadi empat detik (bukan delapan!).

animation-delay: 0s, 0s, 4s;

Membuat Rollercoaster

Sekarang setelah kita mempelajari dasar-dasarnya, saatnya menerapkan apa yang telah kita pelajari!

Memahami Animasi

Jalur rollercoaster terdiri dari tiga bagian:

1. Bagian geser,
2. Bagian lingkaran,
3. Juga akan ada beberapa animasi untuk membuat spasi horizontal di antara kedua animasi di atas.

Menyiapkan Segalanya

Kita akan mulai dengan membuat sebuah bola sederhana yang akan menjadi “gerobak” kita untuk rollercoaster.

1. Tambahkan ini ke badan file HTML baru Anda:

<div id="the-cart" class="cart"></div>

2. Tambahkan ini ke file CSS Anda:

.cart 
  background-color: rgb(100, 210, 128);
  height: 50px;
  width: 50px;
  border: 1px solid black;
  border-radius: 50px;
  position: absolute;
  left: 10vw;
  top: 30vh;

Saya akan menggunakan lebar viewport (vw) dan tinggi viewport (vh) properti untuk membuat animasi responsif. Anda bebas menggunakan unit apa pun yang Anda inginkan.

Bagian Geser

Membuat bagian tempat bola meluncur dapat dilakukan dengan menggunakan fungsi kubik-bezier! Animasi ini terdiri dari 2 animasi, satu di sepanjang x-axis dan yang lainnya di sepanjang y-sumbu. Itu x-Animasi sumbu adalah animasi linier normal di sepanjang x-sumbu. Kami dapat mendefinisikan bingkai kuncinya sebagai berikut:

@keyframes x 
  to 
    left: 40vw;
  

Tambahkan ke properti animasi Anda di jalur bola sebagai berikut:

animation: x 4s linear forwards

Itu y-axis animation adalah dimana kita akan menggunakan fungsi cubic-bezier. Pertama-tama mari kita tentukan keyframe animasi. Kami ingin perbedaan antara titik awal dan akhir menjadi sangat kecil sehingga bola mencapai ketinggian yang hampir sama.

@keyframes y 
  to 
    top: 29.99vh;
  
}

Sekarang mari kita pikirkan tentang fungsi kubik-bezier. Kami ingin jalur kami bergerak perlahan ke kanan terlebih dahulu, lalu saat meluncur, jalurnya harus lebih cepat.

• Bergerak perlahan ke kanan berarti $P1$ akan berada di sepanjang x-sumbu. Jadi, kita tahu itu di (V, 0).
  • Kita harus memilih V yang cocok yang membuat animasi kita bergerak perlahan ke kanan tetapi tidak terlalu banyak sehingga memakan seluruh ruang. Dalam hal ini, saya menemukan itu 0.55 paling cocok.
• Untuk mencapai efek geser, kita perlu bergerak P2 ke bawah y-sumbu (nilai negatif) jadi P2=(X, -Y).
  • Y harus bernilai besar. Dalam hal ini, saya memilih Y=5000.
  • Mendapatkan X, kita tahu bahwa kecepatan animasi kita seharusnya lebih cepat saat meluncur dan lebih lambat saat naik lagi. Jadi, semakin dekat X adalah nol, Semakin curam animasi akan meluncur. Dalam hal ini, biarkan X = 0.8.

Sekarang Anda memiliki fungsi kubik-bezier Anda, itu akan menjadi cubic-bezier(0.55, 0, 0.2, -800).

Mari tambahkan keyframe ke properti animasi kita:

animation: x 4s linear forwards,
    y 4s cubic-bezier(0.55, 0, 0.2, -5000) forwards;

Ini adalah bagian pertama dari animasi kita, jadi penundaan animasi adalah nol. Kita harus menambahkan sebuah animation-delay properti karena mulai dari animasi berikut, animasi akan dimulai pada waktu yang berbeda dari animasi pertama.

animation-delay: 0s, 0s;

Menambahkan Ruang Horisontal

Sebelum membuat putaran, bola harus bergerak sepanjang x-axis sebentar, jadi ada ruang di antara kedua animasi. Jadi, ayo lakukan itu!

@keyframes x2 
  to 
    left: 50vw;
  

• Tambahkan ke properti animasi:

animation: x 4s linear forwards,
    y 4s cubic-bezier(0.55, 0, 0.2, -5000) forwards, x2 0.5s linear forwards;

Animasi ini harus dimulai setelah animasi geser, dan animasi geser membutuhkan waktu empat detik; dengan demikian, penundaan animasi akan menjadi empat detik:

animation-delay: 0s, 0s, 4s;

Bagian Lingkaran

Untuk membuat lingkaran (loop) di CSS, kita perlu memindahkan lingkaran ke tengah loop dan memulai animasi dari sana. Kami ingin jari-jari lingkaran menjadi 100pxjadi kita akan mengubah posisi lingkaran menjadi top: 20vh (30 adalah radius yang diinginkan (10vh di sini)). Namun, ini harus terjadi setelah animasi geser selesai, jadi kami akan membuat animasi lain dengan durasi nol detik dan menambahkan penundaan animasi yang sesuai.

@keyframes pointOfCircle 
  to 
    top: 20vh;
  

• Tambahkan ini ke daftar animasi dengan durasi = 0s:

animation: x 4s linear forwards,
    y 4s cubic-bezier(0.55, 0, 0.2, -5000) forwards, x2 0.5s linear forwards,
    pointOfCircle 0s linear forwards;

• Tambahkan penundaan animasi, yang akan terjadi 4.5s:

animation-delay: 0s, 0s, 4s, 4.5s;

Lingkaran itu sendiri

Untuk membuat animasi loop:

• Buat keyframe yang menggerakkan bola kembali ke posisi lama dan kemudian memutar bola:

@keyframes loop 
  from 
    transform: rotate(0deg) translateY(10vh) rotate(0deg);
  
  to 
    transform: rotate(-360deg) translateY(10vh) rotate(360deg);
  

• Tambahkan bingkai kunci lingkaran ke properti animasi:

animation: x 4s linear forwards,
    y 4s cubic-bezier(0.55, 0, 0.2, -5000) forwards, x2 0.5s linear forwards,
    pointOfCircle 0s linear forwards, loop 3s linear forwards;

• Tambahkan penundaan animasi, yang juga akan menjadi 4.5 detik di sini:

animation-delay: 0s, 0s, 4s, 4.5s, 4.5s;

Menambahkan Spasi Horizontal (Lagi)

Kami hampir selesai! Kita hanya perlu memindahkan bola setelah animasi di sepanjang x-sumbu agar bola tidak berhenti tepat setelah loop seperti pada gambar di atas.

@keyframes x3 
  to 
    left: 70vw;
  

• Tambahkan bingkai utama ke properti animasi:

animation: x 4s linear forwards,
    y 4s cubic-bezier(0.55, 0, 0.2, -800) forwards, x2 0.5s linear forwards,
    pointOfCircle 0s linear forwards, loop 3s linear forwards,
    x3 2s linear forwards;

• Menambahkan penundaan yang sesuai, ini dia 7.5s:

animation-delay: 0s, 0s, 4s, 4.5s, 4.5s, 7.5s;

Hasil Akhir

Kesimpulan

Pada artikel ini, kami membahas cara menggabungkan beberapa bingkai utama untuk membuat jalur animasi yang kompleks. Kita juga membahas bezier kubik dan cara menggunakannya untuk membuat fungsi easing Anda sendiri. Saya akan merekomendasikan untuk melanjutkan dan membuat jalur animasi Anda sendiri untuk mengotori tangan Anda dengan animasi. Jika Anda memerlukan bantuan atau ingin memberikan umpan balik, Anda dipersilakan untuk mengirim pesan ke salah satu tautan di sini. Selamat siang/malam yang indah!

(vf, itu, yk)