如何在颤动中制作具有多种颜色的ColorTween动画
Posted
技术标签:
【中文标题】如何在颤动中制作具有多种颜色的ColorTween动画【英文标题】:How to make ColorTween animation with multiple colors in flutter 【发布时间】:2020-09-01 01:01:46 【问题描述】:我制作了这张自定义卡片(来自 UNO 游戏),它看起来像
我使用 ColorTween 在 1 秒内更改了容器的 boxshadow 属性,代码如下
class SpecialUnoCard extends StatefulWidget
final String _value;
SpecialUnoCard(this._value);
@override
_SpecialUnoCardState createState() => _SpecialUnoCardState();
class _SpecialUnoCardState extends State<SpecialUnoCard>
with SingleTickerProviderStateMixin
AnimationController _controller;
Animation _animation;
int index = 0;
final _listOfTweens = [
ColorTween(begin: red, end: blue),
ColorTween(begin: red, end: green),
ColorTween(begin: red, end: orange),
ColorTween(begin: blue, end: red),
ColorTween(begin: blue, end: green),
ColorTween(begin: blue, end: orange),
ColorTween(begin: green, end: red),
ColorTween(begin: green, end: blue),
ColorTween(begin: green, end: orange),
ColorTween(begin: orange, end: red),
ColorTween(begin: orange, end: green),
ColorTween(begin: orange, end: blue),
];
ColorTween tween() =>
_listOfTweens[Random().nextInt(_listOfTweens.length - 1)];
@override
void initState()
_controller =
AnimationController(vsync: this, duration: Duration(seconds: 1));
_animation = tween()
.chain(CurveTween(curve: Curves.easeInOutCubic))
.animate(_controller);
_controller.addListener(()
setState(() );
);
_controller.addStatusListener((status)
if (status == AnimationStatus.completed)
_controller.reverse();
else if (status == AnimationStatus.dismissed)
_controller.forward();
);
_controller.forward();
super.initState();
@override
void deactivate()
_controller.dispose();
super.deactivate();
@override
Widget build(BuildContext context)
return Container(
margin: EdgeInsets.symmetric(
vertical: _cardMarginVer, horizontal: _cardMarginHor),
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(_cardCornerRadii),
border: Border.all(
color: _animation.value, width: 4, style: BorderStyle.solid),
boxShadow: [
BoxShadow(color: _animation.value, spreadRadius: 12, blurRadius: 25)
],
color: Colors.black,
),
child: Container(
height: _cardHeight,
width: _cardWidth,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Colors.black,
),
child: (widget._value == plus4)
? SvgPicture.asset('assets/plus4.svg')
: SvgPicture.asset('assets/wild.svg'),
),
);
现在,有没有办法在一堆值之间设置动画或打乱颜色?我想要一些与以下伪代码相关的功能
ColorTween(values: <Color>[Colors.orange , Colors.red , Colors.blue , ........]
你可以说我想把颜色串起来
我已经尝试查找以下帖子,但没有找到我需要的内容。 How could I change ColorTween colors in Flutter
感谢您的宝贵时间!
【问题讨论】:
【参考方案1】:试试RainbowColor,它允许在几种颜色之间进行插值/补间。它提供了与您描述的完全一样的 ColorTween 的多色变体:
RainbowColorTween([Colors.orange, Colors.red, Colors.blue])
它还可以在补间上下文之外用于在光谱中插入颜色,例如
var rb = Rainbow(spectrum: [Colors.orange, Colors.red, Colors.blue]);
Color warmColor = rb[0.25];
Color coldColor = rb[0.83];
顺便说一句,好时机。我昨天刚刚发布了 RainbowColor,我真的不知道几天前我制作它的时候你问了这个问题。
【讨论】:
您的解决方案完全符合我的要求。我得到了 100% 想要的结果。非常感谢您的代码和时间。【参考方案2】:在https://flutter.dev/docs/cookbook/animation/animated-container 上查看 AnimatedContainer。这是处理动画的一种更简单的方法,我认为它正是您想要的。页面上的测试代码将让您立即进行测试。只需放置您的装饰并稍微整合随机值即可看到魔力。祝你好运!
【讨论】:
以上是关于如何在颤动中制作具有多种颜色的ColorTween动画的主要内容,如果未能解决你的问题,请参考以下文章
如何在颤动中使设备顶部面板(状态栏)具有与 AppBar 相同的背景颜色?