Flutter 组件分析之 AnimatedAlign

本系列教程基于Flutter widget, 意在为Flutter 入门提供基础建设. 重点在讲解widget 的用法,参数以及扩展.
适宜人群: 入门

引语

AnimatedAlign 是一个隐式动画的组件，当我们的对齐方式发生改变的时候。就会执行移动的动画，帮助我们更快的构建界面。那么如此使用简单的组件内部是如何实现的呢？

AnimatedAlign

AnimatedAlign 继承于 ImplicitlyAnimatedWidget , 具体变化的逻辑都在ImplicitlyAnimatedWidget 中已经实现, 而 AnimatedAlign 则是负责实现具体的参数计算以及界面布局等等。这就相当于帮我们实现了一个 AnimationController ，我们仅仅需要告诉 widget 变化的始末即可。

在 AnimatedAlign 中，除了允许修改 alignment、heightFactor、widthFactor 这些默认的 Align 的参数外，也允许修改 duration、curve 。通过这些参数就可以更改动画的曲线

AnimatedAlign 本身 build 中也是返回了一个 Align ，唯一改变的是会通过 evaluate 方法去估算当前动画执行进度展示的状态。

这里的动画插值器也是通过内部的forEachTween , 将内部的插值器逐个赋值从而完成动画曲线的管理。

@override
void forEachTween(TweenVisitor<dynamic> visitor) {
  _alignment = visitor(_alignment, widget.alignment, (dynamic value) => AlignmentGeometryTween(begin: value as AlignmentGeometry)) as AlignmentGeometryTween?;
  if(widget.heightFactor != null) {
    _heightFactorTween = visitor(_heightFactorTween, widget.heightFactor, (dynamic value) => Tween<double>(begin: value as double)) as Tween<double>?;
  }
  if(widget.widthFactor != null) {
    _widthFactorTween = visitor(_widthFactorTween, widget.widthFactor, (dynamic value) => Tween<double>(begin: value as double)) as Tween<double>?;
  }
}