Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Chrome DevTools
Webdesign

Cara Menggunakan Animation Inspector in Chrome Developer Tools

by
Length:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Febri Ardian Sanjoyo (you can also view the original English article)

Lain kali Anda mengumpulkan beberapa animasi berbasis CSS3, Anda mungkin merasa berguna untuk melompat ke dalam Alat Pengembang Chrome dan memanfaatkan fitur inspection animation dan fitur tweaking. Dalam kiat cepat ini kita akan memberi Anda ringkasan tentang alat pengembang animasi yang tersedia di Chrome, cara mengaksesnya, dan apa yang dapat di lakukan untuk Anda.

Saat Anda melanjutkan, jika Anda ingin beberapa animasi CSS3 untuk menguji setiap alat pada Anda dapat menggunakan pena ini dari kursus kami 10 CSS3 Project: UI and Layout:

Berikut ini adalah versi full page.

Membuka Animation Tab

Pada halaman dengan animasi CSS3 berjalan, pertama buka Alat Pengembang Chrome dengan membuka View > Developer > Developer tools.  Atau Anda dapat menggunakan shortcut keyboard, baik F12 atau CTRL + SHIFT + I.

Setelah dev tool terbuka, buka menu yang dilambangkan dengan tiga titik vertikal di sudut kanan atas, lalu pilih more tool> Animation seperti yang ditunjukkan di bawah ini:

Animations menu item in Chrome Dev Tools

Saat pertama kali Anda membuka animation tab, Anda tidak akan melihat konten yang terkait dengan animasi Anda, Anda hanya akan melihat pesan yang mengatakan Listening for animations... Alasannya adalah, agar berfungsi, tab harus sudah buka saat halaman pertama kali dimuat.

Listening for animations message

Agar panel dapat menangkap informasi pada animasi Anda, segarkan laman dan Anda akan melihat ini:

Animations tab ready for action

Ikon grafik berwarna kecil di kiri atas mewakili animasi halaman Anda. Klik pada ikon itu untuk membuka alat inspeksi animasi:

animation inspection tools the playhead

Playhead dan Keyframes

Saat animasi diputar, Anda akan melihat playhead merah bergerak melintasi timeline. Playhead ini dapat diraih dengan mouse dan di scrub secara manual, atau ditempatkan pada titik tertentu.

Setiap baris pada antarmuka mewakili animasi individu di halaman. Anda akan melihat setiap baris memiliki bagian dengan warna yang lebih gelap dan lebih saturate. Ini menunjukkan panjang animasi, dan segmen yang lebih terang yang datang kemudian mewakili animasi yang berulang.

Anda juga akan melihat beberapa lingkaran kecil di sepanjang setiap baris animasi. Ini sesuai dengan bingkai utama animasi. Lingkaran berwarna gelap melambangkan awal dan akhir animasi, dan lingkaran berlubang mewakili bingkai utama interstitial di mana pun di antara keduanya.

Interstitial Keyframes

Interstitial keyframe (bingkai utama antara awal dan akhir setiap siklus animasi) pada setiap baris dapat diseret ke posisi yang berbeda dan saat Anda memindahkannya, Anda akan melihat animasi di jendela browser mengubah waktunya. Ini bisa sangat bagus untuk bereksperimen dengan tepat berapa persen poin interstitial keyframe harus jatuh.

Namun, bagian yang rumit adalah Anda tidak akan melihat update apa pun ke code di tab Styles saat Anda melakukan eksperimen ini. Sebaliknya, ketika Anda mendapatkan interstitial keyframe ditempatkan pada titik yang tepat, Anda dapat secara manual mencari tahu berapa nilai persentase keyframe yang harus disetel untuk digunakan.

Tempatkan playhead secara langsung di atas keyframe yang dipermasalahkan dan Anda akan melihat stempel waktu di bagian kiri atas panel yang memberi tahu Anda seberapa lama animasi dalam beberapa detik. Anda kemudian dapat mengetahui berapa persen waktu ini dari keseluruhan durasi animasi. Dalam contoh di bawah ini, playhead adalah sekitar 1 detik dari animasi 2s, jadi kita tahu bahwa bingkai utama ini adalah 50%.

working out interstitial keyframe positions

Delay dan Duration Animasi

Ada perubahan lain yang dapat Anda buat di tab Animation yang akan memperbarui code Anda di tab Styles sehingga Anda dapat melihat dengan tepat nilai apa yang harus dipindahkan ke CSS Anda. Yang pertama adalah delay sebelum animasi mulai diputar, dan yang kedua adalah durasinya.

