Membuat Transisi Dari After Effects Ke Transisi CSS Dan Keyframes

Situs web semakin terlihat seperti aplikasi seluler. Pengguna juga semakin mengharapkan pengalaman yang lebih seperti aplikasi. Dari pemberitahuan push ke mode offline, aplikasi web asli sudah tersedia.

Setelah aplikasi web berfungsi seperti aplikasi asli, interaksi desain juga akan berubah untuk mengatasi kasus penggunaan — yaitu, animasi yang ada di mana-mana. Animasi mendorong interaksi di semua aplikasi favorit kami, dari Uber hingga Lyft dan Snapchat hingga Instagram.

Sebagai pengembang web, kami membutuhkan dasar yang baik untuk membuat animasi yang berkinerja baik dan dapat dipelihara, yang sangat penting untuk lanskap aplikasi web asli. Kita harus bisa beralih dari After Effects ke transisi CSS, animasi, dan keyframe.

Apa itu After Effect?

After Effects adalah produk standar industri dari Adobe yang digunakan oleh desainer grafis dan gerak untuk membuat kunci, menyusun, dan melacak animasi. Ini adalah alat de facto yang digunakan oleh banyak desainer untuk mengomunikasikan ide kepada tim dengan mengekspor lapisan animasi ke dalam contoh video yang mudah divisualisasikan, dengan tabel referensi waktu mulai dan berakhir animasi yang menyertainya.

Bersama-sama, video demo dan tabel referensi memberi tim pengembangan dasar yang baik tentang cara mengimplementasikan animasi. Video digunakan untuk melihat gambaran keseluruhan, sedangkan tabel referensi menyediakan detail menit yang membuat atau menghancurkan interaksi animasi.

Hal Yang Dapat Kita Lakukan Dengan After Effects

Apa yang bisa kita buat dengan After Effects hanya dibatasi oleh imajinasi kita. Ini dapat memberikan efek pasca-produksi dalam jumlah tak terbatas untuk gambar atau video. Dalam lingkup web, ia menyediakan platform untuk ide-ide untuk dibagikan.

Perhatikan bola merah di atas. Bola dianimasikan menggunakan After Effects untuk berguling perlahan ke tengah, berhenti sejenak, lalu berakselerasi perlahan untuk keluar dari viewport. Animasi web klasik tentang gerakan, penskalaan, rotasi, dan bahkan perubahan warna mudah dilakukan di After Effects dan berfungsi sebagai dokumen persyaratan yang dibuat secara instan (atau video atau GIF) agar animasi dapat diimplementasikan.

Alat yang Anda Butuhkan Untuk Memulai

Dengan JavaScript, HTML5, CSS3, dan banyak bahasa lainnya menjadi standar di sebagian besar agen pengguna utama yang menerima lalu lintas dari situs web, menggunakan alat ini secara grosir menjadi semakin layak. Berikut adalah beberapa teknologi utama yang perlu diingat saat mengimplementasikan animasi.

Transisi CSS

Transisi CSS menyediakan cara untuk mengontrol seberapa cepat perubahan dalam properti CSS diterapkan ke elemen. Alih-alih menerapkan gaya secara langsung (tanpa transisi), gaya dapat diterapkan secara bertahap pada kurva akselerasi yang ditentukan menggunakan aturan penyesuaian. Contohnya adalah mengubah warna latar belakang dari hitam menjadi putih selama periode waktu tertentu.

 transition-property: background-color; transition-duration: 3s;

Dengan aturan pada elemen ini, warna latar belakang akan membutuhkan waktu tiga detik untuk berubah, secara bertahap berubah dari hitam menjadi putih, melalui nuansa abu-abu. Ini selanjutnya dapat dikustomisasi dengan menambahkan fungsi waktu transisi, untuk menghitung nilai antara, dan penundaan transisi, untuk menunda dimulainya animasi.

Transisi CSS bagus untuk interaksi sederhana , seperti mengubah warna latar belakang atau memindahkan elemen ke lokasi baru.

Menggunakan Animasi CSS

Animasi CSS memberikan kontrol yang lebih baik atas langkah-langkah perantara antara animasi, menggunakan titik arah. Titik jalan (atau bingkai utama) adalah titik yang disematkan dalam waktu, selama animasi, saat kita menerapkan gaya tertentu ke sebuah elemen. Kami kemudian menggunakan keyframe yang ditentukan untuk menata seperti apa tampilan animasi itu.

Misalkan kita ingin sebuah elemen dianimasikan sebagai pantulan. Elemen perlu bergerak ke atas, kembali ke posisi semula, bergerak sedikit ke atas, dan kemudian kembali ke posisi semula. Dengan menggunakan keyframe, kita dapat memecah efek elastis itu menjadi persentase waktu yang dibutuhkan animasi.

 @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-25px); } 60% { transform: translateY(-15px); } } .element { animation-name: bounce; animation-duration: 3s; }

