如何增加Flutter中ElasticOutCurve的最高超调范围？

Question

对于ElasticOutCurve，我想增加超调范围的最大值。我试图创建自定义曲线或增加周期，到目前为止没有运气。有人知道如何实现这一目标吗？非常感谢。

Answer 1

首先让我们看一下ElasticOutCurve的来源（来自flutter source）：

class ElasticOutCurve extends Curve {
  /// Creates an elastic-out curve.
  ///
  /// Rather than creating a new instance, consider using [Curves.elasticOut].
  const ElasticOutCurve([this.period = 0.4]);

  /// The duration of the oscillation.
  final double period;

  @override
  double transformInternal(double t) {
    final double s = period / 4.0;
    return math.pow(2.0, -10 * t) * math.sin((t - s) * (math.pi * 2.0) / period) + 1.0;
  }

  @override
  String toString() {
    return '$runtimeType($period)';
  }
}

我们可以看到他们所做的只是一些基本的数学。

下面是一张图表，显示了fluter算法的缓动曲线：

如果将（pow * sin）部分乘以3，会发生以下情况：

图表全部归功于Wolfram Alpha。

如果您使用不同的常数进行演奏，您还可以通过其他方式对其进行调整，尽管您需要确保它始终从0开始到1结束。

不幸的是，Flutter团队并没有使曲线更加灵活，但是由于flutter是开源的，因此可以很容易地复制其曲线以制作自己的曲线。