如何使用 AnimatedBuilder 小部件为颜色设置动画？扑

Question

我正在尝试使用 Flutter 中的 AnimatedBuilder 小部件制作颜色动画。

我可以使用此构建器小部件通过返回 Transform 对象来设置缩放、平移和旋转动画。但是我不知道如何做到这一点来为颜色设置动画。

请注意，我可以使用 AnimatedContainer 小部件制作颜色动画，但我希望能够使用间隔制作更复杂的动画（例如，在这种情况下，淡入颜色，等待一段时间，然后淡出） .

这可能吗？

谢谢！

class _AnimatedColorState extends State<AnimatedColor>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Color?> _animFadeIn, _animFadeOut;

  @override
  void initState() {
    _controller = AnimationController(
      duration: Duration(milliseconds: 1000),
      vsync: this,
    );

    _animFadeIn = ColorTween(begin: Colors.pinkAccent, end: Colors.green)
        .animate(CurvedAnimation(
            parent: _controller,
            curve: Interval(0, 0.20, curve: Curves.fastOutSlowIn)));

    _animFadeOut = ColorTween(begin: Colors.green, end: Colors.pinkAccent)
        .animate(CurvedAnimation(
            parent: _controller,
            curve: Interval(0.80, 1.0, curve: Curves.fastOutSlowIn)));

    _controller.forward();
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
        animation: _controller,
        builder: (context, child) {
          return Container(
              height: 300,
              width: 100,
              decoration: BoxDecoration(
                color: // animate color here?
              ));
        });
  }
}

Answer 1

您可以在 Color 上使用 .lerp() 方法来指定两种颜色和 animationController 中的一个值。

https://api.flutter.dev/flutter/dart-ui/Color/lerp.html

如何使用 AnimatedBuilder 小部件为颜色设置动画？扑

How do I animate Color using an AnimatedBuilder widget? Flutter

animation

colors

flutter