【Flutter】たった2行で簡単にアニメーションを付けられるeasy_animate packageを公開したよ🎉

3行まとめ

• 好きなWidgetにラップするだけでアニメーション効果を付与できるeasy_animate packageを公開したよ🎉
• 8種類のアニメーションを自由に利用可能🧐
• もちろん、アニメーションのduration, delay, directionなどを自由に変更可能🔥

https://pub.dev/packages/easy_animate

Flutterにおけるanimationの問題点

最近のアプリ開発においては、ユーザーエクスペリエンス向上のためアニメーションを追加したい場面が数多く存在します。

しかし、Flutterのanimationはとても複雑です。

王道で実装するには、Stateful WidgetにSingleTickerProviderをmixinすることにはじまり、AnimationController, Tween, Curves, Animationなど面倒を見なければいけないオブジェクトの量が非常に多くなってしまいます。

たしかに、比較的簡単に実装できるAnimated Widgetもありますが、それでもシンプルなフェードインを作成するためだけに、Stateful Widgetを用意して、StackしたAnimatedPositionedをAnimatedOpacityで入れ子構造にする方法などをとる必要があります。

これは面倒です。

シンプルなアニメーションをもっと手軽に使うために、easy_animate packageを作成しました。

easy_animateが解決すること

アニメーションを付けたいWidgetにラップするだけで、お手軽にアニメーションを付与できます。

const FadeInAnimation(
        child: YourFavoriteWidget(), //　動きを付けたいWidget
    );

たったこれだけ✨
もちろん、動きをカスタマイズすることもできます。

FadeInAnimation(
        animateDirection: AnimateDirection.right,
        animateType: AnimateType.loop,
        durationMilliseconds: 300,
        moveAmount: 200,
	delay: Duration(seconds: 1),
        child: YourFavoriteWidget(), //　動きを付けたいWidget
      );

property	value	description
animateDirection	AnimateDirection.top, AnimateDirection.right, AnimateDirection.bottom, AnimateDirection.left, AnimateDirection.none	アニメーションの方向を定義
animateType	AnimateType.once, AnimateType.loop, AnimateType.mirror	アニメーションのタイプを定義
durationMilliseconds	double	アニメーションの長さを定義(ms)
moveAmount	double	アニメーションの動きの量を定義
delay	Duration	ディレイを定義

各プロパティも1行ずつ制御できるので、非常にカンタンにアニメーションを付けることができます。

使用方法

 $ flutter pub add easy_animate

普段通りflutter pub addしたあと、flutter pub getすればOK.
この時、親Packageともいえる依存元のsimple_animationsも利用可能になります。

あとは、次章のAnimationのなかから好きなものを利用して、アニメーションを付けたいWidgetをラップするだけです。

使えるAnimationのexample

https://github.com/obutora/easy_animate/tree/master/example

FadeIn

FadeInAnimation(
        animateDirection: AnimateDirection.left,
        child: SomeWidget(),
      );

FadeOut

FadeOutAnimation(
        animateDirection: AnimateDirection.right,
        child: SomeWidget(),
      );

SlideIn

SlideInAnimation(
        animateDirection: AnimateDirection.left,
        child: SomeWidget(),
      );

ScaleIn

ScaleInAnimation(
        child: SomeWidget(),
      );

Shake

ShakeAnimation(
        isHorizontal: true,
        child: SomeWidget(),
      );

Bounce

 BouncingAnimation(
        developerMode: true,
        child: SomeWidget(),
      );

Fluffy

FluffyAnimation(
        child: SomeWidget(),
      );

Pulse

PulseAnimation(
        child: SomeWidget(),
      );

Animationの確認に便利なdeveloper modeについて

AnimationDeveloperTools(
        child: PulseAnimation(
            developerMode: true, // don't forget this!
            child: SomeWidget(),
        )
    );

上記のように、各アニメーションのWidgetをAnimationDeveloperToolsでラップして、developerMode : trueとすることで開発者モードを有効にすることができます。

easy_animateはsimple_animationsのラッパーなので、simple_animationsで実装されているAnimationDeveloperToolsをそのまま利用することができます。

開発者モードでは、再生速度やシークバーによる動きの確認ができます。
特にシーケンシャルなアニメーションの確認に便利です。

simple_animationsは、easy_animateよりも凝ったアニメーションを作りたくなった方に超オススメなPackageなので、ぜひお試しください。

開発者の皆様ありがとうございます🙏

まとめ

easy_animateを利用することで、最低限のコードでよく使うアニメーションを実装できます。

少し発展した使い方として、easy_animateはListViewなどの複数Widgetを扱う場合に、delayを上手く利用するとStaggeredなアニメーションを作ることができます。

これはとても画面をリッチにするのでオススメの使用法です。

https://twitter.com/hagakun_yakuzai

Twitter、主にZennの告知などに使ってるので、良かったら友達になってくださいな😊
easy_animateの👍も良かったら押してください！

実装してほしいアニメーションなどあれば、ぜひコメント欄に記載をお願いします🧐