如何向TabBar添加ColorTween动画？

Posted 2021-04-05

我正在制表符之间的简单双色动画

应该看起来像这样

我认为我已经接近了正确的解决方案，但是当我在Tab3上按Tab时，没有任何效果。

在每个标签中，我都有一个Animation<color>，但我不知道如何声明为新标签，或者当我擦除到新标签并设置新的ColorTween()时请帮助我，我不知道我应该创建一个新的AnimationController还是该3个选项卡仅创建一个Animation<color>

这是选项卡中动画的一些代码

 @override
  void initState() {
    super.initState();

    setAnimation();

  }

  setAnimation() {

    if (widget.tabcontroller.animation.value == widget.tabindex ||
        widget.tabcontroller.animation.value + 1 == widget.tabindex ||
        widget.tabcontroller.animation.value - 1 == widget.tabindex) {

      // set animation in which direction
      animation = ColorTween(
        begin: widget.tabcontroller.animation.value == widget.tabindex ? new Color(0xff622F74) : Colors.black26,
        end: widget.tabcontroller.animation.value == widget.tabindex ? Colors.black26 : new Color(0xff622F74),
      ).animate(widget.tabcontroller.animation)
        ..addListener(() { setState(() {} ); });
    }

  }

和完整代码

class TabAnimation extends StatefulWidget {
  @override
  _TabAnimationState createState() => _TabAnimationState();
}

class _TabAnimationState extends State<TabAnimation> with TickerProviderStateMixin {

  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: 3);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.lightBlue,
        accentColor: Colors.orange,
      ),
      home: DefaultTabController(
        length: 3,
        child: new Scaffold(
          appBar: new AppBar(
            title: new Text("TabAnimatedColorTween"),
            bottom: new PreferredSize(
              preferredSize: const Size(double.infinity, 48.0),
              child : new Container(
                color: Colors.white,
                child: new TabBar(
                  labelColor: Colors.black87,
                  unselectedLabelColor: Colors.grey,
                  controller: _tabController,
                  tabs: <Widget>[
                    Tab(child: new _Tab(0, "Tab1", _tabController)),
                    Tab(child: new _Tab(1, "Tab2", _tabController)),
                    Tab(child: new _Tab(2, "Tab3", _tabController)),
                  ],
                ),
              ),
            ),
          ),
          body: TabBarView(
            controller: _tabController,
            children: <Widget>[
              new Container(child: Center(child: new Text("1"))),
              new Container(child: Center(child: new Text("2"))),
              new Container(child: Center(child: new Text("3"))),
            ],
          ),
        ),
      ),
    );
  }
}



class _Tab extends StatefulWidget {
  final int tabindex;
  final String tabname;
  final TabController tabcontroller;

  _Tab(this.tabindex, this.tabname, this.tabcontroller, {Key key}) : super(key: key);

  @override
  __TabState createState() => __TabState();
}

class __TabState extends State<_Tab> {

  int count;
  Animation<Color> animation;

  @override
  void initState() {
    super.initState();

    setAnimation();

  }

  setAnimation() {

    if (widget.tabcontroller.animation.value == widget.tabindex ||
        widget.tabcontroller.animation.value + 1 == widget.tabindex ||
        widget.tabcontroller.animation.value - 1 == widget.tabindex) {

      // set animation in which direction
      animation = ColorTween(
        begin: widget.tabcontroller.animation.value == widget.tabindex ? new Color(0xff622F74) : Colors.black26,
        end: widget.tabcontroller.animation.value == widget.tabindex ? Colors.black26 : new Color(0xff622F74),
      ).animate(widget.tabcontroller.animation)
        ..addListener(() { setState(() {} ); });
    }

  }


  @override
  Widget build(BuildContext context) {

    return new Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        new Text(widget.tabname),
        new Container(
          alignment: AlignmentDirectional.center,
          constraints: BoxConstraints(minHeight: 22.0, minWidth: 22.0),
          margin: EdgeInsets.only(left: 5.0),
          child: new Text(widget.tabindex.toString(), style: TextStyle(color: Colors.white70, fontSize: 10.0),),
          decoration: new BoxDecoration(
              shape: BoxShape.circle,
              color: animation == null ? Colors.black26 : animation.value,
              border: new Border.all(
                width: 0.8,
                color: Colors.white,
              ),
              boxShadow: [
                new BoxShadow(
                  color: Colors.black.withOpacity(0.4),
                  blurRadius: 5.0,
                ),
              ]
          ),
        )
      ],
    );

  }
}

答案

我解决了这个问题

我没有向TabBar添加新的动画。我使用tabcontroller中的Animation.value

在选项卡中获取颜色值

color: Theme.of(context).primaryColor.withOpacity(getCurrClr()),

来自tabController和当前选项卡的不透明度值

double getCurrClr() {

    if(tabindex==0 && tabcontroller.animation.value < 1)
      return 1 - tabcontroller.animation.value;

    if(tabindex==1 && tabcontroller.animation.value <= 1)
      return tabcontroller.animation.value;

    if(tabindex==1 && tabcontroller.animation.value > 1)
      return 2 - tabcontroller.animation.value;

    if(tabindex==2 && tabcontroller.animation.value <= 2 && tabcontroller.animation.value > 1)
      return tabcontroller.animation.value - 1;

    return 0.0;

  }