Flutter中如何实现类Instagram/TikTok的点赞图标尺寸动画

原有代码失效原因 #

• AnimatedSize的触发条件是子组件自身布局驱动的尺寸变化，直接修改Icon构造函数的size参数属于父组件传参突变，AnimatedSize无法捕获该变化生成过渡动画。
• 代码中定义的_showLikeAnimation状态未实际使用，初始状态爱心会常驻在图片上层，不符合交互逻辑。
• 缺少动画收尾逻辑，爱心放大后不会自动消失，和主流平台的短时反馈效果不符。
• 配置的2秒动画时长过长，不符合点赞操作的即时反馈体感。

正确实现方案 #

主流平台的双击点赞动画分为三个阶段：

• 初始态：爱心完全隐藏，不遮挡图片内容
• 触发态：双击瞬间爱心从无到有快速放大，带轻微回弹效果
• 收尾态：动画播放完成后爱心自动淡出/缩小消失，同时触发实际点赞状态更新

可直接复用的实现代码 #

首先在组件State中定义状态变量：

// 点赞动画控制状态
bool _showLikeAnimation = false;
double _likeIconScale = 0;
// 实际点赞业务状态
bool _isPostLiked = false;

双击交互与组件布局代码：

GestureDetector(
  onDoubleTap: () {
    // 可选：触发轻震动反馈，提升交互真实感
    // HapticFeedback.lightImpact();
    setState(() {
      _isPostLiked = true;
      _showLikeAnimation = true;
      _likeIconScale = 1;
    });

    // 等待放大动画完成后，控制爱心消失
    Future.delayed(const Duration(milliseconds: 700), () {
      if (!mounted) return;
      setState(() {
        _likeIconScale = 0;
      });
      // 等待缩小动画完成后，彻底隐藏爱心组件
      Future.delayed(const Duration(milliseconds: 300), () {
        if (!mounted) return;
        setState(() {
          _showLikeAnimation = false;
        });
      });
    });
  },
  child: Stack(
    alignment: AlignmentDirectional.center,
    children: [
      // 帖子图片组件
      _imagePost(),
      // 动画爱心
      if (_showLikeAnimation)
        AnimatedScale(
          scale: _likeIconScale,
          duration: const Duration(milliseconds: 350),
          curve: Curves.easeOutBack, // 放大带轻微回弹，贴近原生交互手感
          child: const Icon(
            Icons.favorite,
            color: Colors.white,
            size: 100,
            // 加阴影避免浅色图片下爱心看不清
            shadows: [
              BoxShadow(
                color: Colors.black38,
                blurRadius: 12,
              )
            ],
          ),
        ),
    ],
  ),
)

优化建议 #

• 动画总时长建议控制在1秒以内，保证操作反馈的即时性
• 如果需要更复杂的多段动画（比如放大后轻微缩小+透明度渐变），可以改用AnimationController结合多个Tween做精细控制
• 爱心颜色可以配置为和平台设计一致的红色/品牌色，不要用默认的黑色图标

内容的提问来源于stack exchange，提问作者ThomasF