Flutterで超簡単にアニメーションを実装する方法【EzAnimation】

EzAnimationとは

2020年06月26日にDeven Joshi氏によって公開された、アニメーションを超簡単に実装できるようにするためのパッケージです。
このパッケージには、あのStateNotifierやProviderなどで有名なRemi Rousselet氏も関わっている？ようです。(Medium記事内で感謝していたので)
本記事は、以下のMediumの記事をほぼそのまま書いています。

pub.dev
GitHub
Medium

通常のアニメーションだと、AnimationControllerとTweenが分かれていたり、SingleTickerProviderStateMixinがよくわからなかったりします。
しかし、ezanimationを使えば、AnimationControllerとTweenが不要で、シンプルなアニメーションはもちろん、曲線や複数アニメーションの組み合わせなどの複雑なアニメーションを驚くほど簡単に実装することができます。

使い方

pubspec.yaml

dependencies:
  ezanimation: ^0.4.0

まずはいつもの$ flutter pub get

そして、これが簡易的サンプルです。

class _MyHomePageState extends State<MyHomePage> {
  // アニメーションを定義
  var animation = EzAnimation(0.0, 100.0, Duration(seconds: 1));

  @override
  void initState() {
    super.initState();
    // アニメーション開始
    animation.start();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        // 監視
        child: AnimatedBuilder(
          animation: animation,
          builder: (context, snapshot) {
            return Container(
              color: Colors.blue,
              width: animation.value,
              height: animation.value,
            );
          },
        ),
      ),
    );
  }
}

非常に簡単で分かりやすいですね。もう少し深く見ていきましょう。

宣言方法

シンプル

var animation = EzAnimation(
  0.0,
  100.0,
  Duration(seconds: 1),
);

非常にシンプルで簡単ですが、画面遷移するときなどにはアニメーションは止まらず、手動で止める必要があります。

コンテキスト

var animation = EzAnimation(
  0.0,
  100.0, 
  Duration(seconds: 1),
  context: context,
);

contextを渡すと、画面遷移時にアニメーションを自動的に停止し、リセットしてくれます。
OnNavigateを指定すればそのときの動きを変更できます。

var animation = EzAnimation(
  0.0,
  100.0,
  Duration(seconds: 1),
  context: context,
  onNavigate: OnNavigate.pauseAnimation,
);

こうすれば、画面遷移時にアニメーションを停止だけします。
再開する場合は手動でstartする必要があるので注意してください。

また、以下のようにすれば、通常のアニメーションと同じように処理してくれます。

var animation = EzAnimation(
  0.0,
  100.0,
  Duration(seconds: 1),
  vsync: this,
);

この場合、TickerProviderStateMixinが必要になります。

曲線アニメーション

非常に簡単です。

var animation = EzAnimation(
  0.0,
  100.0,
  Duration(seconds: 1),
  curve: Curves.bounceInOut,
);

逆カーブも指定できます。

var animation = EzAnimation(
  0.0,
  100.0,
  Duration(seconds: 1),
  curve: Curves.bounceInOut,
  reverseCurve: Curves.easeInOut,
);

複数アニメーションの組み合わせ

これも非常に簡単です。EzAnimation.sequence()を使います。

var animation = EzAnimation.sequence([
  SequenceItem(0.0, 100.0),
  SequenceItem(100.0, 50.0, weight: 2.0),
], Duration(seconds: 1));

二つ目のアニメーションにはweightを指定しています。
そうすることで以下のような動きをします。

1.1/3秒で0から100まで動く。
2.残りの2/3秒で100から50まで動く。

Custom Tween

ColorTweenなどを使用する必要がある場合は、EzAnimation.tween()を使用して独自のTweenを指定できます。

var animation = EzAnimation.tween(
  ColorTween(
    begin: Colors.red,
    end: Colors.blue,
  ),
  Duration(seconds: 1),
);

Custom TweenSequence

EzAnimation.tweenSequence()を使うことで、独自のTweenSequenceを指定できます。

var animation = EzAnimation.tweenSequence(TweenSequence([
  TweenSequenceItem(
    tween: ColorTween(
      begin: Colors.red,
      end: Colors.blue,
    ),
    weight: 1.0,
  ),
  TweenSequenceItem(
    tween: ColorTween(
      begin: Colors.blue,
      end: Colors.red,
    ),
    weight: 1.0,
  ),
]), Duration(seconds: 3));

まとめ

今後もこのパッケージはよりシンプルな記述で、より複雑なアニメーションを作成できるようにアップデートしていく予定だそうです。
パフォーマンスをよくするためのパッケージではないので注意してください。

以上です。ありがとうございました。