✨ 绘制集录 - 路径动画

lib/components/project/loading_shower.dart

@@ -7,7 +7,6 @@ import 'package:flutter_unit/components/permanent/loading/planet_loading.dart';
 
 class LoadingShower extends StatelessWidget {
 
-
   @override
   Widget build(BuildContext context) {
     return PlateLoading();

lib/views/pages/gallery/draw_path.dart

@@ -0,0 +1,127 @@
+import 'dart:math';
+import 'dart:ui';
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'dart:ui' as ui;
+
+/// create by 张风捷特烈 on 2020/5/1
+/// contact me by email 1981462002@qq.com
+/// 说明:
+
+class DrawPath extends StatefulWidget {
+  @override
+  _DrawPathState createState() => _DrawPathState();
+}
+
+class _DrawPathState extends State<DrawPath> with SingleTickerProviderStateMixin {
+  AnimationController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      duration: const Duration(seconds: 15),
+      vsync: this,
+    )..repeat()
+    ;
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      child: CustomPaint(
+        painter: PaperPainter(_controller),
+      ),
+    );
+  }
+}
+
+class PaperPainter extends CustomPainter {
+  final Animation<double> repaint;
+
+  PaperPainter(this.repaint) : super(repaint: repaint) {
+    initPointsWithPolar();
+  }
+
+  final List<Offset> points = [];
+  final Path path = Path();
+  final double step = 4;
+  final double min = 0;
+  final double max = 360;
+
+  void initPointsWithPolar() {
+    for (double x = min; x < max; x += step) {
+      double thta = (pi / 180 * x); // 角度转化为弧度
+      var p = f(thta);
+      points.add(Offset(p * cos(thta), p * sin(thta)));
+    }
+    double thta = (pi / 180 * max);
+    points.add(Offset(f(thta) * cos(thta), f(thta) * sin(thta)));
+    points.add(Offset(f(thta) * cos(thta), f(thta) * sin(thta)));
+  }
+
+  double f(double thta) {
+    double p = 150*sin(5*thta).abs();
+    return p;
+  }
+
+  @override
+  void paint(Canvas canvas, Size size) {
+
+    canvas.translate(size.width / 2, size.height / 2);
+
+    Paint paint = Paint()
+      ..color = Colors.red
+      ..strokeWidth = 1.5
+      ..style = PaintingStyle.stroke;
+
+    var colors = [
+      Color(0xFFF60C0C),
+      Color(0xFFF3B913),
+      Color(0xFFE7F716),
+      Color(0xFF3DF30B),
+      Color(0xFF0DF6EF),
+      Color(0xFF0829FB),
+      Color(0xFFB709F4),
+    ];
+    var pos = [1.0 / 7, 2.0 / 7, 3.0 / 7, 4.0 / 7, 5.0 / 7, 6.0 / 7, 1.0];
+
+    paint.shader = ui.Gradient.linear(
+        Offset(0, 0), Offset(100, 0), colors, pos, TileMode.mirror);
+
+    Offset p1 = points[0];
+
+
+    path.reset();
+    path..moveTo(p1.dx, p1.dy);
+
+    for (var i = 1; i < points.length - 1; i++) {
+      double xc = (points[i].dx + points[i + 1].dx) / 2;
+      double yc = (points[i].dy + points[i + 1].dy) / 2;
+      Offset p2 = points[i];
+      path.quadraticBezierTo(p2.dx, p2.dy, xc, yc);
+    }
+
+
+
+    PathMetrics pms = path.computeMetrics();
+    pms.forEach((pm) {
+      Tangent tangent = pm.getTangentForOffset(pm.length * repaint.value);
+      canvas.drawPath(pm.extractPath(0, pm.length * repaint.value), paint);
+      canvas.drawCircle(
+          tangent.position, 5, Paint()..color = Colors.blue);
+    });
+  }
+
+  @override
+  bool shouldRepaint(PaperPainter oldDelegate) =>
+      oldDelegate.repaint != repaint;
+}

lib/views/pages/gallery/gallery_page.dart

@@ -11,6 +11,7 @@ import 'art/random_portrait.dart';
 import 'art/tiled_lines.dart';
 import 'art/triangular_mesh.dart';
 import 'art/un_deux_trois.dart';
+import 'draw_path.dart';
 import 'picture_frame.dart';
 
 /// create by 张风捷特烈 on 2020/10/10
@@ -44,6 +45,12 @@ class _GalleryPageState extends State<GalleryPage> {
                     info:
                         "    本样例介绍如何进行图片的绘制。通过加载图片并将图片资源绘制到指定的区域。在上层绘制一批45°倾角的栅格线,可以练习基本的绘制。",
                     content: DrawPicture()),
+                FrameShower(
+                    title: "Draw Curve",
+                    author: "张风捷特烈",
+                    info:
+                        "    本样例介绍如何使用路径绘制函数曲线，并使用路径测量进行动画",
+                    content: DrawPath()),
                 FrameShower(
                     title: "Random Portrait",
                     author: "张风捷特烈",