Flutter基础动画（一）

介绍

Flutter支持多种类型的动画，包括Tween动画、物理动画、Hero动画、交错动画等。Tween动画是最常用的一种动画类型，它通过指定起始值和结束值来创建一个动画。物理动画则是基于物理规律的动画，可以模拟真实的物理效果。Hero动画可以在不同的屏幕之间平滑地过渡，非常适合用于页面切换的动画效果。交错动画则可以让多个动画同时进行，从而创造出更加生动的效果。
Flutter的动画还支持自定义动画，开发者可以通过继承Animation类来实现自己的动画效果。同时，Flutter还提供了丰富的动画插值器和曲线，可以让开发者更加灵活地控制动画的进度和效果。
下面将介绍几种基础动画

1.AnimatedContainer

AnimatedContainer是Flutter中的一个动画组件，它可以在一定时间内平滑地改变容器的属性，如大小、颜色、边框、圆角等。使用AnimatedContainer可以让UI更加生动、流畅，增强用户体验。
AnimatedContainer的使用非常简单，只需要在需要动画的属性上添加一个动画控制器即可。例如，如果想要在5秒内将容器的高度从100变为200，可以这样写：

AnimatedContainer(
  duration: Duration(seconds: 5),
  height: 200,
);

在这个例子中，我们设置了动画的时长为5秒，将容器的高度从原来的值（默认为0）平滑地变为200。
除了高度，AnimatedContainer还可以控制宽度、颜色、边框、圆角等属性的动画。例如，如果想要在2秒内将容器的颜色从红色变为蓝色，可以这样写：

AnimatedContainer(
  duration: Duration(seconds: 2),
  color: Colors.blue,
);

AnimatedContainer

下面写一个随机生成背景色，圆角以及外间距的示例：

late Color color;
late double borderRadius;
late double margin;
double generateBorderRadius() => Random().nextDouble() * 64;
double generateMargin() => Random().nextDouble() * 64;
Color generateColor() => Color(0xFFFFFFFF & Random().nextInt(0xFFFFFFFF));
AnimatedContainer(
  margin: EdgeInsets.all(margin),
  decoration: BoxDecoration(
    color: color,
    borderRadius: BorderRadius.circular(borderRadius),
  ),
  duration: const Duration(milliseconds: 400),
),

下面写一个按钮来随机生成颜色，间距以及圆角

void change() {
  setState(() {
    color = generateColor();
    borderRadius = generateBorderRadius();
    margin = generateMargin();
  });
}
ElevatedButton(
  child: const Text(
    'change',
  ),
  onPressed: () => change(),
),