如何增加 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 是开源的，因此很容易复制他们的曲线来制作自己的曲线。

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

How to increase the highest overshooting bounds for ElasticOutCurve in Flutter?

flutter

flutter-animation