d3.js - 使用进度条控制动画

Question

我正在使用这些库

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>

我正在制作一个尝试与进度条同步的动画。我的动画总共会持续 15 秒，并且会包含更多元素。

对于这个例子，我正在制作一个有一个矩形和一个圆的动画。

var rectangle = vis.append("rect")
var circle=vis.append("circle");

对于每个元素，我在 json 中定义其动画属性，指定起点 (.begin) 和终点 (.destiny )，还有一个延迟 (.delay)，然后使用每个属性的定义生成转换。这个 json 的一个例子是这样的:

circleValues={
"delay":4000,
"duration":3000,
"begin": {
  "cx": 250,
  "r":20,
  "fill": "blue"
},
"destiny": {
  "cx": 0,
  "fill": "orane"
 }
}

所以对于 circle 的情况，我将生成一个以这些属性开始的动画:

//circleValues.begin
"begin": {
  "cx": 250,
  "r":20,
  "fill": "blue"
}

并且将生成一个转换，最终它将以这些属性结束:

//circleValues.destiny
"destiny": {
  "cx": 0,
  "fill": "orange"
}

整个动画将在 15 秒的过程中，在圆形的情况下，根据我定义的属性，这意味着它将在 4 秒后开始，因为它将有一个 延迟 为 4000 (circleValues.delay)，并将持续 (circleValues.duration) 秒。

然后我有一个名为 initAnimation() 的函数，我在其中为样式中的每个元素执行此转换:

function initAnimation(percentage){
  //circle properties  
  circle.styles(circleValues.begin)
    .transition()
    .delay(circleValues.delay)
    .duration(circleValues.duration)
    .ease(d3.easeLinear())
    .styles(circleValues.destiny)
}

我想使用进度条控制动画，在这种情况下，我使用以下方法定义的进度条:

//15 seconds,  min value is 0 seconds, max value is 15 seconds, step=1
<input id="progressbar" type="range" min="0" max="15" step="1" value="0" oninput="setPercentValue(+event.target.value)">

我用下面的代码让进度条每秒自动移动，我还有2个按钮来停止动画和恢复动画。

var duration=15000; //15 seconds duration animation
var second=0;  // current value of progress var
var interval;  // instance of setInterval
function pause(){
  clearInterval(interval);
}
function play(){
  moveProgressBar();
}

function moveProgressBar(){
  interval= setInterval(()=>{
    console.log(second);
    second++;
    document.getElementById("progressbar").value=second;
    if(second==15){
      clearInterval(interval);
    }
  },1000)
}

我通过调用这两行来执行我的所有代码。

initAnimation(0);
moveProgressBar();

问题是我不知道如何制作它，以便根据我的进度条选择的时间，它对应于我动画的每个元素的当前时刻.我希望根据您在移动进度条时选​​择的值，它对应于我为每个元素定义的行为，即使我 pause 或 resume动画。这超出了我在 d3.js 的知识范围。

我该怎么做？

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


    var duration=15000; //15 seconds duration animation
    var second=0;  // current value of progress var
    var interval;  // instance of setInterval
    function pause(){
      clearInterval(interval);
    }

    function play(){
      moveProgressBar();
    }

    function moveProgressBar(){
      interval= setInterval(()=>{
        second++;
        document.getElementById("progressbar").value=second;
        if(second==15){
          clearInterval(interval);
        }
      },1000)
    }



function setPercentValue(percentage) {
  second=percentage;
  rectangle.interrupt();
  circle.interrupt();
    initAnimation(percentage);
}

var rectValues={
  "delay":2000,
  "duration":5000,
  "begin": {
    "x": 0,
    "y": 0,
    "height": 70,
    "width": 100,
    "opacity": 1,
    "fill": "red"
  },
  "destiny": {
    "x": 250,
    "y": 1,
    "height": 100,
    "width": 120,
    "opacity": 0.8,
    "fill": "green"
  }
}
var rectangle = vis.append("rect")
var circle=vis.append("circle");
  var circleValues={
    "delay":4000,
    "duration":3000,
    "begin": {
      "cx": 250,
      "r":20,
      "fill": "blue"
    },
    "destiny": {
      "cx": 0,
      "fill": "orange"
    }
  }
    function initAnimation(percentage){
      //rectangle properties
      rectangle.styles(rectValues.begin)
        .transition()
        .delay(rectValues.delay)
        .duration(rectValues.duration)
        .ease(t => d3.easeLinear(percentage + t * (1 - percentage)))
        .styles(rectValues.destiny)
      //circle properties  
      circle.styles(circleValues.begin)
        .transition()
        .delay(circleValues.delay)
        .duration(circleValues.duration)
        .ease(t => d3.easeLinear(percentage + t * (1 - percentage)))
        .styles(circleValues.destiny)
    }


initAnimation(0);
moveProgressBar();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
<div id="visualization"></div>
<!--<input type="range" min="0" max="1" step="0.1" value="0" oninput="setPercentValue(+event.target.value)">-->
<input id="progressbar" type="range" min="0" max="15" step="1" value="0" oninput="setPercentValue(+event.target.value)">

<button onclick="pause()">
 pause
</button>

<button onclick="play()">
 play
</button>

Answer 1

正如您在帖子中指定的那样，您的动画由延迟和过渡组成。
如果要在某个固定时间 T(由进度条值确定)显示此类动画的结果，则需要评估以下条件:

