Установите процент анимации при переходе элемента (вперед, назад) с помощью ползунка

Question 1

У меня есть ползунок, который имеет возможные значения от 0 до 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)">

javascript d3.js

3

yavg 25 Сен 2020 в 07:45

Answer

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

Самое простое решение - просто снова установить начальные позиции / размеры внутри функции 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)">

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

1

Gerardo Furtado 25 Сен 2020 в 05:51

Question 2

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

Самое простое решение - просто снова установить начальные позиции / размеры внутри функции 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)">

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

1

Gerardo Furtado 25 Сен 2020 в 05:51

Установите процент анимации при переходе элемента (вперед, назад) с помощью ползунка

1 ответ

Похожие вопросы

Новые вопросы

javascript