いいねボタン Like Button Animation
ハートを押すと、ぽんっとふくらんで縮み、周りに小さな粒が飛び散る。数字も下から入れ替わる。
本物の Flutter ウィジェットが動きます（初回は数秒かかります）
どんなもの？
SNS でおなじみの、押して気持ちのいいボタンです。小さな演出で「押した」ことがはっきり伝わります。
大きさの変化は TweenSequence で「1 → 1.45 → 0.9 → 1」のように段階を並べると、弾むような動きになります。
飛び散る粒は CustomPaint で、アニメーションの値に合わせて中心からの距離と透明度を変えて描きます。
数字は AnimatedSwitcher で、値が変わるたびに下から入れ替わるようにしています。
取り消しのときは演出を出さず、静かに戻すのがお約束です。
こんなときに
- いいね・お気に入り・保存など、何度も押される小さな操作
避けたい場面
- 削除や購入など重い操作（遊びの演出は合わない）
最小コード
final scale = TweenSequence<double>([
TweenSequenceItem(tween: Tween(begin: 1, end: 1.45), weight: 30),
TweenSequenceItem(tween: Tween(begin: 1.45, end: 0.9), weight: 30),
TweenSequenceItem(tween: Tween(begin: 0.9, end: 1), weight: 40),
]).animate(controller);
ScaleTransition(
scale: scale,
child: IconButton(
onPressed: () {
setState(() => liked = !liked);
if (liked) controller.forward(from: 0);
},
icon: Icon(liked ? Icons.favorite : Icons.favorite_border),
),
)使うウィジェット
AnimationControllerTweenSequenceCustomPaintAnimatedSwitcher