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

【问题标题】：How do I animate Color using an AnimatedBuilder widget? Flutter如何使用 AnimatedBuilder 小部件为颜色设置动画？扑
【发布时间】：2021-06-10 02:20:33
【问题描述】：

我正在尝试使用 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?
              ));
        });
  }
}

【问题讨论】：

标签： flutter animation colors

【解决方案1】：

您可以在 Color 上使用 .lerp() 方法来指定两种颜色和来自您的动画控制器的值。

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

【讨论】：

谢谢 - 是的，LERP 也可以工作，因此被接受。对于我的情况，我决定使用 TweenSequenceItem