D3.js-动画



D3.js通过过渡支持动画。我们可以通过适当使用过渡来制作动画。过渡是关键帧动画的有限形式,只有两个关键帧-开始和结束。起始关键帧通常是DOM的当前状态,结束关键帧是您指定的一组属性,样式和其他属性。过渡非常适合过渡到新视图,而无需依赖于起始视图的复杂代码。

示例-让我们考虑“ transition_color.html”页面中的以下代码。

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

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

在这里,文档的背景颜色从白色变为浅灰色,然后变为灰色。

duration()方法

duration()方法允许属性更改在指定的持续时间内平稳地发生,而不是瞬间发生。让我们使用以下代码进行转换,该转换需要5秒钟。

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

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

在这里,过渡平稳而均匀地进行。我们还可以使用以下方法直接分配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”中的以下代码。

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

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

过渡生命周期

过渡具有四个阶段的生命周期-

  • 已安排过渡。
  • 过渡开始。
  • 过渡运行。
  • 过渡结束。

让我们逐一详细地研究每一个。

过渡计划

过渡是在创建时安排的。当我们调用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,因此最终值将在过渡结束时准确设置。过渡根据其延迟和持续时间之和而结束。过渡结束时,将调度end事件。

Made with ❤️ in Chengdu. Copyright reserved 2019-2022.

蜀ICP备20006366号-1