D3.js - Animasi

D3.js mendukung animasi melalui transisi. Kita bisa melakukan animasi dengan penggunaan transisi yang tepat. Transisi adalah bentuk terbatasKey Frame Animationdengan hanya dua bingkai kunci - mulai dan akhir. Bingkai kunci awal biasanya adalah keadaan DOM saat ini, dan bingkai kunci akhir adalah sekumpulan atribut, gaya, dan properti lain yang Anda tentukan. Transisi sangat sesuai untuk transisi ke tampilan baru tanpa kode rumit yang bergantung pada tampilan awal.

Example - Mari kita perhatikan kode berikut di halaman "transisi_color.html".

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>Simple transitions</h3>
      <script>
         d3.select("body").style("background-color", "lightblue") 
         // make the background-color lightblue.transition()
         .style("background-color", "gray");
         // make the background-color gray
      </script>
   </body>
</html>

Di sini, warna Background dokumen berubah dari putih menjadi abu-abu muda dan kemudian menjadi abu-abu.

Metode durasi ()

Metode durasi () memungkinkan perubahan properti terjadi dengan lancar selama durasi yang ditentukan, bukan secara instan. Mari kita lakukan transisi yang membutuhkan waktu 5 detik menggunakan kode berikut.

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>Simple transitions</h3>
      <script>
         d3.selectAll("h3").transition().style("color","green").duration(5000);
      </script>
   </body>
</html>

Di sini, transisi terjadi dengan mulus dan merata. Kami juga dapat menetapkan nilai kode warna RGB secara langsung menggunakan metode berikut.

d3.selectAll("h3").transition().style("color","rgb(0,150,120)").duration(5000);

Sekarang, setiap nomor warna perlahan, mulus dan merata berubah dari 0 menjadi 150. Untuk mendapatkan pencampuran akurat di antara bingkai dari nilai bingkai awal ke nilai bingkai akhir, D3.js menggunakan metode interpolasi internal. Sintaksnya diberikan di bawah ini -

d3.interpolate(a, b)

D3 juga mendukung jenis interpolasi berikut -

interpolateNumber - Mendukung nilai numerik.
interpolateRgb - warna pendukung.
interpolateString - tali pendukung.

D3.js menangani penggunaan metode interpolasi yang tepat dan dalam kasus lanjutan, kita dapat menggunakan metode interpolasi secara langsung untuk mendapatkan hasil yang diinginkan. Kami bahkan dapat membuat metode interpolasi baru, jika diperlukan.

Metode penundaan ()

Metode delay () memungkinkan transisi berlangsung setelah jangka waktu tertentu. Pertimbangkan kode berikut di "transisi_delay.html".

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3> Simple transitions </h3>
      <script>
         d3.selectAll("h3").transition()
            .style("font-size","28px").delay(2000).duration(2000);
      </script>
   </body>
</html>

Siklus Hidup Transisi

Transisi memiliki siklus hidup empat fase -

Transisi dijadwalkan.
Transisi dimulai.
Transisi berjalan.
Transisi berakhir.

Mari kita bahas masing-masing satu per satu secara mendetail.

Transisi dijadwalkan

Transisi dijadwalkan saat dibuat. Saat kami meneleponselection.transition, kami menjadwalkan transisi. Ini juga saat kita meneleponattr(), style() dan metode transisi lainnya untuk menentukan bingkai kunci penutup.

Transisi Dimulai

Transisi dimulai berdasarkan penundaannya, yang ditentukan saat transisi dijadwalkan. Jika tidak ada penundaan yang ditentukan, transisi akan dimulai sesegera mungkin, yang biasanya terjadi setelah beberapa milidetik.

Jika transisi mengalami penundaan, nilai awal harus disetel hanya saat transisi dimulai. Kita bisa melakukan ini dengan mendengarkan acara start -

d3.select("body")
   .transition()
   .delay(200)
   .each("start", function() { d3.select(this).style("color", "green"); })
   .style("color", "red");

Transisi Berjalan

Saat transisi berjalan, transisi berulang kali dipanggil dengan nilai transisi mulai dari 0 hingga 1. Selain penundaan dan durasi, transisi memiliki kemudahan untuk mengontrol pengaturan waktu. Easing mendistorsi waktu, seperti untuk slow-in dan slow-out. Beberapa fungsi easing mungkin untuk sementara memberikan nilai t lebih besar dari 1 atau kurang dari 0.

Transisi Berakhir

Waktu akhir transisi selalu tepat 1, sehingga nilai akhir ditetapkan tepat saat transisi berakhir. Transisi berakhir berdasarkan jumlah penundaan dan durasinya. Saat transisi berakhir, acara akhir dikirim.