Android 开发者 for Flutter （3） flutter中动画是如何实现的 及 如何使用Canvas draw/paint

Android 开发者 for Flutter （3） flutter中动画是如何实现的 及 如何使用Canvas draw/paint

Flutter入门，学习历程，进入开发，在安卓手机运行起来
Visual Studio code工具开发flutte总结
Flutter 跨平台开发 为什么选择Flutter
跨平台开发 为什么选择Flutter
Android 开发者 for Flutter （1）Flutter和Android中的View对比及如何更新widget
Android 开发者 for Flutter （2）如何布局？ XML layout 文件跑哪去了？及布局中添加或删除组件

在Android中，可以通过View.animate()对视图进行动画处理，那在Flutter中怎样才能对Widget进行处理 在Flutter中，可以通过动画库给widget添加动画。

在Android中，您可以通过XML创建动画或在视图上调用.animate()。在Flutter中，您可以将widget包装到Animation中。

与Android相似，在Flutter中，您有一个AnimationController和一个Interpolator， 它是Animation类的扩展，例如CurvedAnimation。您将控制器和动画传递到AnimationWidget中，并告诉控制器启动动画。

让我们来看看如何编写一个FadeTransition，当您按下时会淡入一个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 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();
},
),
);
}
}

 **如何使用Canvas draw/paint**
在Android中，您可以使用Canvas在屏幕上绘制自定义形状。

Flutter有两个类可以帮助您绘制画布，CustomPaint和CustomPainter，它们实现您的算法以绘制到画布。

在这个人气较高的的StackOverFlow答案中，您可以看到签名painter是如何实现的。

请参阅https://stackoverflow.com/questions/46241071/create-signature-area-for-mobile-app-in-dart-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)),
        );
      }
    }
    class DemoApp extends StatelessWidget {
      Widget build(BuildContext context) => new Scaffold(body: new Signature());
    }
    void main() => runApp(new MaterialApp(home: new DemoApp()));

还可以继续学习下面这些东西

Flutter轮播图编写（两种方式）CarouselSlider和PageView（自动轮播，也可以手动左右拖拽）
flutter 中tabbar切换上下均可，banner轮播图，listview刷新添加更多，listview嵌套gridview
Flutter 项目编写 第三方插件库文件引入，本地图片 json数据引入解析
flutter run 运行项目 所遇到的问题总结（Scaffold加padding及 flutter/material.dart’;爆红问题解决；listview嵌套gridview滑动问题）

如对您有帮助，欢迎start，谢谢。
github的源码：https://github.com/1136346879/flutter-

鸣谢flutter中文网 https://flutterchina.club/technical-overview/