flutter开发中实现的一些动画

接触flutter开发已有几年时间，前期主要是自己仿写项目，后面在新公司开始用flutter正式进入开发了，但是flutter主要还是写业务页面，动画相关的写相对较少，最近公司设计老师提了一些动画需求，有幸可以亲自来实现，感受到了flutter写动画强大，赞👍🏻！！!

1. 实现Text文本内容变化时渐变动画
   先看效果：
   textTransfer.gif

再看代码：

 /// 常量
/// 页面切换动画时间，单位毫秒
const int pageViewAnimationDuration = 350;

class DemoWidget extends StatefulWidget {
  /// 是否显示年龄标题
  final bool showAge;

  const DemoWidget({
    Key? key,
    required this.showAge,
  }) : super(
          key: key,
        );

  @override
  State<StatefulWidget> createState() => _DemoWidgetState();
}

class _DemoWidgetState extends State<DemoWidget> with TickerProviderStateMixin {
  late AnimationController _text_1_controller;
  late Animation<double> _text_1_animation;
  late AnimationController _text_2_Controller;
  late Animation<double> _text_2_animation;

  /// 是否是第一次进入显示，第一次进入不显示渐变动画
  bool isFirstShow = true;

  @override
  void initState() {
    super.initState();
    _text_1_controller = AnimationController(
      duration: const Duration(milliseconds: pageViewAnimationDuration),
      vsync: this,
    );
    _text_1_animation =
        Tween<double>(begin: 0, end: 1).animate(_text_1_controller);

    _text_2_Controller = AnimationController(
      duration: const Duration(milliseconds: pageViewAnimationDuration),
      vsync: this,
    );
    _text_2_animation =
        Tween<double>(begin: 0, end: 1).animate(_text_2_Controller);
  }

  @override
  void dispose() {
    _text_1_controller.dispose();
    _text_1_controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
   
    /// 执行动画，这里需要将两个text的动画相反执行，就可满足效果
    if (widget.showAge == true) {
      _text_1_controller.forward();
      _text_2_Controller.reverse();
    } else {
      _text_1_controller.reverse();
      _text_2_Controller.forward();
    }

    List<Widget> children = [];
    children.add(
      SizedBox(
        height: 24,
      ),
    );

    /// 标题和logo的间距
    children.add(
      SizedBox(
        height: 16,
      ),
    );

    if (isFirstShow) {
      /// 第一次显示时，不显示文字渐变动画
      isFirstShow = false;
      children.add(
        _buildFadeTransitionWidget(
          animation: null,
          text: "文字1 标题",
          fontSize: 24,
          fontWeight: FontWeight.w600,
          fontColor: ConstantColor.brandGrey,
        ),
      );
      children.add(
        SizedBox(
          height: 4,
        ),
      );

      children.add(
        _buildFadeTransitionWidget(
          animation: null,
          text: "文字1 描述",
          fontSize: 16,
          fontWeight: FontWeight.normal,
          fontColor: ConstantColor.brandGrey,
        ),
      );
    } else {
      children.add(
        Stack(
          children: [
            _buildFadeTransitionWidget(
              animation: _text_1_animation,
              text: "文字2 标题",
              fontSize: 24,
              fontWeight: FontWeight.w600,
              fontColor: ConstantColor.brandGrey,
            ),
            _buildFadeTransitionWidget(
              animation: _text_2_animation,
              text: "文字2 标题",
              fontSize: 24,
              fontWeight: FontWeight.w600,
              fontColor: ConstantColor.brandGrey,
            ),
          ],
        ),
      );
      children.add(
        SizedBox(
          height: 4,
        ),
      );

      children.add(
        Stack(
          children: [
            _buildFadeTransitionWidget(
              animation: _text_1_animation,
              text: "文字1 - 描述",
              fontSize: 16,
              fontWeight: FontWeight.normal,
              fontColor: ConstantColor.brandGrey,
            ),
            _buildFadeTransitionWidget(
              animation: _text_2_animation,
              text: "文字2 - 描述",
              fontSize: 16,
              fontWeight: FontWeight.normal,
              fontColor: ConstantColor.brandGrey,
            ),
          ],
        ),
      );
    }

    return Container(
      color: Colors.white,
      width: 311,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Expanded(
            child: Column(
              children: children,
            ),
          ),
        ],
      ),
    );
  }

  _buildFadeTransitionWidget({
    Animation<double>? animation,
    required String text,
    required double fontSize,
    required FontWeight fontWeight,
    required Color fontColor,
  }) {
    if (animation != null) {
      return Center(
        child: FadeTransition(
          opacity: animation,
          child: Text(
            text,
            overflow: TextOverflow.ellipsis,
            maxLines: 1,
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: fontSize,
              fontWeight: fontWeight,
              color: fontColor,
            ),
          ),
        ),
      );
    }
    return Center(
      child: Text(
        text,
        overflow: TextOverflow.ellipsis,
        maxLines: 1,
        textAlign: TextAlign.center,
        style: TextStyle(
          fontSize: fontSize,
          fontWeight: fontWeight,
          color: fontColor,
        ),
      ),
    );
  }
}

实现思路：
从动画效果上来，是之前的文字渐变消失，之后的文字渐变出现，这两个动画是同时执行的，那么我当时的思路是用两层Text组件叠放在一起，用Stack组件进行包裹，然后上下两层Text组件执行的动画相反即可满足。

后续还有些动画，持续更新~