1. 如果 T 小于延迟，那么您仍在等待转换开始。您正在设置动画的形状的所有属性仍设置为 begin 值，您只需缩短延迟时间
2. 如果 T 大于延迟，但小于延迟 + 过渡持续时间，则形状已经处于过渡阶段。在这种情况下，您需要确定您在时间 T 的翻译距离并插入属性值(因此值将介于 begin 和 destiny 之间)，还有需要缩短过渡时间
3. 如果 T 大于延迟时间，则转换已经完成。在这种情况下，属性值将被设置为 destiny values

此逻辑封装在下面的函数 interpolateValuesAtTime 中。此函数除了计算新的delay、duration、begin 和destiny 值外，还创建了一个新的缓动函数，它计算缓动应该如何从时间 T 开始继续(关于修改后的缓动函数如何工作的细节在这个 page 中有详细描述)

您可以在下面的代码片段中对其进行测试。

以下是有关其功能的几点说明:

• 点击进度条后，会在给定的时间播放动画(动画会暂停，按播放开始播放)
• 此外，按下播放后，动画从进度条对应的时间开始播放(由于进度条只计算整秒，这意味着如果您暂停并播放动画，它可能会跳回一点点)

const progressbar = document.getElementById('progressbar');

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

let second = 0;
let interval;


const rectValues = {
    "delay": 2000,
    "duration": 5000,
    "begin": {
        "x": 0,
        "y": 0,
        "height": 70,
        "width": 100,
        "opacity": 1,
        "fill": "red"
    },
    "destiny": {
        "x": 250,
        "y": 1,
        "height": 100,
        "width": 120,
        "opacity": 0.8,
        "fill": "green"
    }
};

const circleValues = {
    "delay": 4000,
    "duration": 3000,
    "begin": {
        "cx": 250,
        "r": 20,
        "fill": "blue"
    },
    "destiny": {
        "cx": 0,
        "fill": "orange"
    }
}


function resumedEasingFunction(easingFunction, progress) {
    return function (xAfterResume) {
        const xOriginal = d3.scaleLinear()
            .domain([0, 1])
            .range([progress, 1])
            (xAfterResume);
        return d3.scaleLinear()
            .domain([easingFunction(progress), 1])
            .range([0, 1])
            (easingFunction(xOriginal));
    };
}

function interpolateValuesAtTime(values, easingFunction, time) {
    const interpolatedValues = JSON.parse(JSON.stringify(values));;
    let progress;
    if (values.delay >= time) {
        //the initial delay has not yet elapsed
        interpolatedValues.delay = values.delay - time;
        progress = 0;
    } else if (values.delay + values.duration >= time) {
        //the animation is running
        interpolatedValues.delay = 0;
        interpolatedValues.duration = values.delay + values.duration - time;
        progress = (values.duration - interpolatedValues.duration) / values.duration;
        for (let key in values.begin) {
            const startValue = values.begin[key];
            if (key in values.destiny) {
                const endValue = values.destiny[key];
                const interpolator = d3.interpolate(startValue, endValue);
                interpolatedValues.begin[key] = interpolator(progress);
            }
        }
    } else {
        //the animation has already ended
        interpolatedValues.delay = 0;
        interpolatedValues.duration = 0;
        progress = 1;
        for (let key in values.destiny) {
            interpolatedValues.begin[key] = values.destiny[key];
        }
    }
    interpolatedValues.easingFunction = resumedEasingFunction(easingFunction, progress);
    return interpolatedValues;
}

function play() {
    startAnimation(progressbar.value * 1000);
    startMovingProgressbar();
}

function pause() {
    stopMovingProgressBar();
    pauseAnimation();
}

function updateTimeBasedOnProgressbar() {
    stopMovingProgressBar();
    second = progressbar.value;
    startAnimation(1000 * second);
    pause();
}

function stopMovingProgressBar(){    
    clearInterval(interval);
}

function startMovingProgressbar() {
    clearInterval(interval);
    interval = setInterval(() => {
        second++;
        progressbar.value = second;
        if (second == 15) {
            clearInterval(interval);
        }
    }, 1000)
}

function pauseAnimation() {
    pauseShape(rectangle);
    pauseShape(circle);
}

function pauseShape(shape) {
    shape.transition()
        .duration(0)
}

function startAnimation(miliseconds) {
    //rectangle properties
    startShapeAnimation(rectangle, rectValues, miliseconds);
    //circle properties  
    startShapeAnimation(circle, circleValues, miliseconds);
}

function startShapeAnimation(shape, shapeValues, miliseconds) {
    const valuesAtTime = interpolateValuesAtTime(shapeValues, d3.easeLinear, miliseconds);    
    shape.attrs(valuesAtTime.begin)
        .transition()
        .duration(0)
        .attrs(valuesAtTime.begin)
        .transition()
        .delay(valuesAtTime.delay)
        .duration(valuesAtTime.duration)
        .ease(valuesAtTime.easingFunction)
        .attrs(valuesAtTime.destiny);
}

updateTimeBasedOnProgressbar();

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
    <script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>   
</head>
<body>
    <div id="visualization"></div>

    <input id="progressbar" type="range" min="0" max="15" step="1" value="0" oninput="updateTimeBasedOnProgressbar()">
    <button onclick="pause()">pause</button>
    <button onclick="play()">play</button>

    </script>
</body>
</html>