flutter - 如何为具有多种颜色波动的文本设置动画颜色

Question

我希望我的文字通过多种颜色动画显示，该如何处理。

Answer 1

Pablo的答案(使用ColorTween)将对两个值之间的颜色进行动画处理。为了在几种颜色之间转换，您可以使该解决方案适应于

建立一个“TweenSequence”链接多个颜色补间

使用RainbowColor简化了多种颜色之间的过渡

请参阅我的文章 Multicolor Transitions in Flutter，以获取有关执行任何一种操作的演练。
作为引用，这是一个使用RainbowColor的多色(B-> G-> R)动画文本小部件。

class ColorText extends StatefulWidget {
  const ColorText({
    Key key,
  }) : super(key: key);

  @override
  _ColorTextState createState() => _ColorTextState();
}

class _ColorTextState extends State<ColorText>
    with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation<Color> _colorAnim;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(duration: Duration(seconds: 3), vsync: this);
    _colorAnim = RainbowColorTween([Colors.blue, 
                                    Colors.green, 
                                    Colors.red, 
                                    Colors.blue])
            .animate(controller)
              ..addListener(() { setState(() {}); })
              ..addStatusListener((status) {
                if (status == AnimationStatus.completed) {
                  controller.reset();
                  controller.forward();
                } else if (status == AnimationStatus.dismissed) {
                  controller.forward();
                }
              });
    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Text("Hello!", style: TextStyle(color: _colorAnim.value));
  }
}