D3.js - Анимация

D3.js поддерживает анимацию через переход. Мы можем делать анимацию при правильном использовании перехода. Переходы - это ограниченная формаKey Frame Animationвсего с двумя ключевыми кадрами - началом и концом. Начальный ключевой кадр обычно представляет собой текущее состояние модели DOM, а конечный ключевой кадр - это набор атрибутов, стилей и других свойств, которые вы указываете. Переходы хорошо подходят для перехода к новому представлению без сложного кода, который зависит от начального представления.

Example - Давайте рассмотрим следующий код на странице «transition_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>

Здесь цвет фона документа изменился с белого на светло-серый, а затем на серый.

Метод duration ()

Метод duration () позволяет изменениям свойств происходить плавно в течение заданного времени, а не мгновенно. Сделаем переход, который занимает 5 секунд, используя следующий код.

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

Здесь переходы происходили плавно и равномерно. Мы также можем назначить значение цветового кода RGB напрямую, используя следующий метод.

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

Теперь номер каждого цвета медленно, плавно и равномерно изменяется от 0 до 150. Чтобы получить точное смешивание промежуточных кадров от значения начального кадра до значения конечного кадра, D3.js использует внутренний метод интерполяции. Синтаксис приведен ниже -

d3.interpolate(a, b)

D3 также поддерживает следующие типы интерполяции -

interpolateNumber - поддержка числовых значений.
interpolateRgb - поддерживающие цвета.
interpolateString - опорная струна.

D3.js заботится об использовании правильного метода интерполяции, а в сложных случаях мы можем использовать методы интерполяции напрямую, чтобы получить желаемый результат. При необходимости мы даже можем создать новый метод интерполяции.

Метод delay ()

Метод delay () позволяет выполнить переход через определенный период времени. Рассмотрим следующий код в «transition_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>

Жизненный цикл перехода

Переходный период имеет четырехэтапный жизненный цикл -

Переход запланирован.
Переход начинается.
Переход выполняется.
Переход заканчивается.

Давайте рассмотрим каждый из них подробно.

Переход запланирован

Переход планируется при его создании. Когда мы звонимselection.transition, мы планируем переход. Это также когда мы звонимattr(), style() и другие методы перехода для определения конечного ключевого кадра.

Переход начинается

Переход начинается на основе его задержки, которая была указана при планировании перехода. Если задержка не указана, переход начинается как можно скорее, обычно через несколько миллисекунд.

Если переход имеет задержку, то начальное значение следует устанавливать только при запуске перехода. Мы можем сделать это, прослушав событие запуска -

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

Переход идет

Когда переход выполняется, он неоднократно вызывается со значениями перехода от 0 до 1. В дополнение к задержке и продолжительности переходы имеют облегчение для управления временем. Замедление искажает время, например, для замедления и замедления. Некоторые функции замедления могут временно давать значения t больше 1 или меньше 0.

Переходный период заканчивается

Время окончания перехода всегда равно 1, так что конечное значение устанавливается точно, когда переход заканчивается. Переход заканчивается в зависимости от суммы его задержки и продолжительности. Когда переход заканчивается, отправляется конечное событие.