在颤动中如何像按钮一样动画

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

您可以实现这一目标的一种方法是使用缩放术和曲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添加Lottie”，然后复制粘贴代码