Flutter实战一Flutter聊天应用（三）

我们可以向控件添加动画效果，使应用程序的用户体验更加流畅和直观。在这篇文章中，我们将在聊天消息列表中添加基本动画效果。当用户发送新消息时，我们不要将其简单地显示在消息列表中，我们将从列表底部垂直放置消息。

Flutter中的动画被封装为包含类型值和状态（如前进、后退、完成和关闭）的Animation对象，我们可以将动画对象附加到控件或监听动画对象的更改。基于对动画对象属性的更改，框架可以修改窗口控件的显示方式并重新构建窗口控件。

使用AnimationController类来指定动画应该如何运行，AnimationController类可以让我们定义动画的重要特征，例如其持续时间和播放方向（正向或反向）。当创建AnimationController对象时，我们需要传递一个vsync参数。此选项将当前窗口控件树保留在显示内存中，直到Flutter的渲染引擎完成刷新周期。想要将我们的ChatScreenState作为vsync，需要在ChatScreenState类定义中包含一个TickerProviderStateMixin。

class ChatScreenState extends State<ChatScreen> with TickerProviderStateMixin {
  final List<ChatMessage> _messages = <ChatMessage>[];
  final TextEditingController _textController = new TextEditingController();
  //...

在ChatScreenState类中修改_handleSubmitted()方法，在此方法中，实例化一个AnimationController对象并将动画的运行时间指定为700毫秒。在这里我们选择了较长的持续时间来减慢动画效果，以便我们可以逐渐看到转换。实际上，我们在后面会设置较短的持续时间，并在运行应用程序时禁用慢速模式。

在ChatMessage类定义中，添加一个成员变量来存储动画控制器。

class ChatMessage extends StatelessWidget {
  ChatMessage({this.text, this.animationController});
  final String text;
  final AnimationController animationController;
  //...

将动画控制器附加到新的ChatMessage实例，并指定每当将新消息添加到聊天列表中时动画应播放。

class ChatScreenState extends State<ChatScreen> with TickerProviderStateMixin {
  //...
  void _handleSubmitted(String text) {
    _textController.clear();
    ChatMessage message = new ChatMessage(
      text: text,
      animationController: new AnimationController(
        duration: new Duration(milliseconds: 700),
        vsync: this
      )
    );
    setState((){
      _messages.insert(0, message);
    });
    message.animationController.forward();
  }
  //...
}

修改ChatMessageListItem对象的build()方法以返回一个SizeTransition控件，该控件包装我们之前定义的Container控件。SizeTransition类提供了一个动画效果，其子控件的宽度或高度乘以给定的大小因子值。

CurvedAnimation对象与SizeTransition类结合使用可以产生一个简单的动画效果。缓解效果会使消息在动画开始时快速滑动，并减慢速度直到停止。

class ChatMessage extends StatelessWidget {
  //...
  Widget build(BuildContext context) {
    return new SizeTransition(
      sizeFactor: new CurvedAnimation(
        parent: animationController,
        curve: Curves.easeOut
      ),
      axisAlignment: 0.0,
      child: new Container(
        margin: const EdgeInsets.symmetric(vertical: 10.0),
        child: new Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            new Container(
              margin: const EdgeInsets.only(right: 16.0),
              child: new CircleAvatar(child: new Text(_name[0])),
            ),
            new Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                new Text(_name, style: Theme.of(context).textTheme.subhead),
                new Container(
                  margin: const EdgeInsets.only(top: 5.0),
                  child: new Text(text),
                )
              ]
            )
          ]
        )
      )
    );
  }
  //...
}

处理动画控制器以在我们不再需要资源时释放资源是个好习惯，下面的代码片段显示了如何通过在ChatScreenState中覆盖dispose()方法来实现此操作。在当前的应用程序中，该框架不会调用dispose()方法，因为该应用程序只有一个屏幕。在具有多个屏幕的更复杂的应用程序中，当ChatScreenState对象不再使用时，框架将调用该方法。

class ChatScreenState extends State<ChatScreen> with TickerProviderStateMixin {
  //...
  @override
  void dispose() {
    for(ChatMessage message in _messages)
      message.animationController.dispose();
    super.dispose();
  }
  //...
}

这里有一个小细节，我们的应用程序在右上角有一个“SLOW MODE”横幅。因为在默认情况下，flutter run命令使用调试构建配置。调试配置在Dart虚拟机（Dart Virtual Machine）中运行Dart代码，从而实现快速重新加载的开发周期。发布版本则是使用标准的Android和iOS工具链进行编译。

调试配置还会检查所有的断言，这有利于我们在开发过程中尽早捕获错误，但是这也会增加运行时的成本。“SLOW MODE”横幅表示启用这些检查。我们可以通过使用--profile或--release标志到flutter run来运行应用程序，而不进行这些检查。这就是我在上面提到的禁用慢速模式。

在上面代码中，我们将动画的运行时间指定为700毫秒，是为了可以看到动画的转换过程， 实际上我们可以把这个时间设置成300毫秒，或者其他更合适的时间。