Flutter 37: 图解 Flutter 基本动画 (一)

小菜一直对动画不太熟悉，最近学习了一些关于动画的皮毛知识，网上资料很多，小菜按自己的理解整理一下。

Animation

      Animation 可以生成动画过程中的值，生成的值并非单一的 double 也可以是 Size/Color 等；Animation 可以获取状态但无法获取屏幕显示内容。

AnimationController

      AnimationController 小菜理解为 Animation 控制器，实际也是一个特殊的 Animation，在屏幕刷新时会生成一个新的值；使用时需要传递 vsync 值，用来防止屏幕外动画，vsync 值可以继承 TickerProviderStateMixin，若当前页面只有一个 controller 也可以用 SingleTickerProviderStateMixin；

      AnimationController 有两个常用方法：

1. forward() 方法用来开始动画，即从无到有；
2. reverse() 方法用来反向开始动画，即从有到无；

动画分类

      Flutter 提供了两种动画，分别是 Tween Animation 补间动画和 Physics-based Animation 基于物理动画；小菜理解为线性匀速动画和非线性动画；

TweenAnimation

      Tween 动画是无状态的，只是在固定时间内均匀生成 begin 和 end 的值，通过 animation.value 来获取；

AnimationController controller = AnimationController(duration: const Duration(milliseconds: 300), vsync: this);
Animation<double> animation = Tween(begin: 0.0, end: 1.0).animate(controller);
animation.addListener(() {
    setState(() {});
});

CurvedAnimation

      CurvedAnimation 的动画过程是非线性的，curve 种类很多，比较符合日常生活的物理过程，例如先快后慢或先增长到一个峰值再降低等；curve 的动画过程也可以自定义函数等；

AnimationController controller = AnimationController(duration: const Duration(milliseconds: 2000), vsync: this);
CurvedAnimation curve = CurvedAnimation(parent: controller, curve: Curves.fastOutSlowIn);

      无论是线性动画还是非线性动画，均可获取动画过程中的值，根据这个值可以灵活的使用在需要的场景；使用动画场景较多的是 透明度/旋转/缩放/平移 等。

AnimatedWidget

      Flutter 很贴心的提供了自带动画属性的 Widget 极大的方便我们使用简单的动画，涵盖 透明度/旋转/缩放/平移 等常用的动画属性，使用时非常方便；但是缺点也相对明显，这些 Widget 属性相对专一，若需要多种动画属性不太适合；

      简单介绍几个小菜日常使用的动画组件；

XXXTransition

FadeTransition 显隐性

FadeTransition(opacity: animation, child: FlutterLogo(size: 100.0))

ScaleTransition 缩放

ScaleTransition(scale: animation, child: FlutterLogo(size: 100.0))

RotationTransition 旋转

RotationTransition(turns: animation, child: FlutterLogo(size: 100.0))

Transform. XXX

Transform.scale 缩放

Transform.scale(scale: curve.value, child: FlutterLogo(size: 100.0))

Transform.rotate 旋转

Transform.rotate(angle: curve.value * pi, child: FlutterLogo(size: 100.0))

Transform.translate 平移

Transform.translate(offset: Offset(100.0 * curve.value, 0.0), child: FlutterLogo(size: 100.0))

AnimatedXXX

AnimatedOpacity 透明度

AnimatedOpacity(opacity: animation.value, duration: Duration(milliseconds: 2000), child: FlutterLogo(size: 100.0))

核心代码：

class _AnimationPageState extends State<AnimationPage03> with TickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animation;
  CurvedAnimation curve;
  bool isForward = false;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
        duration: const Duration(milliseconds: 2000), vsync: this);
    curve = CurvedAnimation(parent: controller, curve: Curves.fastOutSlowIn);
    animation = Tween(begin: 0.0, end: 1.0).animate(controller);
    animation.addListener(() {
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: AppBar(
          title: Text('Animation Demo'),
        ),
        body: Stack(children: <Widget>[
          ListView(children: <Widget>[
            Padding(
                padding: EdgeInsets.all(5.0),
                child: Row(children: <Widget>[
                  Expanded(
                      flex: 1, child: Center(child: Text('FadeTransition'))),
                  Expanded(
                      flex: 1, child: Center(child: Text('ScaleTransition')))
                ])),
            Row(children: <Widget>[
              Expanded(
                  flex: 1,
                  child: FadeTransition(
                      opacity: animation, child: FlutterLogo(size: 100.0))),
              Expanded(
                  flex: 1,
                  child: ScaleTransition(
                      scale: animation, child: FlutterLogo(size: 100.0)))
            ]),
            Padding(
                padding: EdgeInsets.all(5.0),
                child: Row(children: <Widget>[
                  Expanded(
                      flex: 1,
                      child: Center(child: Text('RotationTransition'))),
                  Expanded(
                      flex: 1, child: Center(child: Text('AnimatedOpacity')))
                ])),
            Row(children: <Widget>[
              Expanded(
                  flex: 1,
                  child: RotationTransition(
                      turns: animation, child: FlutterLogo(size: 100.0))),
              Expanded(
                  flex: 1,
                  child: AnimatedOpacity(
                      opacity: animation.value,
                      duration: Duration(milliseconds: 2000),
                      child: FlutterLogo(size: 100.0)))
            ]),
            Padding(
                padding: EdgeInsets.all(5.0),
                child: Row(children: <Widget>[
                  Expanded(
                      flex: 1,
                      child: Center(child: Text('Transform.translate'))),
                  Expanded(
                      flex: 1, child: Center(child: Text('Transform.rotate')))
                ])),
            Row(children: <Widget>[
              Expanded(
                  flex: 1,
                  child: Transform.translate(
                      offset: Offset(100.0 * curve.value, 0.0),
                      child: FlutterLogo(size: 100.0))),
              Expanded(
                  flex: 1,
                  child: Transform.rotate(
                      angle: curve.value * pi, child: FlutterLogo(size: 100.0)))
            ]),
            Padding(
                padding: EdgeInsets.all(5.0),
                child: Row(children: <Widget>[
                  Expanded(
                      flex: 1, child: Center(child: Text('Transform.scale'))),
                  Expanded(flex: 1, child: Center(child: Text('Position')))
                ])),
            Row(children: <Widget>[
              Expanded(
                  flex: 1,
                  child: Transform.scale(
                      scale: curve.value, child: FlutterLogo(size: 100.0))),
            ])
          ]),
          posWid()
        ]),
        floatingActionButton: new FloatingActionButton(
            tooltip: 'Animation',
            child: new Icon(Icons.lightbulb_outline),
            onPressed: () {
              isForward ? controller.reverse() : controller.forward();
              isForward = !isForward;
            }));
  }

  Widget posWid() {
    return Positioned(
        bottom: 16 + 314 * animation.value,
        right: 16 + 84 * animation.value,
        child: Container(child: FlutterLogo(size: 100.0)));
  }
}

---

      小菜对动画的研究不深，仅整理一些基本的动画方法，如有不对的地方希望多多指导!