Flutter 中的按鈕動畫效果如何

Question

我想問您如何在單擊Instagram、Tiktok等圖像時為圖標的大小設置動畫...

這是我嘗試過的（以及許多其他事情），但沒有成功。

 GestureDetector(
              onDoubleTap: (){
                setState(() {
                  _showLikeAnimation = true;
                  _sizeFavoriteAnimation = 60.0; //old value is 20.0
                });
              },
              child: Stack(
                alignment: AlignmentDirectional.center,
                children: [
                  _imagePost(),
                  AnimatedSize(curve: Curves.easeIn, duration: const Duration(seconds: 2), child: Icon(Icons.favorite, size: _sizeFavoriteAnimation))
                ],
              )),

你有什么想法嗎？

Answer 1

實現此目的的一種方法是使用ScaleTransition和CurvedAnimation 。 下面是一個簡單的例子。

當用戶點擊圖標時，我會更改圖標的外觀，使其顯示最新狀態（活動/非活動），並將其縮小一點。 當這個過渡結束時，我讓圖標再次變大。 這類似於您按下按鈕在現實世界中的行為方式。 我希望這是你的想法。

class LikeButton extends StatefulWidget {
  const LikeButton({Key? key}) : super(key: key);

  @override
  State<LikeButton> createState() => _LikeButtonState();
}

class _LikeButtonState extends State<LikeButton>
    with SingleTickerProviderStateMixin {
  late final AnimationController _controller = AnimationController(
      duration: const Duration(milliseconds: 200), vsync: this, value: 1.0);

  bool _isFavorite = false;

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          _isFavorite = !_isFavorite;
        });
        _controller
            .reverse()
            .then((value) => _controller.forward());
      },
      child: ScaleTransition(
        scale: Tween(begin: 0.7, end: 1.0).animate(
            CurvedAnimation(parent: _controller, curve: Curves.easeOut)),
        child: _isFavorite
            ? const Icon(
          Icons.favorite,
          size: 30,
          color: Colors.red,
        )
            : const Icon(
          Icons.favorite_border,
          size: 30,
        ),
      ),
    );
  }
}

Answer 2

您可以使用https://pub.dev/packages/lottie來制作動畫，

嘗試這個;

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(title: 'Material App', home: LottieLearn());
  }
}

class LottieLearn extends StatefulWidget {
  const LottieLearn({Key? key}) : super(key: key);

  @override
  State<LottieLearn> createState() => _LottieLearnState();
}

class _LottieLearnState extends State<LottieLearn> with TickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    final AnimationController darkmodeController =
        AnimationController(vsync: this, duration: const Duration(seconds: 2));
    final AnimationController favoriteController =
        AnimationController(vsync: this, duration: const Duration(seconds: 1));
    bool isLight = false;
    bool isFavorite = false;
    const String favoriteButton = "https://assets10.lottiefiles.com/packages/lf20_slDcnv.json";
    const String darkMode = "https://assets10.lottiefiles.com/packages/lf20_tbyegho2.json";

    return Scaffold(
      appBar: AppBar(
        actions: [
          InkWell(
              onTap: () async {
                await darkmodeController.animateTo(isLight ? 0.5 : 1);
                // controller.animateTo(0.5);
                isLight = !isLight;
              },
              child: Lottie.network(darkMode, repeat: false, controller: darkmodeController)),
          InkWell(
              onTap: () async {
                await favoriteController.animateTo(isFavorite ? 1 : 0);
                isFavorite = !isFavorite;
              },
              child: Lottie.network(favoriteButton, repeat: false, controller: favoriteController)),
        ],
      ),
    );
  }
}

這必須給你一個想法，只需“flutter pub add lottie”然后復制粘貼代碼