Я создал эту пользовательскую карту (из игры UNO), которая выглядит примерно как
Я использовал ColorTween для изменения свойства boxshadow контейнера в течение 1 секунды со следующим кодом
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 , ........]
Можно сказать, что я хочу соединить цвета вместе
Я попытался найти следующий пост, но не нашел то, что мне нужно. Как изменить цвета ColorTween во Flutter
Спасибо за ваше время!