如何实现flutter文字动画，如苹果iPhone中的关机按钮文字动画？

Question

我正在开发一个flutter项目，我需要对文本进行动画处理，最初文本是白色的，然后我需要将红色滑过白色文本，然后它变成红色，就像覆盖文本一样，然后把它变成红色，它又变成白色，就像序列化白色和红色一样，我的意思是就像iphone电源按钮文本动画一样，如何在flutter中实现这个概念？

当我使用动画控制器时，要做到这一点，它实际上是将所有白色文本变成红色，并重复相同的操作，但我需要红色，就像覆盖到白色文本一样，它像电源按钮一样重复穿过文本Apple iPhone 中的文本动画。

Answer 1

是你想要的吗？

import 'package:flutter/material.dart';

class TextAnimation extends StatefulWidget {
  @override
  _TextAnimationState createState() => _TextAnimationState();
}

class _TextAnimationState extends State<TextAnimation>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 1),
    )..repeat(reverse: true);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Text Animation'),
      ),
      body: Center(
        child: Stack(
          alignment: Alignment.center,
          children: [
            // White Text
            Text(
              'POWER',
              style: TextStyle(fontSize: 40, color: Colors.white),
            ),
            // Animated Red Overlay
            AnimatedBuilder(
              animation: _controller,
              builder: (context, child) {
                return ShaderMask(
                  shaderCallback: (rect) {
                    return LinearGradient(
                      begin: Alignment(-1.0 + _controller.value * 3, 0.0),
                      end: Alignment(1.0 + _controller.value * 3, 0.0),
                      colors: [Colors.red, Colors.white],
                      stops: [0.0, 0.5],
                    ).createShader(rect);
                  },
                  child: child,
                );
              },
              child: Text(
                'POWER',
                style: TextStyle(fontSize: 40),
              ),
            ),
          ],
        ),
      ),
    );
  }

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