如何在 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,
        ),
      ),
    );
  }
}