плавный рекурсивный переход в D3 - PullRequest
Новая
       13

плавный рекурсивный переход в D3

0 голосов
/ 17 сентября 2018

Я создал простой переход, который напоминает о себе в конце.Почему это вяленое мясо и как его можно сделать гладким?(jsfiddle здесь ) 

    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 голосов
/ 17 сентября 2018

Это потому, что по умолчанию функция замедления перехода не линейная, а 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-переход :

Если функция замедления не указана, по умолчанию используется значение d3.easeCubic.

Почему он заикается, потому что при использовании easeCubic объект начинает медленно двигаться и медленно останавливается. Вы можете визуализировать эффект смягчения здесь: https://easings.net/#easeInOutCubic

ФИКСИРОВАННАЯ ДЕМО (с линейным ослаблением)

...