🎥

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

に公開
Flutter
Dart
UX
tech

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にラップするだけで、お手軽にアニメーションを付与できます。

fade_in_animation

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

fade_in_animation

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

FadeOut

fade_out_animation

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

SlideIn

slide_in_animation

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

ScaleIn

scale_in_animation

ScaleInAnimation(
        child: SomeWidget(),
      );

Shake

shake_animation

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

Bounce

bounce_animation

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

Fluffy

fluffy_animation

FluffyAnimation(
        child: SomeWidget(),
      );

Pulse

pulse_animation

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の👍も良かったら押してください！

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

Discussion