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

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

同样对 Android 的 Animators，在 Flutter 中你有一个 AnimationController 这是一个 Animation 可以 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 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 _points = [];  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()));

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

如何为 Widget 设置动画？

如何使用 Canvas 去 draw/paint？

更多相关文章

随机推荐