Untuk menyesuaikan delay sebelum animasi diputar, arahkan kursor ke atas garisnya sampai Anda melihat kursor berbentuk tangan, lalu seret secara horizontal. Anda akan melihat pembaruan nilai delay di tab Styles:

adjust the delay before an animation plays

Untuk mengubah durasi animasi, arahkan kursor ke bingkai utama terakhir hingga Anda melihat kursor panah ganda berakhir, lalu seret secara horizontal. Sekali lagi, nilai akan terlihat mengupdate di tab Styles.

modify the animations duration

Timing Function Animasi

Anda juga dapat menggunakan dev tools Chrome untuk mengubah kurva speed yang mengontrol waktu animasi. Mulailah dengan memeriksa elemen yang memiliki animasi yang diterapkan padanya. Di sebelah kiri fungsi timing yang saat ini ditentukan, Anda akan melihat kotak kecil dengan “coretan” di dalamnya. Klik untuk membuka editor cubic bezier:

cubic bezier editor button

Sebuah kotak akan terbuka menunjukkan Anda bezier curve yang menggambarkan fungsi timing saat ini. Dari sini Anda dapat memilih preset yang sudah ada dengan mengklik salah satu thumbnail di sebelah kiri, atau Anda dapat menyeret handle gambar kurva utama di sekitar untuk menciptakan nilai cubic-bezier khusus yang kemudian dapat Anda salin ke CSS Anda:

bezier curve that illustrates the current timing function

Saat Anda pergi, Anda akan melihat bola ungu kecil menganimasi dari kiri ke kanan di bagian atas editor, memberi Anda pratinjau fungsi timing Anda dalam tindakan.

Pelajari lebih lanjut tentang kurva bezier dan fungsi timing dalam coffee break course ini:

Visualisasi Layer Dapat Diputar

Fitur lain yang sangat membantu adalah kemampuan untuk memvisualisasikan layer yang digunakan dalam animasi Anda, termasuk opsi untuk memutar visualisasi tersebut dan melihatnya dari berbagai sudut untuk lebih memahami cara kerja semuanya.

Untuk membuka panel Layers, buka menu Chrome Dev Tools dan pilih More tools > Layers.

Rotatable Layers Visualization

Setelah tab Layers terbuka, pilih tool Rotate mode di kiri atas:

Layers tab

Anda sekarang dapat menggunakan tool ini untuk memutar visualisasi layer ke setiap sudut yang Anda butuhkan untuk melihat bagaimana bagian-bagian dari animasi Anda bekerja:

rotate the layers visualization onto any angle you need

Ringkasan

Mari kita miliki ringkasan singkat alat pengembang animasi Chrome:

  • Buka alat animasi dengan membuka Chrome Dev Tool terlebih dahulu, lalu di bawah menu dev tools pilih More tools > Animations.
  • Panel Animations harus sudah terbuka ketika halaman dimuat untuk menangkap info pada animasi - perbarui halaman untuk mencapai ini.
  • Klik thumbnail grafik berwarna kecil untuk melihat informasi animasi.
  • Setiap baris mewakili animasi.
  • Lingkaran yang diisi mewakili awal dan akhir keyframes.
  • Lingkaran berongga menunjukkan interstitial keyframes.
  • Interstisial keyframes dapat dipindahkan, tetapi Anda tidak akan melihat update kode terkait di tab Styles - sebagai gantinya, secara manual hitung titik persentase sasarannya.
  • Ubah nilai delay animasi dengan taruh kursosr di atas garisnya sampai Anda melihat kursor tangan, lalu seret secara horizontal.
  • Ubah nilai durasi animasi dengan mengarahkan kursor ke keyframes terakhir hingga Anda melihat kursor panah ganda berakhir, lalu seret secara horizontal.
  • Di tab Styles, klik ikon di sebelah kiri fungsi timing yang ada untuk membuka editor cubic bezier.
  • Pilih dari pengaturan fungsi timing di sini, atau buat sendiri dengan memodifikasi gambar main curve.
  • Buka panel Layers dengan membuka menu Alat Pengembang Chrome dan memilih More tools > Layers.
  • Di panel ini, gunakan Rotate mode untuk melihat layer animasi Anda dari sudut mana saja.

Terkadang membuat animasi terlihat tepat bisa menjadi proses yang sangat tepat dan rewel. Alat-alat ini dapat memberikan wawasan yang sangat dibutuhkan ke dalam animasi Anda, serta umpan balik real time, untuk membantu Anda mendapatkan semuanya sempurna.

Pelajari Lebih Lanjut Tentang Dev Tools Browser:

Lebih lanjut tentang Animasi CSS3:


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.