Учебники

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

Март 22, 2018

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

Пример. Рассмотрим следующий код на странице «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 () позволяет изменениям свойства происходить плавно в течение заданной продолжительности, а не мгновенно. Давайте сделаем переход, который занимает 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 — поддержка строки.

interpolateNumber — поддерживать числовые значения.

interpolateRgb — поддержка цветов.

interpolateString — поддержка строки.

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

Метод задержки ()

Метод 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, так что конечное значение устанавливается точно, когда заканчивается переход. Переход заканчивается на основе суммы его задержки и продолжительности. Когда переход завершается, отправляется событие завершения.

54
Share: