d3.js - 在D3中参数化bounceOut缓动效果

Question

下图中，黑线描述了bounceOut函数，如D3-ease documentation所示。有什么办法可以让反弹变小，如红线所示吗？

Answer 1

没有本地方法可以更改特定的缓动方法。

但是，如果您查看 source code ，您会看到弹跳步骤是硬编码的:

var b1 = 4 / 11,
    b2 = 6 / 11,
    b3 = 8 / 11,
    b4 = 3 / 4,
    b5 = 9 / 11,
    b6 = 10 / 11,
    b7 = 15 / 16,
    b8 = 21 / 22,
    b9 = 63 / 64,
    b0 = 1 / b1 / b1;

因此，您可以轻松地做的是使用一组不同的值创建自定义缓动。

为了比较，这里是 D3 缓动:

d3.select("svg")
  .append("circle")
  .attr("r", 20)
  .attr("cx", 20)
  .attr("cy", 50)
  .transition()
  .ease(d3.easeBounceOut)
  .duration(2000)
  .attr("cx", 280);

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>

这里是相同的代码，带有我们的自定义缓动:

d3.select("svg")
  .append("circle")
  .attr("r", 20)
  .attr("cx", 20)
  .attr("cy", 50)
  .transition()
  .ease(customBounce)
  .duration(2000)
  .attr("cx", 280);

function customBounce(t) {
  var b1 = 50 / 64,
    b2 = 54 / 64,
    b3 = 58 / 64,
    b4 = 60 / 64,
    b5 = 62 / 64,
    b6 = 63 / 64,
    b0 = 1 / b1 / b1;
  return (t = +t) < b1 ? b0 * t * t : t < b3 ? b0 * (t -= b2) * t + b4 : b0 * (t -= b5) * t + b6;
}

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>

我没有根据你想要的结果选择最好的数学，这只是一个一般性的解释，所以你可以自己做。