我希望我的文本动画通过多种颜色在Flutter我怎么能做到。
wlsrxk511#
巴勃罗的答案(使用ColorTween)将在两个值之间设置颜色的动画。为了在几种颜色之间进行过渡,您可以使该解决方案适用于
请参阅我的文章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)); } }
字符串
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),)))); } }
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)!; } }
3条答案
按热度按时间wlsrxk511#
巴勃罗的答案(使用ColorTween)将在两个值之间设置颜色的动画。为了在几种颜色之间进行过渡,您可以使该解决方案适用于
请参阅我的文章Multicolor Transitions in Flutter,了解如何执行这两种操作。
作为参考,下面是一个使用RainbowColor的多色(B->G->R)动画文本小部件。
字符串
8iwquhpp2#
下面的示例在“颜色”范围中动画显示文本颜色。“
字符串
zbq4xfa03#
字符串