Peningkatan Web Animations API di Chromium 84

Mengatur animasi dengan promise, peningkatan performa dengan animasi yang dapat diganti, animasi yang lebih lancar dengan mode gabungan, dan lainnya.

Kevin Ellis

Una Kravets

Dipublikasikan: 27 Mei 2020

Jika digunakan dengan benar, animasi akan meningkatkan persepsi dan ingatan pengguna tentang brand Anda, memandu tindakan pengguna, dan membantu pengguna menjelajahi aplikasi Anda—dengan memberikan konteks di ruang digital.

Web Animations API adalah alat yang memungkinkan developer menulis animasi imperatif dengan JavaScript. API ini ditulis untuk mendukung implementasi animasi dan transisi CSS serta memungkinkan pengembangan efek di masa mendatang, serta efek yang ada untuk disusun dan diberi waktu.

Meskipun Firefox dan Safari telah menerapkan serangkaian fitur spesifikasi lengkap, Chromium 84 menghadirkan banyak fitur yang sebelumnya tidak didukung ke Chrome dan Edge yang memungkinkan interoperabilitas lintas browser.

Memulai

Membuat animasi menggunakan Web Animations API akan terasa familier jika Anda menggunakan aturan @keyframe. Pertama, Anda harus membuat Objek Frame Kunci. Tampilannya mungkin seperti ini di CSS:

