flutter 如何动画颜色的文字与多种颜色扑

cigdeys3  于 2023-08-07  发布在  Flutter
关注(0)|答案(3)|浏览(152)

我希望我的文本动画通过多种颜色在Flutter我怎么能做到。

wlsrxk51

wlsrxk511#

巴勃罗的答案(使用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));
  }
}

字符串

8iwquhpp

8iwquhpp2#

下面的示例在“颜色”范围中动画显示文本颜色。“

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

字符串

zbq4xfa0

zbq4xfa03#

import 'dart:async';
import 'dart:math';

import 'package:flutter/material.dart';

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

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

class _AnimatedBackgroundState extends State<AnimatedBackground> {
  late Timer _timer;
  final List<Color> _colors = [
    const Color(0xFFFF0000), // Red
    const Color(0xFFFF7F00), // Orange
    const Color(0xFFFFFF00), // Yellow
    const Color(0xFF00FF00), // Green
    const Color(0xFF0000FF), // Blue
    const Color(0xFF4B0082), // Indigo
    const Color(0xFF9400D3), // Violet
  ];
  double _animationValue = 0.0;

  @override
  void initState() {
    super.initState();
    _timer = Timer.periodic(const Duration(milliseconds: 40), (timer) {
      setState(() {
        _animationValue = (sin(timer.tick / 60) + 1) /
            2; // Adjust the factor for the speed and smoothness
      });
    });
  }

  @override
  void dispose() {
    _timer.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: 200,
          height: 200,
          decoration: BoxDecoration(
            border: Border.all(
              color: Colors.black,
              width: 2,
            ),
            borderRadius: const BorderRadius.all(Radius.circular(10)),
            gradient: SweepGradient(
              startAngle: 0.0,
              endAngle: 2 * pi,
              colors: [
                _interpolateColor(_animationValue),
                _interpolateColor((_animationValue + 0.1) % 1.0),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Color _interpolateColor(double t) {
    final index1 = (t * (_colors.length - 1)).floor();
    final index2 = (index1 + 1) % _colors.length;
    final color1 = _colors[index1];
    final color2 = _colors[index2];
    final factor = t * (_colors.length - 1) - index1;
    return Color.lerp(color1, color2, factor)!;
  }
}

字符串

相关问题