Lain kali Anda membuat animasi biasa berbasis CSS3, mungkin berguna bagi Anda untuk masuk ke alat pengembang Chrome dan memanfaatkan fitur verifikasi dan penyesuaian animasi. Dalam artikel singkat ini, kami akan memberi tahu Anda alat animasi mana yang tersedia di Chrome, cara mengaksesnya, dan bagaimana mereka dapat membantu Anda.
Jika Anda ingin menguji animasi CSS3 Anda menggunakan alat-alat ini, Anda dapat menggunakan kode yang sudah jadi dari kursus kami:
10 Proyek CSS3: Antarmuka dan Tata Letak .
Ini adalah versi lengkap dari halaman ini.Membuka tab Animasi
Pada halaman dengan animasi berjalan CSS3, pertama buka "Alat Pengembang Chrome" dengan pergi ke
Lihat> Pengembang> Alat pengembang. Atau, Anda dapat menggunakan pintasan keyboard:
F12 atau
CTRL + SHIFT + I.Ketika alat pengembang terbuka, buka menu yang ditunjukkan oleh tiga titik vertikal di sudut kanan atas, lalu pilih
Alat lainnya> Animasi, seperti yang ditunjukkan di bawah ini:
Ketika Anda pertama kali membuka tab animasi, Anda tidak akan melihat konten apa pun yang terkait dengan animasi Anda, Anda hanya melihat pesan
Mendengarkan animasi ... Alasannya adalah bahwa alat telah mendapatkan tab harus sudah terbuka ketika halaman dimuat untuk pertama kalinya.
Agar panel membaca informasi tentang animasi Anda, segarkan halaman dan Anda akan melihat yang berikut:
Ikon berwarna kecil di kiri atas adalah animasi dari elemen halaman Anda. Klik ikon ini untuk membuka alat verifikasi animasi:
Putar ulang kursor dan bingkai kunci
Saat animasi diputar, Anda akan melihat kursor pemutaran merah bergerak di sepanjang garis waktu. Kursor ini dapat dipindahkan ke lokasi yang diinginkan menggunakan mouse.
Setiap baris antarmuka mewakili elemen animasi terpisah pada halaman. Anda mungkin memperhatikan bahwa setiap baris memiliki bagian dengan warna jenuh yang lebih gelap. Ini menunjukkan panjang animasi, dan segmen yang lebih ringan yang mengikutinya mewakili pengulangan animasi.
Anda juga akan melihat beberapa lingkaran kecil di sepanjang setiap garis animasi. Mereka sesuai dengan kerangka kunci dari animasi. Lingkaran hitam mewakili awal dan akhir animasi, dan lingkaran kosong mewakili kerangka kunci menengah di antaranya.
Bingkai kunci menengah
Bingkai kunci menengah (bingkai kunci antara awal dan akhir setiap siklus animasi) pada setiap baris dapat diseret ke posisi yang berbeda, dan saat Anda memindahkannya, Anda akan melihat bagaimana waktu animasi berubah di jendela browser. Ini adalah alat yang baik untuk bereksperimen dengan berapa persentase yang seharusnya untuk setiap frame kunci menengah.
Namun, kesulitannya terletak pada kenyataan bahwa Anda tidak akan melihat pembaruan kode pada tab Gaya selama percobaan ini. Sebagai gantinya, ketika Anda menempatkan frame kunci tengah Anda pada titik yang benar, Anda dapat secara manual menentukan berapa nilai persentase yang akan digunakan untuk frame kunci.
Posisikan kursor pemutaran tepat di atas bingkai kunci yang dimaksud, dan Anda akan melihat cap waktu di sudut kiri atas panel yang memberi tahu Anda seberapa jauh Anda berada dalam animasi dalam hitungan detik. Kemudian Anda bisa mengetahui berapa persen waktu ini adalah total durasi animasi. Pada contoh di bawah ini, kursor pemutaran sekitar 1 detik dari animasi 2 detik, jadi kami tahu bahwa bingkai kunci ini adalah 50%.
Animasi Keterlambatan dan Durasi
Anda dapat membuat perubahan lain di tab
Animasi yang akan memperbarui kode Anda di tab
Gaya sehingga Anda dapat melihat dengan tepat nilai apa yang dibuat di CSS Anda. Yang pertama adalah penundaan sebelum animasi mulai diputar, dan yang kedua adalah durasinya.
Untuk menerapkan penundaan sebelum memulai animasi, arahkan kursornya hingga Anda melihat kursor berbentuk tangan, lalu seret secara horizontal. Anda akan melihat pembaruan nilai penundaan pada tab
Gaya :
Untuk mengubah durasi animasi, arahkan kursor ke bingkai kunci terakhir hingga Anda melihat kursor dua arah, lalu seret secara horizontal. Sekali lagi, nilai pembaruan akan terlihat pada tab
Gaya .
Fungsi Pengaturan Waktu Animasi
Anda juga dapat menggunakan alat pengembang Chrome untuk mengubah kurva kecepatan yang mengontrol waktu animasi. Mulailah dengan memeriksa item yang menerapkan animasi. Di sebelah kiri fungsi pengaturan waktu yang ditentukan saat ini, Anda akan melihat ikon kecil dengan "tilde". Klik untuk membuka editor kurva bezier:
Sebuah jendela terbuka menunjukkan kurva Bezier, yang menampilkan fungsi pengaturan waktu saat ini. Di sini Anda dapat memilih preset yang ada dengan mengklik salah satu thumbnail di sebelah kiri, atau Anda dapat menyeret penanda gambar kurva utama untuk membuat nilai kurva bezier kustom, yang kemudian dapat Anda salin ke CSS Anda:
Saat Anda berubah, Anda akan melihat bola ungu kecil bergerak dari kiri ke kanan di bagian atas editor, menampilkan perubahan saat ini dalam fungsi pengaturan waktu Anda.
Rendering Rotating Layers
Fitur lain yang bermanfaat adalah kemampuan untuk memvisualisasikan lapisan yang digunakan dalam animasi Anda, termasuk kemampuan untuk memutar visualisasi yang ditentukan dan melihatnya dari sudut pandang yang berbeda untuk lebih memahami bagaimana semuanya bekerja.
Untuk membuka panel
Layers, buka menu Alat Dev Chrome dan pilih
More tools> Layers.
Ketika tab
Layers terbuka, pilih alat
mode Rotate di sudut kiri atas:
Sekarang Anda dapat menggunakan alat ini untuk memutar visualisasi layer ke sudut mana pun yang Anda butuhkan untuk melihat dengan lebih baik bagaimana bagian dari animasi Anda bekerja:
Penyelesaian
Mari kita lihat sekilas alat animasi Chrome:
- Buka alat animasi dengan terlebih dahulu membuka Chrome Dev Tools, lalu dari menu dev tools pilih More tools> Animations.
- Panel Animasi harus terbuka ketika halaman memuat untuk menampilkan informasi animasi - menyegarkan halaman untuk mencapai ini.
- Klik gambar kecil grafik warna kecil untuk melihat informasi animasi.
- Setiap baris mewakili animasi.
- Lingkaran yang diisi mewakili bingkai kunci awal dan akhir.
- Lingkaran berongga mewakili bingkai kunci menengah.
- Bingkai kunci menengah dapat dipindahkan, tetapi Anda tidak akan melihat pembaruan kode yang sesuai pada tab Gaya , sebagai gantinya menghitung titik persentase secara otomatis.
- Ubah nilai penundaan animasi dengan mengarahkannya melewati garis sampai Anda melihat kursor tangan Anda, dan kemudian seret secara horizontal.
- Ubah durasi animasi dengan menggerakkan kursor di atas bingkai kunci terakhir hingga Anda melihat kursor kursor dengan garis besar ganda, lalu seret secara horizontal.
- Pada tab Gaya , klik ikon di sebelah kiri fungsi pengaturan waktu yang ada untuk membuka editor kurva bezier.
- Pilih dari preset fungsi waktu pengaturan atau buat sendiri dengan mengubah gambar kurva utama.
- Buka panel Layers dengan masuk ke menu Tools Developer Chrome dan pilih More tools> Layers.
- Di panel ini, gunakan mode Putar untuk melihat lapisan animasi Anda dari sudut manapun.
Terkadang membuat animasi yang sempurna bisa menjadi proses yang sangat akurat dan halus. Alat-alat ini dapat memberikan informasi yang sangat dibutuhkan tentang animasi Anda, serta umpan balik waktu nyata untuk membantu Anda mencapai keunggulan.