このチャプターの目次
アニメーション以外にも使えて便利
Curve
は主にアニメーションに使用することが多いですが、Curve
が行なっていることを紐解くと 「Curve#transform
関数で 0 ~ 1.0 の値を受け取って何らかの値を返す」ということになります。
この仕組みは「0 ~ 1.0」の値に変換するものなら何にでも使えるので、アニメーション以外にも連続的な動きに面白みを加えたりもできます。
以下は、ドラッグした距離によって2枚目のカードの拡大率を Curve を使って変化させる例です。
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 で実装されている SpringSimulation
を Curve
クラスとして使えるようにしたもので、Curves
で用意されているものでは表現しきれない動きを実装することができます。
Curve なのでもちろん今回紹介した Tips も使用できます。
(シンプルで依存が最小限なので、自分は OSS の UIライブラリでも使用しています)
sprung | pub.dev より引用