Seperti halnya transisi CSS, ada banyak opsi yang dapat dikonfigurasi oleh pengembang. Kita dapat membuat animasi berulang tanpa batas waktu menggunakan animation-iteration-count , dengan nilai infinite , atau bahkan mengontrol arah aliran animasi, menggunakan properti animation-direction . Banyak properti animasi CSS memberi kita kontrol halus untuk mencocokkan animasi dengan desain.

Animasi CSS berguna untuk animasi pendek yang berulang , seperti ekspansi, rotasi, dan pantulan.

Menggunakan JavaScript

JavaScript memiliki banyak kegunaan, mulai dari server Raspberry Pi hingga kode sisi klien, tetapi salah satu kegunaan intinya tetap mengubah nama kelas pada elemen. Mengubah nama kelas adalah cara yang sepele namun efektif untuk mengelola status elemen.

Contohnya adalah penambahan sederhana dari kelas active yang memberi sinyal pada komponen yang awalnya tersembunyi untuk memulai animasi. Perhatikan bola di bawah ini. Kami menggunakan JavaScript untuk menambahkan kelas yang memicu animasi menggunakan properti transisi CSS.

Bagian pertama dari animasi ini dapat direplikasi menggunakan kombinasi sederhana dari HTML, CSS dan JavaScript.

HTML:

 <div class="ball"></div>

CSS:

 .ball { width: 100px; height: 100px; color: red; transform: scale(0.25); transition: all 1s ease-in; } .ball.active { transform: scale(1.25); }

JavaScript:

 setTimeout(function() { document.querySelector('.ball').addClass('active'); }, 500);

Ketika batas waktu (dari 500ms ) berakhir, kelas active ditambahkan ke div bola, yang mengubah properti transform , yang kemudian memicu properti transition , yang mengawasi properti transform pada elemen bola. Mengubah kelas CSS menggunakan JavaScript tidak hanya membantu kita mengelola status komponen, tetapi juga memberi kita kontrol lebih lanjut atas animasi di luar animasi dan transisi CSS.

Mengontrol animasi menggunakan JavaScript bermanfaat untuk mengelola status , untuk memicu peristiwa berdasarkan faktor dinamis seperti input pengguna atau status aplikasi.

Dari Ide Ke After Effects Ke CSS Dan JavaScript

Bayangkan kita memiliki tugas di mana kita harus menganimasikan elemen pada halaman. Mari kita buat elemen ini menjadi bola merah. Bola harus berputar di sekitar halaman, serta naik turun.

After Effects memungkinkan kita untuk membuat mockup interaksi yang akan terlihat saat animasi dipicu. Bola yang bergerak di bawah ini adalah contohnya. Perhatikan bagaimana bola merah pertama-tama naik sedikit, kemudian mulai berakselerasi di sekitar lingkaran melingkar dan melambat kembali ke posisi semula. Baru kemudian bola turun ke ukuran aslinya.

Pertimbangkan pergeseran skala di atas di mana bola tumbuh atau menyusut sebelum bergerak atau berhenti. Ini adalah fitur kecil yang dibuat oleh desainer di After Effects dan perlu dikomunikasikan dengan jelas kepada pengembang agar detail kecil tidak terlewatkan.

Itulah sebabnya beberapa persiapan perlu dilakukan sebelum beralih dari After Effects ke pengembang. Kami tidak bisa begitu saja membuat file video dari animasi yang sedang beraksi, membagikannya dengan pengembang dan menyebutnya sehari.

Salah satu cara untuk menyampaikan ide kita dengan jelas adalah dengan membuat spreadsheet yang merinci langkah-langkah yang diperlukan untuk animasi. Bergantung pada kerumitan animasi, itu bisa berupa coretan sederhana pada tiket, file teks yang berisi daftar, atau spreadsheet lengkap.

Cara lain untuk menyampaikan informasi tentang animasi adalah dengan menyematkannya dalam video itu sendiri. Anda dapat melakukan ini dengan benar di After Effects, menambahkan informasi penting seperti seberapa besar skala, jumlah langkah, dan informasi lain saat itu terjadi, untuk memberikan konteks kepada pelaksana. Ini memungkinkan kami untuk menggunakan video demo sebagai sumber kebenaran universal .

File video yang diekspor dari After Effects ini bertindak sebagai bentuk kontrak antara desainer dan pengembang. Dengan pemahaman yang sama, kita dapat menggunakan alat yang dibahas untuk mengimplementasikannya — yaitu, kelas CSS, peristiwa JavaScript, transisi CSS, animasi CSS, dan animasi JavaScript.

1. Hancurkan Animasi

Cari pola dan catat waktunya.

