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

5次阅读

共计 1937 个字符，预计需要花费 5 分钟才能阅读完成。

什么是动画呢？动画实际上就是不同的图片间断起来造成的。flutter 为咱们提供了一个 AnimationController 来对动画进行详尽的管制，不过间接是用 AnimationController 是比较复杂的，如果只是对一个 widget 的属性进行批改，能够做成动画吗？

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

如果你只是心愿动画展现 widget 的属性的变动，比方比方长度，高度，宽度或者色彩等进行动态变化，那么能够间接应用 flutter 提供的 AnimatedContainer。

先来看下 AnimatedContainer 的定义：

class AnimatedContainer extends ImplicitlyAnimatedWidget

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

这个 widget 会主动依据 widget 属性的变动生成对应的动画。在应用上十分的简略。

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());
            });
          }

最初实现的成果如下：

如果你只是心愿应用简略的 widget 动画，那么 AnimatedContainer 可能是你最好的抉择。

本文的例子：https://github.com/ddean2009/learn-flutter.git

正文完