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”然后复制粘贴代码