Flutter重复弹性动画实现故障求助：动画未生效且无法重复

我帮你找出了代码里的几个关键问题，咱们一步步来修复：

问题点梳理 #

• 拼写错误导致重复动画无法触发：你写的avatarController.repeate()少了一个字母t，正确的方法是repeat()，这个错误直接导致动画控制器无法启动循环。
• 未绑定动画值到UI：你定义了avatarSize动画变量，但容器的宽高始终是固定的50.0，完全没有使用avatarSize.value，所以动画根本不会体现在界面上。
• 弹性动画区间设置不合理：你用Interval(0.100, 0.400)限制了弹性动画只在整个周期的10%-40%执行，剩下的时间UI没有变化，导致效果极其不明显。

修正后的完整代码 #

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: Avatar()));

class Avatar extends StatefulWidget {
  const Avatar({super.key});

  @override
  State<Avatar> createState() => _AvatarState();
}

class _AvatarState extends State<Avatar> with TickerProviderStateMixin {
  late AnimationController avatarController;
  late Animation<double> avatarSize;

  @override
  void initState() {
    super.initState();
    avatarController = AnimationController(
      duration: const Duration(seconds: 1),
      vsync: this,
    );
    // 直接用目标尺寸作为Tween范围，无需额外计算
    avatarSize = Tween(begin: 50.0, end: 80.0).animate(
      CurvedAnimation(
        parent: avatarController,
        curve: Curves.elasticOut,
        // 添加反向曲线，让缩小过程也有弹性效果
        reverseCurve: Curves.elasticIn,
      ),
    );
    // 修正拼写错误，开启反向重复循环
    avatarController.repeat(reverse: true);
  }

  @override
  void dispose() {
    // 必须销毁动画控制器，避免内存泄漏
    avatarController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: [
          AnimatedBuilder(
            // 监听动画值而非控制器，减少不必要的重建
            animation: avatarSize,
            builder: (context, widget) => Align(
              child: Container(
                // 将动画值绑定到容器宽高，实现尺寸变化
                width: avatarSize.value,
                height: avatarSize.value,
                color: Colors.green,
              ),
            ),
          )
        ],
      ),
    );
  }
}

关键修改说明 #

1. 修复拼写错误：把repeate()改成repeat()，并添加reverse: true让动画在放大后自动反向缩小，形成循环的弹性效果。
2. 绑定动画值到UI：将容器的width和height设置为avatarSize.value，让动画的变化直接反映在界面上。
3. 优化动画曲线：添加reverseCurve让反向动画也带有弹性，循环效果更自然；如果还是需要使用Interval，可以调整为Interval(0.0, 1.0)让弹性动画覆盖整个周期。
4. 内存泄漏防护：添加dispose()方法销毁动画控制器，这是使用AnimationController的必要规范。
5. 语法规范优化：使用late修饰变量适配Dart空安全，添加super.key让代码更符合Flutter最佳实践。

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