前言
对于前端来说过渡效果大家并不陌生：比如div1在{x：200, y: 200} 过渡到{x:500, y:500}这个运动动画的过程就是过渡。在d3js当然也是有动画的啊d3.transition(),那咱们接下来就使用下这个d3.transition();
开始
transition
transition()该 API 的功能为启动过渡效果。其前后是图形变化前后的状态（形状、位置、颜色等等）
duration
duration()该 APi 的功能为过渡的整体时间，时间单位：毫秒。
ease
ease()该 API 的功能是过渡的动画效果总共分为以下几种
const animations = ['easeLinear', 'easePolyIn', 'easePolyOut', 'easePolyInOut', 'easeQuad', 'easeQuadIn', 'easeQuadOut',
'easeQuadInOut', 'easeCubic', 'easeCubicIn', 'easeCubicOut', 'easeCubicInOut', 'easeSin', 'easeSinIn', 'easeSinOut', 'easeSinInOut',
'easeExp', 'easeExpIn', 'easeExpOut', 'easeExpInOut', 'easeCircle', 'easeCircleIn', 'easeCircleOut', 'easeCircleInOut', 'easeElastic',
'easeElasticIn', 'easeElasticOut', 'easeElasticInOut', 'easeBack', 'easeBackIn', 'easeBackOut', 'easeBackInOut',
'easeBounce', 'easeBounceIn', 'easeBounceOut', 'easeBounceInOut']
delay
delay该 API 的功能是过渡的延迟效果，在过渡之前延迟。时间单位：毫秒。支持整体延迟和单个设置延迟
//示例1
d3.delay(500)
//示例2
d3.delay(function(d,i){
return 200*i;
})
结合使用示例
示例1 对一个圆的颜色变化经行过渡 效果呈现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<svg width='500' height='500'>
<circle cx='250' cy='250' r='100'></circle>
</svg>
</body>
</html>
<script>
d3.select('circle')
.attr('fill','red')
.transition()
.duration(2000)
.delay(500)
.ease(d3.easeBounce)
.attr('fill','steelblue')
</script>
示例2 对圆的位置进行过渡
效果呈现：
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<svg width='500' height='500'>
<circle cx='100' cy='100' r='100'></circle>
</svg>
</body>
</html>
<script>
d3.select('circle')
.attr('fill', 'red')
.transition()
.duration(2000)
.delay(500)
.ease(d3.easeBounce)
.attr('cx', 400)
.attr('cy', 100)
</script>
示例3 对每个点相对
delay时间
效果呈现：
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
const data = new Array(10).fill(0);
let svg = d3.select('body')
.append('svg')
.attr('width', 600)
.attr('height', 700);
let rect = svg.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr('class', 'rect')
.attr('width', 30)
.attr('height', 30)
.attr('x', 0)
.attr('y', (d, i) => i * 50);
rect.transition()
.duration(1000)
.delay((d, i) => {
return 1500 * i
})
.ease(d3.easeBounce)
.attr('x', 400)
.attr('y', (d, i) => i * 50);
</script>
总结：这个用了每个不同的delay时间来生成的过渡动画效果
总结
每个炫酷的动画都是尤小小的动画起步的，慢慢积累吖
结束语
- 大家好 我是三原，多谢您的观看，我会更加努力(๑•̀ㅂ•́)و✧多多总结。
- 每个方法都是敲出来验证过通过的，有需要可以放心复制。
- 如果您给帮点个赞