なんの記事？
この記事ではFlutter を用いてサクッとユーザーにワクワクを与えられるライブラリを紹介します
1/ 数値の変化にフリップアニメーション
利用ライブラリ: animated_flip_counter
概要
ある数値から別の数値に反転するときのアニメーション
実装例
どこでも汎用的に使えますね。たとえばスコアの変化など。
これは本当に実装が楽でText ウィジェットのように使えます！
Text(
'$score',
style: const TextStyle(
AnimatedFlipCounter(
duration: const Duration(milliseconds: 1000),
thousandSeparator: ',',
value: score,
textStyle: const TextStyle(
fontSize: 17,
color: AppColors.tileTextLight,
fontWeight: FontWeight.bold,
),
),
2/ タップしたときに振動を加える
利用ライブラリ: HapticFeedback (Flutter 標準パッケージ)
概要
端末に関わるものなのでスクショなどで表現ができないのですが
HapticFeedback を用いて
タップ時などに振動を加えることができる、選択するときとかなにかのアクションをするときに組み込んでいます
実装例
onTap: () {
HapticFeedback.lightImpact();
:
}
なお、HIG(Human Interface Guideline) では触覚フィードバックについては利用方法は慎重に適切にするように言われています。昨今のアプリを見るとガバガバな気もしていますが…
過度な利用はユーザー体験を損なってしまったり、そもそもレビューで拒否される可能性もあるかもしれません。
3/ 紙吹雪
利用ライブラリ: confetti
概要
紙吹雪が出る
デモサイトがわかりやすい→https://funwithflutter.github.io/confetti/#/
このウィジェット自体はなにもなければ空の見えないウィジェットになっていて、なんらかの条件で発火することによってそこから紙吹雪が出るというもののようだった
実装例
TODOリスト的なアプリで進捗バーが全てに行くと紙吹雪が舞うように実装しました。
ここでも 1 のanimated_flip_counter を用いて数字がflip するアニメーションになっています。
ちなみに完了ボタンにはHapticFeedback も入っていて紹介した技術をすべて使っています
コードとしてはcontrioller を初期化して紙吹雪ウィジェットをおいて、適宜発火させるというような実装になる。発火タイミングがこちらの任意で持つため、やや実装が複雑になってしまう
// 発火場所
if (widget.completionRate >= 1.0) {
_confettiController.play();
}
:
// widget の置き場所
Align(
alignment: Alignment.topCenter,
child: ConfettiWidget(
confettiController: _confettiController,
blastDirectionality: BlastDirectionality.explosive,
maxBlastForce: 10, // 紙吹雪の最大速度を調整
minBlastForce: 5, // 紙吹雪の最小速度を調整
emissionFrequency: 0.05, // 紙吹雪の放出頻度を調整
numberOfParticles: 30, // 紙吹雪の粒子数を増やす
shouldLoop: false,
colors: const [
Colors.red,
Colors.blue,
Colors.green,
Colors.yellow
],
),
4/ 加速度センサーを用いて色を変化させる
概要
このツイートを参考にして考えているもの。まだ試してはいません
https://x.com/minnasinario/status/1818988817837441197
自然界での角度による色の変化、光沢や明るさなどを加速度センサーに連動させることでよりリアルでワクワクのある体験が提供できると思っています。
軽く触ってみたところグラデーションの始点を加速度のx,y,z に応じて変化させる方法になりそうです。シミュレータで加速度の変化をシミュレートできなくてちょっとめんどそう
最後に
個人開発であれば気軽にじゃんじゃん入れることもできます。
もしチームでプロダクト開発を行っている場合は工数が小さいからサクッと入れちゃうみたいな選択肢も良いと思います。
アニメーションの実装のコストはものによって様々です、特に非エンジニアの人からはコストがわかりにくいことが多いと思います。
エンジニアからデザイナーやプロダクトマネージャにこれなら簡単にできるみたいなコミュニケーションをしてサクッといれたりそこからいいアイデアに落とし込んだり、なんてのも良いのではないでしょうか！