Flutter 实现淡入淡出（Fade）动画效果

前言

我们介绍了几篇 Flutter 的动画控制类，相信大家对动画也有了一定的了解，可以通过这些基础的动画控制类实现自己想要的动画效果。在 Flutter 中也提供了一些封装好的动画组件，以便我们快速应用。 本篇我们来介绍渐现效果 —— AnimatedOpacity。

AnimatedOpacity 简介

顾名思义，AnimatedOpacity 就是用于动态展示组件的透明度。实际上，它实现的是将其子组件的透明度动态地从初始值过渡到指定值的动画效果。AnimatedOpacity的构造方法如下：

const AnimatedOpacity({
  Key? key,
  this.child,
  required this.opacity,
  Curve curve = Curves.linear,
  required Duration duration,
  VoidCallback? onEnd,
  this.alwaysIncludeSemantics = false,
}) 

对应的参数为：

• child：要控制透明度的子组件；
• opacity：最终的透明度值，需要是介于0-1之间的值；
• curve：动效曲线，默认是线性的Curves.linear，可以使用 Curves 来构建曲线效果；
• duration：动效时长ÿ