D3中的平滑递归过渡

时间:2018-09-16 21:33:08

标签: javascript d3.js transition

我创建了一个简单的过渡,最后将其回忆起来。为什么会变得生涩,如何使其变得光滑? (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);

    }

1 个答案:

答案 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-transition docs

  

如果未指定缓动函数,则默认为d3.easeCubic。

为什么结巴是因为使用 easeCubic 时,对象开始缓慢移动并停止缓​​慢。您可以在此处可视化缓动效果:https://easings.net/#easeInOutCubic

FIXED DEMO (with linear easing)