flutter_animateとは
flutter_animateは、Flutterアプリケーションに対してさまざまなアニメーション効果を簡単に追加できる高性能なライブラリです。
フェード、スケール、スライド、アライン、フリップ、ブラー、シェイク、シマー、シャドウ、クロスフェード、パスフォロー、カラ―エフェクトなど、豊富なプリビルトエフェクトを提供します。
また、GLSLフラグメントシェーダーをウィジェットに適用する機能や、カスタムエフェクトの作成、スクロールや通知に同期するアニメーションの実装などが可能です。
使い方
インストール
dependencies:
flutter_animate: ^4.5.0基本的な使い方
flutter_animateを使うには、対象のウィジェットをAnimateウィジェットでラップし、効果のリストを指定します。
Animate(
effects: [FadeEffect(), ScaleEffect()],
child: Text("Hello World!"),
)また、すべてのウィジェットに対してanimate()拡張メソッドを追加することもできます。これにより、ウィジェットをAnimateでラップする簡略記法が可能です。
Text("Hello World!").animate().fade().scale()遅延、継続時間、カーブ
エフェクトにはオプションで遅延、継続時間、およびカーブパラメータを指定できます。エフェクトは並行して実行されますが、遅延を使用して順次実行することもできます。
Text("Hello").animate()
.fade(duration: 500.ms)
.scale(delay: 500.ms) // フェードの後に実行指定されない場合、これらの値は前のエフェクトから継承されるか、最初のエフェクトの場合はAnimate.defaultDurationおよびAnimate.defaultCurveから継承されます。
Text("Hello World!").animate()
.fadeIn() // `Animate.defaultDuration`を使用
.scale() // fadeInから継承
.move(delay: 300.ms, duration: 600.ms) // 新しい継続時間で上記の後に実行
.blurXY() // moveから遅延と継続時間を継承Animateには独自の遅延パラメータもあり、アニメーションが開始する前の遅延を定義します。これはアニメーションが繰り返される場合でも一度だけ適用されます。
Text("Hello").animate(
delay: 1000.ms, // アニメーション開始前の遅延
onPlay: (controller) => controller.repeat(), // ループ
).fadeIn(delay: 500.ms) // 各ループの開始時の遅延その他のエフェクトパラメータ
ほとんどのエフェクトには、開始値と終了値を指定するbeginおよびendパラメータが含まれています。これらはスマートに動作し、一方のみが指定された場合、もう一方は視覚的に中立な値にデフォルト設定されます。
Text("Hello").animate().fade() // begin=0, end=1
Text("Hello").animate().fade(begin: 0.5) // end=1
Text("Hello").animate().fade(end: 0.5) // begin=1多くのエフェクトには、その動作に影響を与える追加のパラメータもあります。これらも未指定の場合は適切なデフォルト値が使用されます。
Text('Hello').animate().tint(color: Colors.purple)ThenEffectによるシーケンシング
ThenEffectは、エフェクトのシーケンスを簡単にする特別な便宜エフェクトです。これにより、前のエフェクトの終了時間と自身の遅延を基準に新しいベースライン時間を設定します。すべての後続のエフェクトの遅延はこの新しいベースラインに対して相対的になります。
Text("Hello").animate()
.fadeIn(duration: 600.ms)
.then(delay: 200.ms) // ベースライン=800ms
.slide()リストのアニメーション
AnimateListクラスは、ウィジェットのリストに対して同様の機能を提供し、各子のアニメーションを指定された間隔でオフセットするオプションがあります。
Column(children: AnimateList(
interval: 400.ms,
effects: [FadeEffect(duration: 300.ms)],
children: [Text("Hello"), Text("World"), Text("Goodbye")],
))カスタムエフェクトとビルダー
新しい再利用可能なエフェクトを作成するには、Effectを拡張しますが、CustomEffect、ToggleEffect、およびSwapEffectを使用して一度きりのカスタムエフェクトを簡単に作成できます。
CustomEffect
CustomEffectを使用すると、カスタムアニメーション効果を作成できます。ビルダー関数を指定し、コンテキスト、値、および子ウィジェットを受け取ります。
Text("Hello World").animate().custom(
duration: 300.ms,
builder: (context, value, child) => Container(
color: Color.lerp(Colors.red, Colors.blue, value),
padding: EdgeInsets.all(8),
child: child,
)
)ToggleEffect
ToggleEffectもビルダー機能を提供し、ブール値を使用してアニメーションをトリガーします。
Animate().toggle(
duration: 2.seconds,
builder: (_, value, __) => Text(value ? "Before" : "After"),
)SwapEffect
SwapEffectは指定された時間にターゲットウィジェット全体を入れ替えることができます。
Text("Before").animate()
.swap(duration: 900.ms, builder: (_, __) => Text("After"))イベントとコールバック
flutter_animateは以下のコールバックを含みます：
onInit: 内部のAnimationControllerが初期化されたときonPlay: アニメーションが再生を開始したときonComplete: アニメーションが終了したとき
これらのコールバックはAnimationControllerを返し、アニメーションの操作に使用できます（例：リピート、リバースなど）。
Text("Horrible Pulsing Text")
.animate(onPlay: (controller) => controller.repeat(reverse: true))
.fadeOut(curve: Curves.easeInOut)CallbackEffect
CallbackEffectを使用すると、アニメーションの任意の位置にコールバックを追加できます。
Text("Hello").animate().fadeIn(duration: 600.ms)
.callback(duration: 300.ms, callback: (_) => print('halfway'))ListenEffect
ListenEffectを使用すると、指定された遅延、継続時間、カーブ、開始値、および終了値に基づいてアニメーション値（double）を受け取るコールバックを登録できます。
Text("Hello").animate().fadeIn(curve: Curves.easeOutExpo)
.listen(callback: (value) => print('current opacity: $value'))アダプターとコントローラー
デフォルトでは、すべてのアニメーションは内部のAnimationControllerによって駆動され、経過時間に基づいて更新されます。外部コントローラーを指定したり、アダプターを使用してアニメーションを外部ソースに同期させることも可能です。
flutter_animateには便利なアダプターが多数同梱されています。
状態変化への対応
Animateは、Animatedウィジェットと同様に状態変化に反応できます。通常のアニメーションを設定し、ターゲット値を指定します。ターゲット値が変更されると、自動的に新しいターゲット位置までアニメーションされます。
MyButton().animate(target: _over ? 1 : 0)
.fade(end: 0.8).scaleXY(end: 1.1)テスト
アニメーションをテストする場合、Animate.restartOnHotReload=trueを設定すると、アプリをホットリロードするたびにすべてのアニメーションが自動的に再開します。
