D3.js 动画效果
transition（）动画效果
主要是使用 selection.transition( ) 这个 API 来处理动画，由于是操作dom元素，因此要先用select() 的方法选定 DOM 元素后，才能将动画绑定到返回的 selection 实体上。实现动画效果主要使用transition的以下几种API方法：
- transition.duration( ) ⇒ 控制动画时长，这里是从动画开始到结束的时间
- transition.ease( ) ⇒ 调整动画运动效果
- transition.delay( ) ⇒ 设定动画延迟时间
- transition.on(事件, callback) ⇒ 设定动画产生的事件
<body>
<svg width="500" height="400" style="border: 1px solid red">
<rect class="moveBtn" width="100" height="100" fill="red" ></rect>
</svg>
<button>点击移动</button>
</body>
</html>
<script>
const rect = d3.select("rect")
document.querySelector('button').addEventListener('click', function(){
rect.transition() // 开始执行动画
.duration(1000) // 设置动画持续时间
.attr('transform', 'translate(200, 100)') // 移动位置
.attr("fill","blue") // 改变颜色
.attr('stroke-width', '0.5px') // 添加边框
.attr('stroke', 'black') // 边框颜色
})
</script>
transition.delay( ) 设置延迟
<body>
<svg width="500" height="400" style="border: 1px solid red">
</svg>
<button>点击移动</button>
</body>
</html>
<script>
const dataDelay = [10, 30, 50, 70, 90, 110]
const delay = d3.select('svg')
.selectAll('circle')
.data(dataDelay)
.enter()
.append('circle')
.attr('cx', d => d)
.attr('cy', 30)
.attr('r', 10)
.attr('fill', 'blue')
.attr('opacity', '0.5')
// 绘制出对应的圆形
document.querySelector('button').addEventListener('click', function () {
delay.transition()
.delay((d, i) => i * 200) // 设置出对应的延时时间
.attr('cx', d => d + 200) // 设置位移的距离
})
</script>
.ease( ) 动画效果
transition.ease( ) 的参数必须是一个方法，用来设定动画每一帧的时长，借此达到不同的动画效果。
d3.easeBack、d3.easeBackIn、d3.easeBackInOut、d3.easeBackOut d3.easeBounce、d3.easeBounceIn、d3.easeBounceInOut、d3.easeBounceOut d3.easeCircle、d3.easeCircleIn、d3.easeCircleInOut、d3.easeCircleOut d3.easeCubic、d3.easeCubicIn、d3.easeCubicInOut、d3.easeCubicOut d3.easeElastic、d3.easeElasticIn、d3.easeElasticInOut、d3.easeElasticOut d3.easeExp、d3.easeExpIn、d3.easeExpInOut、d3.easeExpOut d3.easeLinear d3.easePoly、d3.easePolyIn、d3.easePolyInOut、d3.easePolyOut d3.easeQuad、d3.easeQuadIn、d3.easeQuadInOut、d3.easeQuadOut d3.easeSin、d3.easeSinIn、d3.easeSinInOut、d3.easeSinOut
<body>
<svg width="500" height="400" style="border: 1px solid red">
</svg>
<button>点击移动</button>
</body>
</html>
<script>
const rect = d3.select('svg')
.append("rect")
.attr('width', 100)
.attr('height', 130)
.attr('fill',"red")
document.querySelector('button').addEventListener('click', function () {
rect.transition()
.ease(d3.easeBack) // 可以使用不同的效果完成动画
.attr("fill","blue")
})
</script>
transition.on( ) 动画的生命周期
- start ⇒ 动画开始时
- end ⇒ 动画结束时
- interrupt ⇒ 动画被中断
- cancel ⇒ 动画被取消
使用动画完成无线循环动画
<body>
<svg width="500" height="400" style="border: 1px solid red">
</svg>
<button>点击移动</button>
</body>
</html>
<script>
// 设置向右侧移动
const goright = function () {
d3.active(this) // 这里的this是取到的rect这个元素
.attr('x', 200)
.transition()
.on("start", goLeft);
}
// 设置向左侧移动 回到原点
const goLeft = function () {
d3.active(this) // 这里的this是取到的rect这个元素
.attr('x', 0)
.transition()
.on("start", goright);
}
// 添加矩形元素
const rect = d3.select('svg')
.append("rect")
.attr('width', 100)
.attr('height', 100)
.attr('fill', "red")
document.querySelector('button').addEventListener('click', function () {
rect.transition() // 执行动画
.duration(1000)
.on('start', goright)
})
</script>
