Geçişler ve Animasyonlar

transition & animations

D3 geçişli animasyon yapmak istediğimizde bize gerekli fonksiyonları sağlıyor. Geçişler DOM seçimlerinde <selection>.transition() yöntemi kullanılarak yapılır. Aşağıdaki tabloda D3’teki animasyon için önemli yöntemler listelenmiştir.

Yöntem

Açıklama

selection.transition()

seçilen öğeler için bir geçiş zamanlar

transition.duration()

her bir öğe için animasyon süresini milisaniye cinsinden belirtir

transition.ease()

hareket hızını belirtir, örneğin: linear, elastic, bounce, v.b

transition.delay()

animasyondaki gecikmeyi her bir öğe için milisaniye cinsinden belirtir

Animasyon, temelde bir elementin bir surumdan diğerine geçişinden başka bir şey değildir. Bu durumda, bir animasyon DOM öğesinin başlangıç ve bitiş durumları arasında bir geçiş olur.

transition()

d3.selection.transition() yöntemi, geçişin başlangıcını belirtir ve ardından seçilen öğelere farklı geçiş işlevleri uygulanabilir.

transition.ease

ease() işlevi, geçişin hareketini belirtmek ve kontrol etmek için kullanılır. Geçiş şeklini belirtirken bir çok alternatif yol vardır. Bunların gösterildiği bir örnek aşağıda var.

Örnek:

transition.delay

delay() işlevi, geçişin uygulandığı seçimdeki her öğe için gecikme parametresini ayarlar. Geçiş belirtilen gecikme değerinden sonra başlayacaktır. Aşağıdaki örneğe bakalım.

Dik iki dikdörtgen doğrusal bir şekilde boyutlandırıyoruz. İlk şeklin yüksekliğini 20px’den 100px’e yükseltiyoruz. Daha sonra, ikinci şeklide de aynı şekilde yükseliyoruz. Ancak, ikinci şekle 2000 milisaniyelik bir gecikme uygulayacağız, böylece ilk çubuktan 2000 milisaniye sonra boyutlanacak.

<!doctype html>
<html>
  <head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
  </head>
  <body>
    <script>
      var svg = d3.select("body").append("svg")
        .attr("width", 500).attr("height", 500);

      var bar1 = svg.append("rect")
        .attr("fill", "blue")
        .attr("x", 100).attr("y", 20)
        .attr("height", 20).attr("width", 10)

      var bar2 = svg.append("rect")
        .attr("fill", "blue")
        .attr("x", 120).attr("y", 20)
        .attr("height", 20).attr("width", 10)

      update();

      function update() {
        bar1.transition()
          .ease(d3.easeLinear).duration(2000).attr("height",100)

        bar2.transition()
          .ease(d3.easeLinear).duration(2000).delay(2000).attr("height",100)
      }
    </script>
  </body>
</html>

PreviousOlaylar (Events)NextKontrol Fonksiyonları

Last updated 5 years ago

Was this helpful?

Yöntem

Açıklama

selection.transition()

seçilen öğeler için bir geçiş zamanlar

transition.duration()

her bir öğe için animasyon süresini milisaniye cinsinden belirtir

transition.ease()

hareket hızını belirtir, örneğin: linear, elastic, bounce, v.b

transition.delay()

animasyondaki gecikmeyi her bir öğe için milisaniye cinsinden belirtir

Animasyon, temelde bir elementin bir surumdan diğerine geçişinden başka bir şey değildir. Bu durumda, bir animasyon DOM öğesinin başlangıç ve bitiş durumları arasında bir geçiş olur.

transition()

d3.selection.transition() yöntemi, geçişin başlangıcını belirtir ve ardından seçilen öğelere farklı geçiş işlevleri uygulanabilir.

transition.ease

ease() işlevi, geçişin hareketini belirtmek ve kontrol etmek için kullanılır. Geçiş şeklini belirtirken bir çok alternatif yol vardır. Bunların gösterildiği bir örnek aşağıda var.

Örnek:

transition.delay

delay() işlevi, geçişin uygulandığı seçimdeki her öğe için gecikme parametresini ayarlar. Geçiş belirtilen gecikme değerinden sonra başlayacaktır. Aşağıdaki örneğe bakalım.

<!doctype html>
<html>
  <head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
  </head>
  <body>
    <script>
      var svg = d3.select("body").append("svg")
        .attr("width", 500).attr("height", 500);

      var bar1 = svg.append("rect")
        .attr("fill", "blue")
        .attr("x", 100).attr("y", 20)
        .attr("height", 20).attr("width", 10)

      var bar2 = svg.append("rect")
        .attr("fill", "blue")
        .attr("x", 120).attr("y", 20)
        .attr("height", 20).attr("width", 10)

      update();

      function update() {
        bar1.transition()
          .ease(d3.easeLinear).duration(2000).attr("height",100)

        bar2.transition()
          .ease(d3.easeLinear).duration(2000).delay(2000).attr("height",100)
      }
    </script>
  </body>
</html>