Hal pertama yang harus dilakukan adalah menggambar garis waktu animasi untuk setiap elemen (atau kelompok elemen). Kita perlu memahami di mana animasi berpotongan untuk menyinkronkan waktu dan siklus hidup animasi di sekitarnya. Perencanaan adalah kunci untuk animasi yang kompleks, sehingga kami dapat secara bertahap membangun solusi kami dengan cara yang dapat dipertahankan untuk kebutuhan di masa mendatang.

Dari informasi di atas, kami membaginya sebagai langkah-langkah berikut:

1. Inisialisasi komponen dan tunggu pemicu.
2. Setelah dipicu, perbesar ukurannya dan perluas drop shadow.
3. Setelah itu, bergerak dalam lingkaran dengan ease-in-out .
4. Kemudian, perkecil ukurannya dan kurangi drop shadow.

Manfaat membuat outline adalah kita memahami komponen mana yang harus hidup di luar elemen animasi — misalnya, drop shadow harus independen dari bola. Mirip dengan menguraikan esai, memecah animasi mengatur pemikiran kita tentang pekerjaan yang harus kita lakukan. Garis besar menunjukkan proses berpikir di balik animasi dan berfungsi ganda sebagai dokumentasi untuk pekerjaan kami.

2. Negosiasi Dengan Pemangku Kepentingan

Bisakah kita menyederhanakan beberapa area? Bagian mana dari animasi yang wajib? Bisakah kita menyinkronkan waktu?

Setelah kami menyelidiki pekerjaan yang diperlukan untuk menyelesaikan tugas, kami menawar. Tawar-menawar dengan desainer dan pemilik produk adalah tanggung jawab setiap pengembang. Pelaksana memiliki pemahaman yang lengkap tentang buah gantung rendah kunci, apa yang bisa dilakukan dan apa yang tidak praktis untuk dilakukan.

Animasi itu rumit karena menghapus detail yang tampaknya kecil dari animasi dapat mengubah pengalaman pengguna. Untuk memberikan contoh berbasis pengembangan, mengubah perilaku animasi sama dengan mengubah payload respons yang mungkin kita terima dari panggilan API: Hal-hal tertentu dapat diubah, tetapi beberapa bagian harus ada di sana.

Ini adalah situasi kasus per kasus, berdasarkan hubungan kami dengan desainer, serta dengan pemilik produk yang diberikan garis waktu untuk peluncuran. Meminta animasi tertentu untuk dihapus tidak disarankan karena ini berada di luar bidang keahlian kami.

Pendekatan yang baik untuk tawar-menawar adalah dengan menyinkronkan pengaturan waktu atau menyederhanakan animasi yang mungkin tidak dapat dilakukan browser secara asli , dan menghindari animasi yang menggunakan JavaScript karena akan sulit dipertahankan dan dapat menghasilkan kinerja yang tersendat-sendat. Kita dapat dan harus meminta konsesi ini sebagai gantinya.

3. Rencanakan Serangan

Ketahui seperti apa keadaan awal dan akhir setiap elemen. Lihatlah di mana setiap waktu transisi seharusnya terjadi. Manfaatkan BEM di kelas CSS untuk menerapkan animasi dengan jelas. Pahami alasan mengapa JavaScript harus dibatasi demi CSS.

Mari kita periksa animasi yang dijelaskan sebelumnya. Lima negara bagian menyerang kita:

1. keadaan awal, dengan bola merah dan beberapa bayangan jatuh;
2. versi bola yang ditingkatkan dengan drop shadow yang lebih panjang;
3. pergerakan bola di sekitar lingkaran;
4. mengecilkan bola, bersama dengan bayangan jatuhnya;
5. kembali ke keadaan awal, menunggu untuk dipicu.

Untuk kelima negara bagian, kita harus melihat gaya sebelum dan sesudahnya. Ini akan memberi kami informasi tentang jenis alat animasi apa yang kami perlukan untuk mengimplementasikannya.

Untuk melakukan ini, kita mulai dengan gaya kasus dasar. Ini bisa menjadi apa-apa, jika elemen muncul entah dari mana, atau bisa jadi gaya sebelumnya, dalam kasus animasi berantai.

Tetap sederhana dengan memiliki sedikit perubahan gaya antar negara bagian. Setelah kita mengidentifikasi status awal dan akhir, kita perlu melabelinya sebagai kelas CSS, sehingga dapat diterapkan ke elemen dengan mudah. Ini memberi kita fleksibilitas untuk menggunakan JavaScript untuk menangani aplikasi kelas berdasarkan data yang diterima dari panggilan AJAX yang mungkin bergantung pada elemen tersebut.

