如何使用 Flutter 创建这种类型的文本动画？

Question

我的动画从左上角开始到右下角结束，那么我如何获取它并创建动画？

Answer 1

AnimatedTextKit( 
                animatedTexts: [ 
                RotateAnimatedText('AWESOME', 
                    textStyle: TextStyle( 
                        fontSize: 30, 
                        color: Colors.white, 
                        backgroundColor: Colors.blue)), 
                RotateAnimatedText('OPTIMISTIC', 
                    textStyle: TextStyle( 
                        letterSpacing: 3, 
                        fontSize: 30, 
                        fontWeight: FontWeight.bold, 
                        color: Colors.orange)), 
                RotateAnimatedText( 
                    'DIFFERENT', 
                    textStyle: TextStyle( 
                    fontSize: 30, 
                    decoration: TextDecoration.underline, 
                    ), 
                ), 
                ], 
                isRepeatingAnimation: true, 
                totalRepeatCount: 10, 
                pause: Duration(milliseconds: 1000), 
            ),

Answer 2

一种方法是使用 animate_text_kit 包。

如果您不想使用该软件包，下面的简单代码可以帮助您淡入和淡出文本。

class TextAnimation extends StatefulWidget {
  const TextAnimation({super.key});

  @override
  State<TextAnimation> createState() => _TextAnimationState();
}

class _TextAnimationState extends State<TextAnimation> {
  double opacity = 1.0;

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

  changeOpacity() {
    Future.delayed(const Duration(seconds: 3), () {
      setState(() {
        opacity = opacity == 0.0 ? 1.0 : 0.0;
        changeOpacity();
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Center(
        child: Stack(children: <Widget>[
          AnimatedOpacity(
            opacity: opacity,
            duration: const Duration(milliseconds: 800),
            child: const Text(
              'Hell',
              style: TextStyle(color: Colors.transparent),
            ),
          ),
          AnimatedOpacity(
            opacity: opacity == 1 ? 0 : 1,
            duration: const Duration(milliseconds: 800),
            child: const Text(
              'Hell',
              style: TextStyle(color: Colors.red),
            ),
          ),
        ]),
      ),
    );
  }
}

更新>

您可以改变方法

changeOpacity

中给出的秒数来改变可见时间。

AnimatedOpacity

小部件的不同毫秒数将改变淡入和淡出时间。