51dev.com IT技术开发者社区

51dev.com 技术开发者社区

d3动画

代码星球阅读(33)2020-06-29 收藏0次评论

d3的动画关键是 transition 过渡对象。

1. 创建过渡对象有两种方式

1. d3.transition
2. selection.transition

过渡对象与选择对象是两个对象,方法和属性有差别。

2. 过渡对象的常用方法

transition.delay 延迟开始
transition.duration 过渡时间
transition.ease 过渡函数

3. 过渡动画的常用方式

transition.attr(name, value) 将属性过渡到目标值
transition.attrTween(name, tween) 将属性通过插值函数tween过渡到目标值
transition.style(name, value, [priority]) 将样式过渡到目标值,priority是优先级,有null和important两个值
transition.styleTween(name, tween, [priority]) 将样式过渡到目标值,使用函数tween
transition.text(value) 过渡开始时候,将文本设置为value
transition.tween(name,factory) 将属性name,按照函数factory过渡
transition.remove() 过渡结束后,删除元素,元素淡出效果常用

4. 过渡对象选择子元素

过渡对象,还可以继续对元素进行筛选,方法与选择集相同。

transition.select()
transition.selectAll()
transition.filter()

5. 过渡对象的事件

过渡对象可以监听如下事件

start 过渡开始
end 过渡结束
interrupt 过渡切换到另一个过渡

g.transition()
.duration(2000)
.selectAll('rect')
.each('start',function(d,i){
console.log('start')
})
.each('end',function(d,i){
console.log('end')
})
.each('interrupt',function(d,i){
console.log('interrupt');
})
.attr('width',300)

过渡对象可以用call调用函数

transition.call(function,[arguments])

此方法在坐标轴上常用:

g.transition().duration(2000).call(xAxis);

可以让坐标轴过渡变化。

6. 常用过渡函数

1. linear 线性
2. cubic 逐渐加快
3. elastic 弹簧
4. back 先回缩一点,再冲到终点
5. bounce 在终点处弹跳几次

可以使用in和out进行组合,例如linear-in,elastic-out-in,bounce-out,back-in-out等。

以上就是d3动画的全部内容。