D3.js 动画创建过度

创建过度有两种方式；d3.transition 和 selection.transition，它们都返回一个过度对象。前者是直接创建一个过度对象再指定作用对象，后者是通过作用对象创建过度。

d3.transition([selection], [name])

创建一个过度对象，参数是选择集。

transition.delay([delay])

设定延迟的时间。过度会经过一定时间后才会开始发生，单位 ms。

transition.duration([duration])

设定过度的持续时间（不包括延迟的时间），单位为ms。如.duration(2000)，是持续2000ms ，即2s。

transition.ease(value[, arguments])

设定过度样式，例如线性过度、在目标处弹跳几次的方式。

下面制作一个过度效果。

在svg区域中添加一个矩形，矩形的初始宽度为100，经过过度后，最终变为 300。代码如下：

import * as d3 from 'd3';
export default class Three{
  constructor (dom) {
    this.dom = dom;
  }
  toSvg () {
    let svg = d3.select(this.dom).append('svg').attr('width', 400);
    svg.append('rect')
    .attr('fill', 'steelblue')
    .attr('x', 10)
    .attr('y', 10)
    .attr('width', 0)
    .attr('height', 30)
    .transition()
    .attr('width', 300)
  }
}

上述代码只使用了 transition()。默认情况下，延迟（delay）为0ms，持续时长（duration）为250ms。请注意过渡前后的状态；

过渡前，矩形的宽度（width）为100。
过渡后，矩形的宽度为300。

过渡的前后状态必须不同的，才能看到变化。不同状态，可以是形状、颜色、位置、透明度等。

如果没有调用transition()，append()返回该元素的选择集对象。如果调用了transition()，返回的就不是是选择集对象，而是一个过度对象。选择集对象和过度对象是完全不同的概念，其成员变量和方法有所不同。关于其中的区别，请看以下代码：

import * as d3 from 'd3'

export default class Three{
  constructor (dom) {
    this.dom = dom;
  }
  toSvgs () {
    const svg = d3.select(this.dom)
      .append('svg')
      .attr('width', 400);
    const rect = svg.append('rect')
      .attr('fill', 'steelblue')
      .attr('x', 10)
      .attr('y', 10)
      .attr('width', 100)
      .attr('height', 30);
    console.log(rect); // rect是选择集
    const rectTran = rect.transition(); // 启动过度效果
    console.log(rectTran); // rectTran 是一个过渡对象
  }
}

rect是一个选择集对象， rectTran是一个过渡对象，它们是完全不同的两种对象。

调用transition()，得到过渡对象。之后，一般会跟着delay()、duration()、ease()，用于设置延迟，过渡时间、过渡样式。请看下面的例子：

import * as d3 from 'd3'

export default class Three{
  constructor (dom) {
    this.dom = dom;
  }
  toSvgz () {
    const svg = d3.select(this.dom).append('svg').attr('width', 400);
    const rect = svg.append('rect')
      .attr('fill', 'steelblue')
      .attr('x', 10)
      .attr('y', 10)
      .attr('width', 100)
      .attr('height', 30);
    const rectTran = rect.transition()
      .delay(500) // 延迟500ms
      .duration(1000) // 过度时长为1000ms
      .ease('bounce') // 过度样式
      .attr('width', 300) // 目标属性
  }
}

上面这段代码的过度效果总时长为1500ms，（延迟500ms+过渡时长1000ms），在目标属性处会弹跳几次，这是由于过度样式被设置为bounce。

另外，transition()可以多次调用。每次都会产生一个新的过渡，可以连续使用。请看下面的代码：

import * as d3 from 'd3'

export default class Three{
  constructor (dom) {
    this.dom = dom;
  }
  toSvgx () {
    const svg = d3.select(this.dom).append('svg').attr('width', 400);
    const rect = svg.append('rect')
      .attr('fill', 'steelblue')
      .attr('x', 10)
      .attr('y', 10)
      .attr('width', 100)
      .attr('height', 30);
    const rectTran = rect.transition()
      .attr('width', 300)
      .transition()
      .attr('height', 300)
      .transition()
      .attr('width', 100)
      .transition()
      .attr('height', 100)
  }
}

第一个过渡是将矩形宽度转变到300，第二个是将高度转变到300，第三个是将宽度转变到100，第四个是将高度转变到100.由于没有设定延迟和过度时间，都使用默认值。

D3.js 动画 创建过度

猜你喜欢

D3.js 动画创建过度