Flutter实现向上滑动动画时动态修改图标颜色问题排查

你的代码颜色动画不生效有4个核心问题：

• 单独创建的colorController从未调用forward()方法启动，颜色值始终停留在初始状态
• 位移动画和颜色动画使用两个独立的控制器，时长设置不一致（位移1s、颜色5s），无法实现滑动过程中同步变色的效果
• 动画运行时未监听值变化触发UI重绘，即使动画执行，build方法不会重新运行，图标颜色不会更新
• 未在组件销毁时释放动画控制器，存在内存泄漏风险

不需要额外创建颜色动画专用的控制器，直接复用位移动画的控制器同时驱动两个补间动画，即可保证滑动和变色完全同步，修复后完整代码如下：

class Loading extends StatefulWidget {
  const Loading({Key? key}) : super(key: key);
  static String tag = '/Loading';

  @override
  State<Loading> createState() => _LoadingState();
}

class _LoadingState extends State<Loading> with TickerProviderStateMixin {
  late AnimationController controller;
  late Animation<Offset> offset;
  late Animation<Color?> colorAnimation;

  @override
  void initState() {
    super.initState();

    controller = AnimationController(
      duration: const Duration(seconds: 1), 
      vsync: this
    );
    
    // 位移动画
    offset = Tween<Offset>(
      begin: const Offset(0.0, 10.0), 
      end: Offset.zero
    ).animate(controller);

    // 颜色动画复用同一个控制器，和滑动时长完全同步
    colorAnimation = ColorTween(
      begin: Colors.grey,
      end: Colors.red,
    ).animate(controller);

    // 监听动画进度，刷新UI
    controller.addListener(() => setState(() {}));

    Future.delayed(const Duration(milliseconds: 100))
        .then((_) => controller.forward());
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Align(
        alignment: Alignment.center,
        child: SlideTransition(
          position: offset,
          child: Icon(
            Icons.favorite,
            color: colorAnimation.value,
          ),
        ),
      ),
    );
  }
}

运行后效果：图标从初始位置向上滑动到中心的1秒过程中，会同步从灰色平滑过渡为红色，完全匹配动画起止点的颜色要求。

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