Как сделать анимацию ColorTween с несколькими цветами во флаттере

Я создал эту пользовательскую карту (из игры UNO), которая выглядит примерно как  Игровая карта UNO 4+

Я использовал 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

Спасибо за ваше время!


person Lakshay Dutta    schedule 15.05.2020    source источник


Ответы (2)


Попробуйте 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 только вчера, и я, честно говоря, понятия не имел, что вы задавали этот вопрос несколько дней назад, когда я это делал.

person ilikerobots    schedule 21.05.2020
comment
Ваше решение работает именно так, как я хотел. Получаю 100% желаемый результат. Большое спасибо за ваш код и время. - person Lakshay Dutta; 23.05.2020

Проверьте AnimatedContainer на странице https://flutter.dev/docs/cookbook/animation/animated-container. Это более простой способ работы с анимацией, и я думаю, что это именно то, что вы ищете. Тестовый код на странице позволит вам немедленно протестировать его. Просто поместите свое украшение и немного добавьте случайные значения, чтобы увидеть волшебство. Удачи!

person Brian Manuputty    schedule 15.05.2020