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

Posted 2023-02-23

【中文标题】如何为具有多种颜色颤动的文本颜色设置动画

【英文标题】：How to animate the color of a text with multiple colors flutter

【发布时间】：2020-08-19 08:45:18

【问题描述】：

我希望我的文本在颤动中通过多种颜色进行动画处理，我该怎么做。

【问题讨论】：

flutter 中几乎没有不同类型的动画...观看这个来自 Flutter 团队的关于动画的 youtube 系列 youtube.com/playlist?list=PLjxrf2q8roU2v6UqYlt_KPaXlnjbYySua

他们有一个关于改变颜色的插曲。

谢谢大佬让我看看

【参考方案1】：

下面的示例通过颜色范围为文本颜色设置动画。

import 'package:flutter/material.dart';

void main() 
  runApp(MyApp());


class MyApp extends StatefulWidget 
  @override
  MyAppState createState() 
    return MyAppState();
  


class MyAppState extends State<MyApp> with SingleTickerProviderStateMixin
  AnimationController controller;
  Animation animation;
  Color color;

  @override
  @mustCallSuper
  void initState() 
    super.initState();
    controller=AnimationController(
      vsync: this,
      duration: Duration(seconds: 5)
    );
    animation=ColorTween(begin:Colors.red,end: Colors.white).animate(controller);

    animation.addListener(()
      setState(() 
        color=animation.value;
      );
    );

    controller.forward();
  

  @override
  Widget build(BuildContext context) 

    return MaterialApp(home:Scaffold(

        appBar: AppBar(title: Text("Example")),
        body:Center(child:Text("HELLO!!!",textScaleFactor:3,style: TextStyle(color: color),))));
  

【参考方案2】：

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));