@keyframes openAnimation {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

akan terlihat seperti ini di JavaScript:

const openAnimation = [
  { transform: 'scale(0)' },
  { transform: 'scale(1)' },
];

Tempat Anda menetapkan parameter untuk animasi di CSS:

.modal {
  animation: openAnimation 1s 1 ease-in;
}

yang akan Anda tetapkan di JS:

document.querySelector('.modal').animate(
    openAnimation, {
      duration: 1000, // 1s
      iterations: 1, // single iteration
      easing: 'ease-in' // easing function
    }
);

Jumlah kodenya hampir sama, tetapi dengan JavaScript, Anda mendapatkan beberapa kemampuan super yang tidak Anda miliki dengan CSS saja. Hal ini mencakup kemampuan untuk mengurutkan efek, dan peningkatan kontrol atas status pemutarannya.

Di luar element.animate()

Namun, dengan update ini, Web Animations API tidak lagi dibatasi untuk animasi yang dibuat menggunakan element.animate(). Kita juga dapat memanipulasi animasi dan transisi CSS.

getAnimations() adalah metode yang menampilkan semua animasi pada elemen, terlepas dari apakah animasi tersebut dibuat menggunakan element.animate() atau menggunakan aturan CSS (animasi atau transisi CSS). Berikut adalah contoh tampilannya:

Anda harus terlebih dahulu melakukan "get" keyframe untuk transisi tersebut agar dapat menentukan asal transisi. Kemudian, Anda membuat dua animasi opasitas baru, yang memungkinkan efek {i>cross fade<i}. Setelah transisi silang selesai, Anda dapat menghapus salinan.

Cara mengatur animasi dengan promise

Di Chromium 84, Anda kini memiliki dua metode yang dapat digunakan dengan promise: animation.ready dan animation.finished.

• animation.ready memungkinkan Anda menunggu perubahan yang tertunda diterapkan (yaitu, beralih di antara metode kontrol pemutaran seperti putar dan jeda).
• animation.finished menyediakan cara untuk mengeksekusi kode JavaScript kustom saat animasi selesai.

Melanjutkan contoh kita, dan membuat rantai animasi yang diatur dengan animation.finished. Di sini, Anda memiliki transformasi vertikal (scaleY), diikuti dengan transformasi horizontal (scaleX), yang diikuti dengan perubahan opasitas pada elemen turunan:

const transformAnimation = modal.animate(openModal, openModalSettings);
transformAnimation.finished.then(() => { text.animate(fadeIn, fadeInSettings)});

Kita telah merangkai animasi ini menggunakan animation.finished.then() sebelum menjalankan animasi berikutnya yang ditetapkan dalam rantai tersebut. Dengan cara ini, animasi akan muncul secara berurutan, dan Anda bahkan menerapkan efek ke elemen target yang berbeda dengan opsi yang ditetapkan berbeda (seperti kecepatan dan kemudahan).

Dalam CSS, hal ini akan merepotkan untuk dibuat ulang, terutama saat menerapkan animasi yang unik, tetapi berurutan ke beberapa elemen. Anda harus menggunakan @keyframe, memilah persentase pengaturan waktu yang tepat untuk menempatkan animasi, dan menggunakan animation-delay sebelum memicu animasi dalam urutan.

Contoh: Memutar, menjeda, dan memutar balik

Yang dapat dibuka, harus ditutup. Untungnya, sejak Chromium 39, Web Animations API telah memberi kita kemampuan untuk memutar, menjeda, dan membalikkan animasi.

Anda dapat mengambil animasi yang sebelumnya ditampilkan, serta memberikan animasi yang halus dan terbalik saat mengklik tombol lagi menggunakan .reverse(). Dengan cara ini, Anda dapat membuat interaksi yang lebih lancar dan lebih kontekstual untuk modal kami.

Yang dapat Anda lakukan adalah membuat dua animasi yang menunggu pemutaran (openModal, dan transformasi opasitas inline), lalu menjeda salah satu animasi, menundanya hingga animasi lainnya selesai. Kemudian, Anda dapat menggunakan promise untuk menunggu setiap promise selesai sebelum diputar. Terakhir, Anda dapat memeriksa apakah tanda telah ditetapkan, lalu membalikkan setiap animasi.

Contoh: Interaksi dinamis dengan keyframe parsial

selector.animate([{transform: `translate(${x}px, ${y}px)`}],
    {duration: 1000, fill: 'forwards'});

Dalam contoh ini, hanya ada satu keyframe, dan tidak ada posisi awal yang ditentukan. Ini adalah contoh penggunaan keyframe parsial. Pengendali mouse melakukan beberapa hal di sini: menyetel lokasi akhir baru dan memicu animasi baru. Posisi awal baru disimpulkan dari posisi pokok saat ini.

Transisi baru dapat dipicu saat transisi yang ada masih berjalan. Artinya, transisi saat ini terganggu, dan transisi baru dibuat.

Peningkatan performa dengan animasi yang dapat diganti

Saat membuat animasi berdasarkan peristiwa, seperti di 'mousemove', animasi baru akan dibuat setiap kali, yang dapat dengan cepat menghabiskan memori dan menurunkan performa. Untuk mengatasi masalah ini, animasi yang dapat diganti diperkenalkan di Chromium 83, yang memungkinkan pembersihan otomatis, dengan animasi yang sudah selesai ditandai sebagai dapat diganti dan otomatis dihapus jika diganti dengan animasi lain yang sudah selesai. Perhatikan contoh berikut:

elem.addEventListener('mousemove', evt => {
  rectangle.animate(
    { transform: translate(${evt.clientX}px, ${evt.clientY}px) },
    { duration: 500, fill: 'forwards' }
  );
});

Setiap kali mouse bergerak, browser akan menghitung ulang posisi untuk setiap bola di jejak komet dan membuat animasi ke titik baru ini. Browser kini mengetahui cara menghapus animasi lama (mengaktifkan penggantian) saat:

1. Animasi selesai.
2. Ada satu atau beberapa animasi yang lebih tinggi dalam pengurutan komposit yang juga selesai.
3. Animasi baru menganimasikan properti yang sama.

Anda dapat melihat secara tepat berapa banyak animasi yang diganti dengan menghitung penghitung dengan setiap animasi yang dihapus, menggunakan anim.onremove untuk memicu penghitung.

Ada beberapa metode tambahan untuk meningkatkan kontrol animasi Anda:

• animation.replaceState() menyediakan cara untuk melacak apakah animasi aktif, dipertahankan, atau dihapus.
• animation.commitStyles() memperbarui gaya elemen berdasarkan gaya yang mendasarinya bersama dengan semua animasi pada elemen tersebut dalam urutan gabungan.
• animation.persist() menandai animasi sebagai tidak dapat diganti.

Animasi yang lebih halus dengan mode gabungan

Dengan Web Animations API, kini Anda dapat menyetel mode gabungan animasi Anda, artinya animasi dapat bersifat aditif atau akumulatif, selain mode default "ganti". Mode gabungan memungkinkan developer menulis animasi yang berbeda dan memiliki kontrol atas cara penggabungan efek. Tiga mode komposit kini didukung: 'replace' (mode default), 'add', dan 'accumulate'.

Saat Anda mengomposisi animasi, developer dapat menulis efek singkat dan berbeda serta melihatnya digabungkan. Pada contoh berikut, kita menerapkan rotasi dan skala keyframe ke setiap kotak, dengan satu-satunya penyesuaian adalah mode gabungan, yang ditambahkan sebagai opsi:

Dalam mode gabungan 'replace' default, animasi akhir akan menggantikan properti transformasi dan berakhir di rotate(360deg) scale(1.4). Untuk 'add', komposit menambahkan rotasi dan mengalikan skala, sehingga menghasilkan status akhir rotate(720deg) scale(1.96). 'accumulate' menggabungkan transformasi, sehingga menghasilkan rotate(720deg) scale(1.8). Untuk mengetahui seluk-beluk mode gabungan ini lebih lanjut, lihat Enumerasi CompositeOperation dan CompositeOperationOrAuto dari spesifikasi Animasi Web.

Lihat contoh elemen UI berikut:

Di sini, dua animasi top digabungkan. Yang pertama adalah animasi makro, yang menggerakkan drop-down setinggi penuh menu itu sendiri sebagai efek slide-in dari bagian atas halaman, dan yang kedua, animasi mikro, menerapkan pantulan kecil saat menyentuh bagian bawah. Menggunakan mode gabungan 'add' memungkinkan transisi yang lebih lancar.

const dropDown = menu.animate(
    [
      { top: `${-menuHeight}px`, easing: 'ease-in' },
      { top: 0 }
    ], { duration: 300, fill: 'forwards' });

  dropDown.finished.then(() => {
    const bounce = menu.animate(
      [
        { top: '0px', easing: 'ease-in' },
        { top: '10px', easing: 'ease-out' },
        { ... }
      ], { duration: 300, composite: 'add' });
  });

Langkah selanjutnya untuk Web Animations API

Semua ini adalah tambahan yang menarik untuk kemampuan animasi di browser saat ini, dan masih banyak lagi tambahan yang akan hadir. Lihat spesifikasi mendatang ini untuk membaca lebih lanjut tentang hal yang akan datang:

• Animasi yang ditautkan scroll dengan Houdini API
• Linimasa yang dapat diubah
• Efek dan Sinkronisasi Grup