Flutter——内置动画 API：灵动优雅，尽在指尖

Flutter——内置动画 API：赋予 Flutter 世界活力

Flutter 的内置动画 API 使开发者能够轻松为应用程序添加动画效果。这些 API 包括 SlideTransition、AnimatedSwitcher、FadeTransition、Hero 动画、ScaleTransition、RotationTransition 和 Curved Animation。

SlideTransition：平移过渡动画

SlideTransition 允许您沿某个轴线平移一个子控件。您可以使用 offset 来承载x，y轴数据。需要注意的是 Offset(0.0, 0.0) 中的数值都是 倍数，也就是说 SlideTransition 只支持按 widget 本身长宽的倍数位移，不支持具体的数值的位移操作。

SlideTransition(
  position: Animation<Offset>(
    curve: Curves.easeInOut,
    duration: Duration(seconds: 1),
    tween: Tween<Offset>(
      begin: Offset.zero,
      end: Offset(1.0, 0.0),
    ),
  ),
  child: MyWidget(),
);

AnimatedSwitcher：动画切换

AnimatedSwitcher 提供了一个简单的方法来切换子控件。您可以使用 child 属性来指定要切换的子控件，然后使用 duration 和 transitionBuilder 属性来指定切换动画的持续时间和动画类型。

AnimatedSwitcher(
  duration: Duration(milliseconds: 500),
  transitionBuilder: (child, animation) => ScaleTransition(
    scale: animation,
    child: child,
  ),
  child: MyWidget(),
);

FadeTransition：渐隐渐现过渡动画

FadeTransition 使您能够以渐隐渐现的方式切换子控件。您可以使用 opacity 属性来指定子控件的不透明度。

FadeTransition(
  opacity: Animation<double>(
    curve: Curves.easeInOut,
    duration: Duration(seconds: 1),
    tween: Tween<double>(
      begin: 0.0,
      end: 1.0,
    ),
  ),
  child: MyWidget(),
);

Hero 动画：共享元素动画

Hero 动画允许您在两个页面之间共享元素，并在元素之间创建动画过渡效果。您可以使用 Hero 属性来指定要共享的元素，然后使用 HeroController 属性来控制动画的开始和结束。

Hero(
  tag: 'my-hero',
  child: MyWidget(),
);

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SecondPage(),
  ),
);

ScaleTransition：缩放过渡动画

ScaleTransition 使您能够缩放子控件。您可以使用 scale 属性来指定子控件的缩放比例。

ScaleTransition(
  scale: Animation<double>(
    curve: Curves.easeInOut,
    duration: Duration(seconds: 1),
    tween: Tween<double>(
      begin: 0.0,
      end: 1.0,
    ),
  ),
  child: MyWidget(),
);

RotationTransition：旋转过渡动画

RotationTransition 使您能够旋转子控件。您可以使用 rotation 属性来指定子控件的旋转角度。

RotationTransition(
  turns: Animation<double>(
    curve: Curves.easeInOut,
    duration: Duration(seconds: 1),
    tween: Tween<double>(
      begin: 0.0,
      end: 1.0,
    ),
  ),
  child: MyWidget(),
);

Curved Animation：曲线动画

Curved Animation 允许您为动画指定一个曲线。您可以使用 curve 属性来指定动画的曲线。

CurvedAnimation(
  curve: Curves.easeInOut,
  parent: animationController,
);

结论

Flutter 内置动画 API 提供了多种动画类型，包括 SlideTransition、AnimatedSwitcher、FadeTransition、Hero 动画、ScaleTransition、RotationTransition 和 Curved Animation。这些 API 使得在 Flutter 应用程序中添加动画变得非常简单。