• 它是一个StatefulWidget, 初始化传入一个Listenable
• 通过Listenable内部绑定了setState方法去触发子类的 build方法.
• 子类通过继承AnimatedWidget,通过传入的Animation就能触发build方法

• 以AnimateBuilder为例：

  _AnimatedState
  ....
  
    @override
  
  void initState() {
  
  super.initState();
  
      widget.listenable.addListener(_handleChange);
  
  }
  
  void _handleChange() {
  
       setState(() {
  
    // The listenable's state is our build state, and it changed already.
  
       });
  
  }
  
    @override
  
    Widget build(BuildContext context) => widget.build(context);
  
  AnimatedWidget
  
  ....
  
    @protected
  
    Widget build(BuildContext context);
  
  class AnimatedBuilder extends AnimatedWidget
  
  ....
  
   @override
  
    Widget build(BuildContext context) {
  
      return builder(context, child);
  
    }
  

小结:

• 子类重写父类的build方法,父类完成动画相关的事件半丁,子类在build方法触发时根据当前的animation的value来更新界面。基于这个设计模式,Flutter提供了如下相关Widget:

  DiagnosticableTree (diagnostics.dart)
  Widget (framework.dart)
  
      StatefulWidget (framework.dart)
  
          AnimatedWidget (transitions.dart)
  
              AnimatedModalBarrier (modal_barrier.dart)
  
              _Shaker (input_decorator.dart)
  
              _TabStyle (tabs.dart)
  
              PositionedTransition (transitions.dart)
  
              RotationTransition (transitions.dart)
  
              DefaultTextStyleTransition (transitions.dart)
  
              RelativePositionedTransition (transitions.dart)
  
              SlideTransition (transitions.dart)
  
              AnimatedBuilder (transitions.dart)
  
              SizeTransition (transitions.dart)
  
              DecoratedBoxTransition (transitions.dart)
  
              ScaleTransition (transitions.dart)
  
              AlignTransition (transitions.dart)
  

• 上面包括了常用的各种属性动画,如果开发时动画种类比较单一则拿来即用。

• 以上的Widget是对Widget进行了一次包装,min 命名上在原来的Widget后面加上了Translation.