flutter - 如何增加 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)';
  }
}

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

这是一张图表，显示了 flutter 算法的缓动曲线:

下面是将 (pow * sin) 部分乘以 3 会发生什么:

图表的所有功劳都归功于 Wolfram Alpha。

如果您使用不同的常量，您也可以通过其他方式调整它，但您需要确保它始终从 0 开始并以 1 结束。

不幸的是，Flutter 团队没有让曲线更灵活一点，但由于 Flutter 是开源的，因此很容易复制他们的曲线来制作自己的曲线。