如何在颤动中制作具有多种颜色的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 相同的背景颜色?

如何在颤动中创建具有固定宽度和高度的颜色框?

如何在颤动中为布局元素设置背景颜色

颤动中的BottomNavigationBarItem背景颜色

颤动中的单选按钮活动颜色不起作用

如何为具有多种颜色颤动的文本颜色设置动画