如果转换持续 n 秒，是否可以在该时间的指定百分比启动它？

Question

我有一个使用动画制作的矩形，.transition()它需要 5 秒 ( .duration(5000))。我想知道是否有任何方法可以指定这 5 秒内的百分比，因此动画是从该百分比开始执行的。

例如，持续时间为 5 秒，如果指定值为50%，我希望动画从对应于 2.5 秒（5 的 50%）的值开始。那可能吗？

这是我的代码：

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

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

rectangle
  .transition()
  .duration(5000)
  .attr("x", 250)
  .attr("width", 100)
  .attr("height", 100)
  .attr("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>

Answer 1

对于线性缓动，只需更改持续时间并传递您自己的ease函数，该函数可以简单如下：

const percentage = 0.5;//here, a value between 0 and 1

selection.transition()
    .duration(5000 * (1 - percentage))
    .ease(t => percentage + t * (1 - percentage))
    //etc...

如果您有另一个缓动，请将修改后的t值传递给它。例如，使用d3.easeCubic：

.ease(t => d3.easeCubic(percentage + t * (1 - percentage)))

这里的逻辑很简单：正如API所解释的，“对于过渡处于活动状态的每个帧，它都会使用范围从 0 到 1 的缓动 t 值调用其补间”。因此，我们的函数只是从 的缓和值开始进行转换，并且percentage该t值从 0 到 1，用于指示1 - percentage必须添加的剩余金额 ( ) 的分数。当t = 1整个表达式percentage + t * (1 - percentage)等于 1 时。

这是演示。首先，您的常规过渡：

const percentage = 0.5;//here, a value between 0 and 1

selection.transition()
    .duration(5000 * (1 - percentage))
    .ease(t => percentage + t * (1 - percentage))
    //etc...

.ease(t => d3.easeCubic(percentage + t * (1 - percentage)))

现在使用percentage = 0.5，所有内容（位置、不透明度等...）都从原始过渡的 50% 开始：

const vis = d3.select("body").append('svg').attr("width", 800).attr("height", 614).style("border", "1px solid red");

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

rectangle
  .transition()
  .duration(5000)
  .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>

最后，与percentage = 0.8. 因为这是三次缓动，所以不透明度/运动几乎结束：

const vis = d3.select("body").append('svg').attr("width", 800).attr("height", 614).style("border", "1px solid red");

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

const percentage = 0.5;

rectangle
  .transition()
  .duration(5000 * (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>

PS：不相关，用于代替设置style样式。attr您会发现，在您的具体情况下，它会产生巨大的差异。