新彩天欢迎您!
幻海优品

D3.js - 动画

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 : 支持字符串.

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.除延迟和持续时间外,转换还可以轻松控制时序.缓和会扭曲时间,例如慢进和慢进.某些缓动函数可能暂时给出大于1或小于0的值.

转换结束

转换结束时间始终为1 ,以便在转换结束时准确设置结束值.转换基于其延迟和持续时间的总和而结束.转换结束时,将调度end事件.

免责声明:以上内容(如有图片或视频亦包括在内)有转载其他网站资源,如有侵权请联系删除