在颤动中将动画滑动到顶部时更改图标颜色

Question

我需要在滑动到顶部时更改图标的颜色。使用两种颜色，一种在开头，另一种在结尾。 我在下面尝试了这段代码，但颜色保持不变。

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, colorController;
  late Animation<Offset> offset;
  late Animation animation;

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

    controller =
        AnimationController(duration: Duration(seconds: 1), vsync: this);
    Future.delayed(Duration(milliseconds: 100))
        .then((_) => controller.forward());

    offset = Tween<Offset>(begin: Offset(0.0, 10.0), end: Offset.zero)
        .animate(controller);

    colorController = AnimationController(
      duration:
          const Duration(milliseconds: 5000), //controll animation duration
      vsync: this,
    );

    animation = ColorTween(
      begin: Colors.grey,
      end: Colors.red,
    ).animate(colorController);
  }

  // @override
  // void dispose() {
  //   controller2.dispose();
  //   super.dispose();
  // }

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

Answer 1

您缺少在colorController 上调用forward 并更改UI 使用addListener 来调用setState。

colorController = AnimationController(
  duration: const Duration(milliseconds: 500),  
  vsync: this,
)
  ..addListener(() {
    setState(() {});
  })
  ..forward();