AnimatedCrossFade 组件切换

将两个组件切换时呈现动画效果，可指定动画曲线、时长、对齐方式等属性。是一个非常有用的组件。

相关组件

AnimatedSwitcher

AnimatedCrossFade基本使用

   <br />【firstChild】 : 第一孩子   【Widget】<br />【secondChild】 : 第二孩子   【Widget】<br />【crossFadeState】 : 显示第几个   【CrossFadeState】<br />【duration】 : 时长   【Duration】<br />![69.gif](https://cdn.nlark.com/yuque/0/2020/gif/326147/1589444134835-b3190b02-c4b2-4f3d-b391-936010cd0f26.gif#align=left&display=inline&height=187&margin=%5Bobject%20Object%5D&name=69.gif&originHeight=187&originWidth=405&size=340630&status=done&style=none&width=405)

import 'package:flutter/material.dart';
class CustomAnimatedCrossFade extends StatefulWidget {
  @override
  _CustomAnimatedCrossFadeState createState() =>
      _CustomAnimatedCrossFadeState();
}

class _CustomAnimatedCrossFadeState extends State<CustomAnimatedCrossFade> {
  var _crossFadeState = CrossFadeState.showFirst;

  bool get isFirst => _crossFadeState == CrossFadeState.showFirst;

  @override
  Widget build(BuildContext context) {
    return Wrap(
      children: <Widget>[
        Container(
          child: AnimatedCrossFade(
            firstChild: Container(
              alignment: Alignment.center,
              width: 200,
              height: 150,
              color: Colors.orange,
              child: FlutterLogo(colors: Colors.blue, size: 100,),
            ),
            secondChild: Container(
              width: 200,
              height: 150,
              alignment: Alignment.center,
              color: Colors.blue,
              child: FlutterLogo(
                textColor: Colors.white,
                colors: Colors.orange,
                size: 100,
                style: FlutterLogoStyle.stacked,),
            ),
            duration: Duration(milliseconds: 600),

            crossFadeState: _crossFadeState,
          ),
        ),
        _buildSwitch(),
      ],

    );
  }

  Widget _buildSwitch() =>
      Switch(value: isFirst, onChanged: (v) {
        setState(() {
          _crossFadeState =
          v ? CrossFadeState.showFirst : CrossFadeState.showSecond;
        });
      });
}

AnimatedCrossFade动画曲线

   <br />【firstCurve】 : 第一曲线   【Curve】<br />【secondCurve】 : 第二曲线   【Curve】<br />【sizeCurve】 : 尺寸变化曲线   【CrossFadeState】<br />![70.gif](https://cdn.nlark.com/yuque/0/2020/gif/326147/1589444175579-1911df50-45f8-437e-a087-78867e2c7d7c.gif#align=left&display=inline&height=187&margin=%5Bobject%20Object%5D&name=70.gif&originHeight=187&originWidth=405&size=491853&status=done&style=none&width=405)

import 'package:flutter/material.dart';
class CurveAnimatedCrossFade extends StatefulWidget {
  @override
  _CurveAnimatedCrossFadeState createState() => _CurveAnimatedCrossFadeState();
}

class _CurveAnimatedCrossFadeState extends State<CurveAnimatedCrossFade> {
  var _crossFadeState = CrossFadeState.showFirst;

  bool get isFirst=> _crossFadeState == CrossFadeState.showFirst;

  @override
  Widget build(BuildContext context) {
    return Wrap(
      children: <Widget>[
        Container(
          child: AnimatedCrossFade(
            firstCurve: Curves.easeInCirc,
            secondCurve: Curves.easeInToLinear,
            sizeCurve: Curves.bounceOut,
            firstChild: Container(
              alignment: Alignment.center,
              width: 200,
              height: 80,
              color: Colors.orange  ,
              child: FlutterLogo(colors: Colors.blue,size: 50,),
            ),
            secondChild: Container(
              width: 200,
              height: 150,
              alignment: Alignment.center,
              color: Colors.blue,
              child: FlutterLogo(
                textColor: Colors.white,
                colors: Colors.orange,size: 100,style: FlutterLogoStyle.stacked,),
            ),
            duration: Duration(milliseconds: 1000),
            crossFadeState: _crossFadeState,
          ),
        ),
        _buildSwitch(),
      ],
    );
  }

  Widget _buildSwitch() => Switch(value: isFirst, onChanged: (v){
    setState(() {
      _crossFadeState= v?CrossFadeState.showFirst:CrossFadeState.showSecond;
    });
  });
}