简介

什么是动画呢？动画实际上就是不同的图片间断起来造成的。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());            });          }

最初实现的成果如下：

总结

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

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