Flutter 动画组件一：AnimatedContainer

Flutter 系列文章 总体目录

开始的时候我以为AnimatedContainer组件可以直接设置2个边界值，调用启动动画就可以了，实际并不是这样的，AnimatedContainer和其他的容器类控件一样，设置各种属性，当我们通过setState改变其属性值时就会出现动画效果，直接上代码：

import 'package:flutter/material.dart';

///
/// des:
/// [@author]：
/// [@date]： 2019-04-30 10:06
///
class AnimatedContainerDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _AnimatedContainerDemo();
}

class _AnimatedContainerDemo extends State<AnimatedContainerDemo> {
  double _height = 100;
  Color _color = Colors.red;

  _changeValue() {
    setState(() {
      _height = _height == 100 ? 200 : 100;
      _color = _color == Colors.red ? Colors.blue : Colors.red;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        AnimatedContainer(
          color: _color,
          width: 200,
          height: _height,
          curve: Curves.elasticIn,
          duration: Duration(seconds: 1),
        ),
        RaisedButton(
          child: Text('动画'),
          onPressed: _changeValue,
        ),
      ],
    );
  }
}

点击button通过setState改变AnimatedContainer的宽、高、颜色等信息，这个改变不是马上改变，而是有一个1秒的 动画。

下面是AnimatedContainer的属性说明：

属性	说明
alignment	对齐方式
padding 、margin	padding 、margin
color	颜色
decoration	具体看这里：https://blog.csdn.net/mengks1987/article/details/84856456#2BoxDecoration_25
foregroundDecoration	同decoration，区别是foregroundDecoration代表前置
width、height	width、height
child	子元素
curve	动画执行的曲线，默认是线性，具体可以看Curves源代码，有各种曲线，比如加速度、减速度等
duration	持续时间