flutter 系列之: 做一个修改组件属性的动画

2023-05-09
广东
本文字数：1528 字
阅读完需：约 5 分钟

简介

什么是动画呢？动画实际上就是不同的图片连续起来形成的。flutter 为我们提供了一个 AnimationController 来对动画进行详尽的控制，不过直接是用 AnimationController 是比较复杂的，如果只是对一个 widget 的属性进行修改，可以做成动画吗？

答案是肯定的，一起来看看吧。

flutter 中的动画 widget

如果你只是希望动画展示 widget 的属性的变化，比如比如长度，高度，宽度或者颜色等进行动态变化，那么可以直接使用 flutter 提供的 AnimatedContainer。

先来看下 AnimatedContainer 的定义：

class AnimatedContainer extends ImplicitlyAnimatedWidget

复制代码

AnimatedContainer 继承自 ImplicitlyAnimatedWidget，什么是 ImplicitlyAnimatedWidget 呢？翻译过来就是隐式的动画 widget。

这个 widget 会自动根据 widget 属性的变化生成对应的动画。在使用上非常的简单。

AnimatedContainers 使用举例

AnimatedContainer 是一个 container,所以它可以包含 child 属性，但是 AnimatedContainer 的动画只是针对容器本身来说的，动画并不会应用到它的 child 中。

所以为了展示 widget 本身的变化，我们可以给 widget 设置一个 BoxDecoration，设置它的颜色跟 borderRadius。

如下所示：

body: Center(          child: AnimatedContainer(            width: 200,            height: 200,            decoration: BoxDecoration(              color: Colors.blue,              borderRadius: BorderRadius.circular(10),            ),            duration: const Duration(seconds: 1),            curve: Curves.easeInBack,          ),        )

复制代码

上面的代码会在界面上展示一个长度和宽度都等于 200 的 Container,它的背景是 blue，还有一个圆形的 borderRadius。

并且我们定义了动画的 duration 和变动曲线的方式。

接下来我们只需要在 setState 方法中对 AnimatedContainer 中的属性进行变化，就会自动触发动画效果。

为了实现这个动画的功能，我们需要把 width，height 等属性用动态变量存储起来，这样才可以在 setState 的时候对属性进行变动。

我们将这些属性放在一个 StatefulWidget 的 State 中：

  double _width = 100;  double _height = 100;  Color _color = Colors.blue;  BorderRadiusGeometry _borderRadius = BorderRadius.circular(10);

复制代码

这样我们在 build 方法中使用上面定义的属性：

        body: Center(          child: AnimatedContainer(            width: _width,            height: _height,            decoration: BoxDecoration(              color: _color,              borderRadius: _borderRadius,            ),            duration: const Duration(seconds: 1),            curve: Curves.easeInBack,          ),        )

复制代码

然后在 floatingActionButton 的 onPressed 中修改这些属性，从而实现 widget 属性变化的动画功能：

floatingActionButton: FloatingActionButton(          onPressed: () {            setState(() {              final random = Random();
              _width = random.nextInt(200).toDouble();              _height = random.nextInt(200).toDouble();
              _color = Color.fromRGBO(                random.nextInt(256),                random.nextInt(256),                random.nextInt(256),                1,              );
              _borderRadius =                  BorderRadius.circular(random.nextInt(10).toDouble());            });          }