Как применить отдельные параметры для смягчения переходов?

Я делаю переход к таким объектам, как

.transition()
.duration(600)
.delay(function(d, i) { return (500 - (i * 40)); })
.ease(d3.easeBackInOut)

В документации есть различные параметры, позволяющие манипулировать типом ослабления, например backInOut(t, 3.0), но я не знаю, как применить t и другую амплитуду... Любая помощь по этому поводу?

https://github.com/d3/d3-ease#easeBackInOut


javascript transition d3.js easing
person Hirschferkel    schedule 04.03.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

В конкретном случае d3.easeBackInOut вы можете установить амплитуду (называемую overshoot в API) с помощью overshoot():

.ease(d3.easeBackInOut.overshoot(s))
//your value here----------------^

Вот демонстрация с использованием 3 в качестве превышения (значение по умолчанию — 1,70158):

const svg = d3.select("svg");
svg.append("circle")
  .attr("cx", 100)
  .attr("cy", 50)
  .attr("r", 10)
  .style("stroke", "black")
  .style("fill", "lightgray")
  .transition()
  .duration(2000)
  .ease(d3.easeBackInOut.overshoot(3))
  .attr("cx", 400);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="500" height="100"></svg>

Кстати, с t не надо связываться. Его значение от 0 до 1 автоматически передается функции плавности.

person Gerardo Furtado    schedule 04.03.2019
comment
И я не понял еще в API: # back.overshoot(s) <> - person Hirschferkel; 04.03.2019
comment
back — это просто название группы смягчения: d3.easeBackIn, d3.easeBackOut, d3.easeBack и d3.easeBackInOut. - person Gerardo Furtado; 04.03.2019