Zenn
🎬

AnimationControllerのreverseメソッド使用時の注意点

2024/12/07に公開
Flutter
Dart
animation
tech

AnimationControllerのreverseメソッドについて

Flutterでアニメーションを実装する際、AnimationControllerのreverse()メソッドを使用する場合の重要な注意点について解説します。

基本的な動作

FlutterのAnimationControllerでのアニメーションには以下の2つの再生方向があります：

  • 通常再生：forward()メソッド
  • 逆再生：reverse()メソッド

注意点：Curveの逆再生

reverse()メソッドを使用する際の重要な注意点として、アニメーションのCurveも逆再生されるという特徴があります。

問題の例

以下のようなCurvedAnimationを使用した場合：

final CurvedAnimation curvedAnimation = CurvedAnimation(
  parent: animationController,
  curve: Curves.easeOutCirc,
);

このコードでは、reverse()実行時にeaseOutCircのカーブも逆再生されてしまいます。

この動作は、デザイン要件によっては望ましくない場合があります。例えば、逆再生時も通常再生と同じイージングを適用したい場合などです。

解決方法：reverseCurveの適切な設定

この問題はCurvedAnimationのreverseCurveプロパティを使用して解決できます。

ただし、単純に同じCurveを指定するだけでは不十分です。reverseCurveに指定したCurveも逆再生されてしまいます。

正しい実装方法

Curveクラスのflippedゲッターを使用することで、この問題を解決できます：

final CurvedAnimation curvedAnimation = CurvedAnimation(
  parent: animationController,
  curve: Curves.easeOutCirc,
  reverseCurve: Curves.easeOutCirc.flipped, // flippedを使用して逆転を相殺
);

flippedは指定したCurveを予め逆転させたものを返します。これにより、reverse()実行時の自動的な逆転と相殺され、結果として通常再生時と同じカーブでアニメーションが実行されます。

こちらからアニメーションを実際に動かして確認することができます

まとめ

  • AnimationController.reverse()使用時は、Curveも自動的に逆再生される
  • 逆再生時も通常再生と同じカーブを維持したい場合は、reverseCurveにCurve.flippedを指定する
  • この設定により、一貫性のあるアニメーション体験を提供できる
GitHubで編集を提案

Discussion