Flutter 中使用 AnimatedContainer 让你的 Widget 动起来

2,485 阅读3分钟

这是我参与更文挑战的第3天,活动详情查看: 更文挑战

前言

我是 Zero

如果你的 App 页面简洁、清晰、主次分明,那么你是👍🏻

要是再加点的动画,那么你就是 👍🏻👍🏻

要是你觉得我的文章有所收获并且点赞支持,那么你就是 👍🏻👍🏻👍🏻

效果对比

下面两种效果你会选左边还是右边?

01.gif02.gif
AnimatedContainerContainer

**

在差不多代码量的情况下,我会选择左边的,因为过渡带有动画,更加的自然流畅,反之右边的则非常的突兀

上代码

先看看代码咋实现的

/// 这里仅定义出核心代码,具体代码可以在 GitHub 上查看
/// GitHub 仓库地址: https://github.com/yy1300326388/flutter_widgets
// 定义属性
double width = 200;
double height = 100;
double padding = 10;
Color color = Colors.blueAccent;
Alignment alignment = Alignment.center;

// 左边
AnimatedContainer(
  width: width,
  height: height,
  padding: EdgeInsets.all(padding),
  color: color,
  alignment: alignment,
  duration: const Duration(milliseconds: 500),
  child: Text(
    'ZeroFlutter',
    style: TextStyle(
      color: Colors.white,
    ),
  ),
)
// 右边
Container(
  width: width,
  height: height,
  padding: EdgeInsets.all(padding),
  color: color,
  alignment: alignment,
  child: Text(
    'ZeroFlutter',
    style: TextStyle(
      color: Colors.white,
    ),
  ),
),

/// 通过点击 FloatingActionButton 调用此方法,改变宽高
void play() async {
    var width = Random.secure().nextInt(150);
    var height = Random.secure().nextInt(100);
    this.width = width.toDouble() + 200;
    this.height = height.toDouble() + 100;
    setState(() {});
}

上面可以看出我们只是使用了 AnimatedContainer Widget 并设置了一个 duration 动画执行时长就很简单的实现了上面的左边的效果,是非常简单方便的

多种动画组合

在实际情况下我们可能是多个属性同时在变化,那么 AnimatedContainer 有哪些属性是支持动画变换的呢?我们先看一个复杂效果 03.gif

上代码

/// 这里除宽高外,增加了 padding、颜色、对齐方式
void play() async {
    var width = Random.secure().nextInt(150);
    var height = Random.secure().nextInt(100);
    var padding = Random.secure().nextInt(20);
    var a = Random.secure().nextInt(256);
    var r = Random.secure().nextInt(256);
    var g = Random.secure().nextInt(256);
    var b = Random.secure().nextInt(256);
    var x = Random.secure().nextInt(3);
    var y = Random.secure().nextInt(3);

    this.width = width.toDouble() + 200;
    this.height = height.toDouble() + 100;
    this.padding = padding.toDouble();
    this.color = Color.fromARGB(255, r, g, b);
    this.alignment = Alignment(x - 1, y - 1);
    setState(() {});
  }

从上面属性可以推理出几乎所有 AnimatedContainer 可以改变的属性,这里都可以做成动画效果

属性列表

  • width
  • height
  • padding
  • margin
  • color
  • alignment
  • border
  • borderRadius
  • boxShadow
  • image
  • gradient
  • transform
  • 等等

这里就不一一列举了,具体可以翻阅 AnimatedContainer 源码即可

动画曲线

动画效果要显的灵动一些就需要用到动画曲线,AnimatedContainer 为我们设置了 curve 属性很方面的就可以添加上动画曲线。

AnimatedContainer(
  ...
  duration: const Duration(milliseconds: 500),
  // 这里设置动画曲线
  curve: Curves.easeInBack,
  ...
)

一些常见的动画曲线可以 查看 Curves 类,有各种动画曲线的效果 image.png

最后来个更复杂的

04.gif 05.gif 这里增加了 borderColorborderWidthradiusboxShadow 这些属性参数进来,依然可以自然的产生过渡动画效果,期待你使用这些参数添加上很好的创意。

源码仓库

基于 Flutter 2.2.1 版本

参考链接

关注专栏

  • 此文章已收录到下面👇 的专栏,可以直接关注
  • 更多文章继续阅读|系列文章持续更新

👏 欢迎点赞➕收藏➕关注,有任何问题随时在下面👇评论,我会第一时间回复哦