Блог

У меня есть ползунок, который имеет возможные значения между 0 to 1 с шагом 0.1

Например, если я переместу ползунок в начальную точку, анимация начнется с ( 0% ) , если я переместу значение slider на 0.5 ( 50% ), это означает, что оно начнется с 50% анимации до конца. Моя проблема в том, что если, например, я выбираю ползунок 50% , анимация начинается с 50% , но если я хочу вернуть его к другому проценту анимации, анимация не будет возвращена к выбранному проценту.

Как я могу это решить?

Это мой код:

 d3.select("#visualization").append('svg');
var vis = d3.select("svg").attr("width", 800).attr("height", 150).style("border", "1px solid red");

var rectangle = vis.append("rect").attr("width", 100).attr("height", 70).attr("x", 0).attr("y", 50);

var duration=5000;
  
function setPercentValue(percentage) {
   //rectangle.interrupt();

  rectangle.transition()
  .duration(duration * (1 - percentage))
  .ease(t => d3.easeCubic(percentage   t * (1 - percentage)))
  .attr("x", 250)
  .attr("width", 100)
  .attr("height", 100)
  .style("opacity", 0.5)
  .attr("fill", "red");

}  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="visualization"></div>
<input type="range" min="0" max="1" step="0.1" oninput="setPercentValue( event.target.value)">  

Анимация все еще работает, это не проблема. Проблема в том, что после завершения первой анимации вы анимируете элемент от его конечных значений до тех же конечных значений, и ничего не произойдет.

Самое простое решение — просто снова установить начальные позиции / размеры внутри setPercentValue функции:

 d3.select("#visualization").append('svg');
var vis = d3.select("svg").attr("width", 800).attr("height", 150).style("border", "1px solid red");

var rectangle = vis.append("rect").attr("width", 100).attr("height", 70).attr("x", 0).attr("y", 50);

var duration = 5000;

function setPercentValue(percentage) {
  rectangle.interrupt();

  rectangle.attr("width", 100)
    .attr("height", 70)
    .attr("x", 0)
    .attr("y", 50)
    .transition()
    .duration(duration * (1 - percentage))
    .ease(t => d3.easeCubic(percentage   t * (1 - percentage)))
    .attr("x", 250)
    .attr("width", 100)
    .attr("height", 100)
    .style("opacity", 0.5)
    .attr("fill", "red");
}  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="visualization"></div>
<input type="range" min="0" max="1" step="0.1" oninput="setPercentValue( event.target.value)">  

Конечно, можно сказать, является ли это решение адекватным, только зная, какова ваша цель здесь, но это не совсем ясно.