Chapter 02無料公開

Curve はアニメーション以外にも使える

へぶん
へぶん
2021.12.27に更新

アニメーション以外にも使えて便利

Curveは主にアニメーションに使用することが多いですが、Curveが行なっていることを紐解くと 「Curve#transform 関数で 0 ~ 1.0 の値を受け取って何らかの値を返す」ということになります。
この仕組みは「0 ~ 1.0」の値に変換するものなら何にでも使えるので、アニメーション以外にも連続的な動きに面白みを加えたりもできます。

以下は、ドラッグした距離によって2枚目のカードの拡大率を Curve を使って変化させる例です。

https://twitter.com/heavenOSK/status/1463834383761096710
double _progress() {
  // どれだけドラッグされたかを計算している。(0.0 ~ 1.0)
  final rate = currentDistance / maxDistance;
  // Curve#transform をかますことで動きがなめらかになる。
  return Curves.easeOutCubic.transform(
    math.min(rate, 1),
  );
}

補足

sprung パッケージ便利

sprung という、バネの動きを Curve で提供するパッケージがあります。
Flutter SDK で実装されている SpringSimulationCurve クラスとして使えるようにしたもので、Curves で用意されているものでは表現しきれない動きを実装することができます。
Curve なのでもちろん今回紹介した Tips も使用できます。
(シンプルで依存が最小限なので、自分は OSS の UIライブラリでも使用しています)
sprung | pub.dev より引用
sprung | pub.dev より引用