我创建了一个简单的过渡,最后将其回忆起来。为什么会变得生涩,如何使其变得光滑? (jsfiddle here)
var circle = svg.append('circle')
.attr("r",10)
.attr("cx",10)
.attr("cy",10)
.style("fill","red");
go()
function go() {
var c=svg.select("circle");
c
.transition()
.duration(1000)
.attr("cx",1*c.attr("cx")+10)
.on("end",go);
}
答案 0 :(得分:3)
这是因为默认情况下过渡缓动函数不是线性的,而是 easeCubic 。将缓动功能设置为线性可解决此问题:
function go() {
var c=svg.select("circle");
c
.transition()
.ease(d3.easeLinear) // <-- THIS WAS ADDED
.duration(1000)
.attr("cx",1*c.attr("cx")+100)
.on("end",go);
}
如果未指定缓动函数,则默认为d3.easeCubic。
为什么结巴是因为使用 easeCubic 时,对象开始缓慢移动并停止缓慢。您可以在此处可视化缓动效果:https://easings.net/#easeInOutCubic