Android 开发者的 Flutter（三） —— Flutter 中的动画与绘制

声明：阅读该文章请确保你有 Android 开发的相关知识
这是《Android 开发者的 Flutter》系列的第三篇，如果想看上一篇请参考：
Android 开发者的 Flutter（二） —— Flutter 中的 Layout 及管理

如何为 Widget 设置动画？

在 Android 中，您可以通过 XML 创建动画或 animate() 在 View 上调用该方法。在 Flutter 中，需要带动画的 Widget 可以使用动画库将动画封装在 Widget 中。

同样对 Android 的 Animators，在 Flutter 中你有一个 AnimationController 这是一个 Animation<double> 可以 pause, seek, stop 以及 reverse。它需要一个在帧同步 (vsync) 发生时发出信号的 Ticker，并且在运行时在每帧上产生0到1之间的线性插值。

然后，您创建一个或多个动画并将它们附加到控制器；例如，您可以有一个 CurvedAnimation 动画，同时使用曲线插入另一个动画的组合动画。从这个意义上说，控制器是动画进程的“master”源，并且 CurvedAnimation 负责将控制器的线性输出修改为曲线。与 Widget 一样，Flutter 中的动画可以组合使用。

在构建 Widget 树时，您随后将 Widget 的动画属性（如 FadeTransition）分配给它，并通知控制器启动动画。

让我们来看看如何编写一个 FadeTransition 动画，当您按下 FloatingActionButton 时会淡入 logo 图标：

import 'package:flutter/material.dart';

void main() {
  runApp(new FadeAppTest());
}

class FadeAppTest extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Fade Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyFadeTest(title: 'Fade Demo'),
    );
  }
}

class MyFadeTest extends StatefulWidget {
  MyFadeTest({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyFadeTest createState() => new _MyFadeTest();
}

class _MyFadeTest extends State<MyFadeTest> with TickerProviderStateMixin {
  AnimationController controller;
  CurvedAnimation curve;

  @override
  void initState() {
    controller = new AnimationController(duration: const Duration(milliseconds: 2000), 
    vsync: this);
    curve = new CurvedAnimation(parent: controller, curve: Curves.easeIn);
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
          child: new Container(
              child: new FadeTransition(
                  opacity: curve,
                  child: new FlutterLogo(
                    size: 100.0,
                  )))),
      floatingActionButton: new FloatingActionButton(
        tooltip: 'Fade',
        child: new Icon(Icons.brush),
        onPressed: () {
          controller.forward();
        },
      ),
    );
  }
}

有关更多具体细节，请参阅 Animation and Motion Widgets 和 Tutorial: Animations in Flutter。

如何使用 Canvas 去 draw/paint？

在 Android 中，你可以使用 Canvas 和 Drawables 绘制图像到屏幕上。Flutter 也具有非常类似的 Canvas API，因为它基于相同的底层渲染引擎 Skia。因此，在 Flutter 中绘制 Canvas 是 Android 开发人员非常熟悉的任务。

Flutter 有两个类可以帮助你绘制 Canvas：CustomPaint 和 CustomPainter，后者可以实现你的算法绘制到 Canvas 上。

在这个 StackOverFlow 的答案中， 你可以看到如何在 Flutter 中实现一个签名画板。

import 'package:flutter/material.dart';

class SignaturePainter extends CustomPainter {
  SignaturePainter(this.points);
  final List<Offset> points;
  void paint(Canvas canvas, Size size) {
    var paint = new Paint()
      ..color = Colors.black
      ..strokeCap = StrokeCap.round
      ..strokeWidth = 5.0;
    for (int i = 0; i < points.length - 1; i++) {
      if (points[i] != null && points[i + 1] != null)
        canvas.drawLine(points[i], points[i + 1], paint);
    }
  }
  bool shouldRepaint(SignaturePainter other) => other.points != points;
}

class Signature extends StatefulWidget {
  SignatureState createState() => new SignatureState();
}

class SignatureState extends State<Signature> {
  List<Offset> _points = <Offset>[];
  Widget build(BuildContext context) {
    return new GestureDetector(
      onPanUpdate: (DragUpdateDetails details) {
        setState(() {
          RenderBox referenceBox = context.findRenderObject();
          Offset localPosition =
          referenceBox.globalToLocal(details.globalPosition);
          _points = new List.from(_points)..add(localPosition);
        });
      },
      onPanEnd: (DragEndDetails details) => _points.add(null),
      child: new CustomPaint(painter: new SignaturePainter(_points), size: Size.infinite),
    );
  }
}

class DemoApp extends StatelessWidget {
  Widget build(BuildContext context) => new Scaffold(body: new Signature());
}

void main() => runApp(new MaterialApp(home: new DemoApp()));