当子组件变化时执行动画，需要指定子组件的key进行标识。动画方式可以自定义，能指定动画时长、动画曲线等属性。

相关组件

AnimatedCrossFade

AnimatedSwitcher基本使用

  1.    <br />【child】 : 孩子组件   【Widget】<br />【duration】 : 动画时长  【Duration】<br />【switchOutCurve】 : 切出曲线  【Curves】<br />【switchInCurve】 : 切入曲线  【Curves】<br />【switchInCurve】 : 切入曲线  【Curves】<br />【transitionBuilder】 : 动画构造器  【Widget Function(Widget, Animation<double>)】<br />![108.gif](https://cdn.nlark.com/yuque/0/2020/gif/326147/1589449310712-630a1245-5047-4df5-ab20-560687248523.gif#align=left&display=inline&height=119&margin=%5Bobject%20Object%5D&name=108.gif&originHeight=119&originWidth=403&size=164995&status=done&style=none&width=403)
  1. import 'package:flutter/material.dart';
  2. class CustomAnimatedSwitcher extends StatefulWidget {
  3.   @override
  4.   _CustomAnimatedSwitcherState createState() => _CustomAnimatedSwitcherState();
  5. }
  7. class _CustomAnimatedSwitcherState extends State<CustomAnimatedSwitcher> {
  8.   int _count = 0;
  10.   @override
  11.   Widget build(BuildContext context) {
  12.     return Container(
  13.       child: Wrap(
  14.         crossAxisAlignment: WrapCrossAlignment.center,
  15.         children: <Widget>[
  16.           _buildMinusBtn(),
  17.           SizedBox(width:80,child: _buildAnimatedSwitcher(context)),
  18.           _buildAddBtn()
  19.         ],
  20.       ),
  21.     );
  22.   }
  24.   Widget _buildAnimatedSwitcher(BuildContext context) =>
  25.       AnimatedSwitcher(
  26.           duration: const Duration(milliseconds: 400),
  27.           transitionBuilder: (Widget child, Animation<double> animation) =>
  28.               ScaleTransition(
  29.                   child: RotationTransition(turns: animation, child: child),
  30.                   scale: animation),
  31.           child: Text(
  32.             '$_count',
  33.             key: ValueKey<int>(_count),
  34.             style: Theme.of(context).textTheme.display3,
  35.           ),
  36.         );
  38.   Widget _buildMinusBtn() {
  39.    return MaterialButton(
  40.         padding: EdgeInsets.all(0),
  41.         textColor: Color(0xffFfffff),
  42.         elevation: 3,
  43.         color: Colors.red,
  44.         highlightColor: Color(0xffF88B0A),
  45.         splashColor: Colors.red,
  46.         child: Icon(
  47.           Icons.remove,
  48.           color: Colors.white,
  49.         ),
  50.        shape: CircleBorder(
  51.          side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),
  52.        ),
  53.         onPressed: () => setState(() => _count -= 1));
  54.   }
  56.   Widget _buildAddBtn() => MaterialButton(
  57.         padding: EdgeInsets.all(0),
  58.         textColor: Color(0xffFfffff),
  59.         elevation: 3,
  60.         color: Colors.blue,
  61.         highlightColor: Color(0xffF88B0A),
  62.         splashColor: Colors.red,
  63.         child: Icon(
  64.           Icons.add,
  65.           color: Colors.white,
  66.         ),
  67.         shape: CircleBorder(
  68.           side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),
  69.         ),
  70.         onPressed: () => setState(() => _count += 1));
  71. }