BEM CSS sangat ideal untuk strategi penamaan kami karena cara kami merepresentasikan status animasi yang sedang berlangsung dengan pengubah. Jika animasinya cukup umum, BEM juga merupakan metodologi yang baik untuk mempertahankan kelas CSS KERING (“jangan ulangi diri Anda sendiri”) yang bekerja di seluruh basis kode. Kami akan memulai hanya dengan penanda blok dan elemen dan kemudian melapisi pengubah saat kami maju melalui animasi.

Berikut adalah contoh perjalanan kelas template:

 // State 1 <div class="ball"></div> // State 2 <div class="ball ball--scale-up"></div> // State 3 <div class="ball ball--scale-up ball--circling"></div> // State 4 <div class="ball ball--scale-up ball--circling ball--scale-down"></div> // State 5 <div class="ball"></div>

Kita mulai dengan elemen container dengan class ball, yang akan mewakili bola merah yang sedang kita animasikan. Saat animasi beralih di seluruh pengalaman, demikian juga nama kelas BEM kami , dari scaling up hingga bergerak dalam lingkaran. Ini adalah metode untuk melacak seperti apa elemen yang seharusnya terlihat saat gaya diterapkan.

4. Implementasi yang Stabil

Dengan garis besar di tangan dan alat yang siap digunakan, kita harus memangkas status proyek demi negara.

Kami dapat menangani setiap status secara berulang sebagai item terpisah, membangun status sebelumnya sesuai kebutuhan. Dengan setiap status yang didefinisikan dengan jelas, kita dapat lebih fokus pada membuat kode kita KERING dan mudah dibaca, daripada detail implementasi. Dan, tentu saja, akan menyenangkan untuk menambahkan tes untuk menutupi logika kita.

Keadaan Awal

Kita mulai dengan bola merah sederhana, dengan sedikit bayangan jatuh.

 .ball { background-color: #D24D57; width: 25px; height: 25px; margin: 5px; display: inline-block; border-radius: 50%; box-shadow: 0 8px 6px -6px #6C7A89; }

Peningkatan

Ada dua bagian untuk ditingkatkan: ukuran elemen dan bayangan jatuhnya. Kami menggunakan bingkai utama, bernama scale , yang digunakan bersama oleh penskalaan ke atas dan ke bawah untuk KERING untuk menangani animasi ini.

 @keyframes ball-scale { from { transform: scale(1); box-shadow: 0 8px 6px -6px #6C7A89; } to { transform: scale(1.25); box-shadow: 0 10px 6px -6px #6C7A89; } } .ball--scale-up { animation: ball-scale 1s ease-out forwards; }

Circling (Setelah Animasi Scaling-Up Diterapkan)

Kami menggunakan keyframe, bernama circular , serta memindahkan properti transform-origin nya untuk memindahkan elemen di sekitar lingkaran, mulai dari awal. Perlu diingat bahwa melingkari hanya terjadi ketika animasi scaling-up telah selesai.

 @keyframes ball-circular { from { box-shadow: 0 10px 6px -6px #6C7A89; transform-origin: 50% -450%; transform: scale(1.25) rotate(0deg) translateY(-100%) rotate(0deg); } to { box-shadow: 0 10px 6px -6px #6C7A89; transform-origin: 50% -450%; transform: scale(1.25) rotate(360deg) translateY(-100%) rotate(-360deg); } } .ball--circling { animation: ball-circular 2s ease-in-out forwards; }

Scaling Down (Setelah Animasi Circling dan Scaling-Up Diterapkan)

Untuk memperkecil, kami menggunakan kembali skala keyframe, dengan animation-direction: reverse untuk melakukan kebalikan dari apa yang dilakukan kelas scale-up. Ini membawa kita kembali ke keadaan awal kita.

 .ball--scale-down { animation: ball-scale 1s ease-in forwards; animation-direction: reverse; }

Demo Bekerja

Jika kita menggabungkan semua kelas ini menjadi sebuah urutan, kita akan memiliki representasi CSS dari rendering yang dilakukan di After Effects.

Klik pada bola untuk memulai.

Lihat Bola Animasi Pena oleh Chris Ng (@chrisrng) di CodePen.

Kesimpulan

Alat yang tercakup dalam artikel ini hampir tidak mutakhir, tetapi umumnya didukung di sebagian besar browser utama, yang membuatnya dapat digunakan saat ini.

Sebelumnya, mengimplementasikan animasi itu sulit karena itu berarti menggunakan alat eksternal seperti jQuery Animate untuk melakukan hal-hal sederhana seperti memindahkan elemen di sekitar halaman. Saat ini, transisi dan animasi CSS dapat dilakukan secara native dan efisien, dengan memanfaatkan GPU.

Animasi selalu menjadi tarik ulur antara pengembang, desainer dan pemilik produk. Caranya adalah dengan mencari jalan tengah, di mana semua pemangku kepentingan senang dengan kualitas produk. Mudah-mudahan, panduan ini akan membantu Anda melakukan transisi itu.