D3.js - Animasyon

D3.js, geçiş yoluyla animasyonu destekler. Doğru geçiş kullanımı ile animasyon yapabiliriz. Geçişler sınırlı bir biçimdirKey Frame Animationsadece iki anahtar çerçeve ile - başlangıç ve bitiş. Başlangıç ana çerçevesi tipik olarak DOM'un mevcut durumudur ve bitiş ana çerçevesi, belirlediğiniz bir dizi nitelik, stil ve diğer özelliktir. Geçişler, başlangıç görünümüne bağlı olan karmaşık bir kod olmadan yeni bir görünüme geçiş için çok uygundur.

Example - "transition_color.html" sayfasında aşağıdaki kodu ele alalım.

<!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>

Burada, belgenin Arka plan rengi beyazdan açık griye ve ardından griye dönüştü.

Süre () Yöntemi

Duration () yöntemi, özellik değişikliklerinin anlık yerine, belirli bir süre boyunca sorunsuz bir şekilde gerçekleşmesine izin verir. Aşağıdaki kodu kullanarak 5 saniye süren geçişi yapalım.

<!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>

Burada geçişler sorunsuz ve eşit bir şekilde gerçekleşti. Ayrıca aşağıdaki yöntemi kullanarak doğrudan RGB renk kodu değeri de atayabiliriz.

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

Şimdi, her bir renk numarası yavaş, düzgün ve eşit bir şekilde 0'dan 150'ye gider. Aradaki karelerin başlangıç kare değerinden bitiş kare değerine doğru harmanlamasını elde etmek için, D3.js dahili bir ara değerleme yöntemi kullanır. Sözdizimi aşağıda verilmiştir -

d3.interpolate(a, b)

D3 ayrıca aşağıdaki enterpolasyon türlerini de destekler -

interpolateNumber - sayısal değerleri destekler.
interpolateRgb - destek renkleri.
interpolateString - destek dizesi.

D3.js, uygun interpolate yöntemini kullanmaya özen gösterir ve gelişmiş durumlarda, istenen sonucu elde etmek için interpolate yöntemlerini doğrudan kullanabiliriz. Gerekirse yeni bir interpolate yöntemi bile oluşturabiliriz.

Gecikme () Yöntemi

Delay () yöntemi, belirli bir süre sonra bir geçişin gerçekleşmesine izin verir. "Transition_delay.html" içindeki aşağıdaki kodu göz önünde bulundurun.

<!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>

Geçiş Yaşam Döngüsü

Geçişin dört aşamalı bir yaşam döngüsü vardır -

Geçiş planlandı.
Geçiş başlar.
Geçiş çalışır.
Geçiş biter.

Bunların her birini tek tek ayrıntılı olarak inceleyelim.

Geçiş planlandı

Oluşturulduğunda bir geçiş planlanır. Biz aradığımızdaselection.transition, bir geçiş planlıyoruz. Bu aynı zamanda aradığımızdaattr(), style() ve bitiş anahtar çerçevesini tanımlamak için diğer geçiş yöntemleri.

Geçiş Başlıyor

Bir geçiş, geçiş programlandığında belirtilen gecikmesine bağlı olarak başlar. Herhangi bir gecikme belirtilmemişse, geçiş mümkün olan en kısa sürede başlar, bu genellikle birkaç milisaniyeden sonra olur.

Geçişin bir gecikmesi varsa, başlangıç değeri yalnızca geçiş başladığında ayarlanmalıdır. Bunu başlangıç olayını dinleyerek yapabiliriz -

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

Geçiş Başlıyor

Geçiş çalıştığında, 0 ile 1 arasında değişen geçiş değerleri ile tekrar tekrar çağrılır. Gecikme ve süreye ek olarak, geçişler zamanlamayı kontrol etmek için kolaylık sağlar. Yavaşlama, yavaşlama ve yavaşlama gibi zamanı bozar. Bazı hareket hızı işlevleri geçici olarak 1'den büyük veya 0'dan küçük t değerleri verebilir.

Geçiş Biter

Geçiş bitiş zamanı her zaman tam olarak 1'dir, böylece bitiş değeri tam olarak geçiş bittiğinde ayarlanır. Geçiş, gecikme ve süresinin toplamına bağlı olarak sona erer. Bir geçiş sona erdiğinde, end olayı gönderilir.