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

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

[pub.dev](https://pub.dev/packages/ezanimation)
[GitHub](https://github.com/deven98/ez_animation)
[Medium](https://medium.com/flutter-community/announcing-ezanimation-a9d7c0158fe1)

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

# 使い方

```pubspec.yaml
dependencies:
  ezanimation: ^0.4.0
```
まずはいつもの`$ flutter pub get`

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

```Dart
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,
            );
          },
        ),
      ),
    );
  }
}
```

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

# 宣言方法
### シンプル

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

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

### コンテキスト

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

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

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

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

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

```Dart
var animation = EzAnimation(
  0.0,
  100.0,
  Duration(seconds: 1),
  vsync: this,
);
```
この場合、`TickerProviderStateMixin`が必要になります。

# 曲線アニメーション

非常に簡単です。

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

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

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

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

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

```Dart
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を指定できます。

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

# Custom TweenSequence

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

```Dart
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));
```

# まとめ

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

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