绘制集录-动画数值散点图

lib/painter_system/anim/curve_shower/anim_painter.dart

@@ -0,0 +1,114 @@
+import 'dart:ui';
+
+import 'package:flutter/material.dart';
+
+import 'point_data.dart';
+
+class AnimPainter extends CustomPainter {
+  final PointData points;
+
+  Paint axisPaint = Paint()
+    ..style = PaintingStyle.stroke
+    ..strokeWidth = 1;
+
+  Paint fpsPaint = Paint()
+    ..style = PaintingStyle.stroke
+    ..color = Colors.green;
+
+  TextPainter textPainter = TextPainter(
+      textAlign: TextAlign.center, textDirection: TextDirection.ltr);
+
+  AnimPainter(this.points) : super(repaint: points);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    canvas.translate(0, size.height);
+
+    _drawAxis(canvas,size);
+    _drawScale(canvas, size);
+    _drawPoint(points.values, canvas, size);
+
+    Path fps_60 = Path();
+    fps_60.moveTo(3.0 * 60, 0);
+    fps_60.relativeLineTo(0, -size.height);
+    canvas.drawPath(fps_60, fpsPaint);
+    textPainter.text = TextSpan(
+        text: '60 帧', style: TextStyle(fontSize: 12, color: Colors.green));
+    textPainter.layout(); // 进行布局
+    textPainter.paint(canvas, Offset(3.0 * 61 + 5, -size.height));
+  }
+
+  @override
+  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
+
+  void _drawAxis(Canvas canvas, Size size){
+    Path axisPath = Path();
+    axisPath.relativeLineTo(size.width, 0);
+    axisPath.relativeLineTo(-10, -4);
+    axisPath.moveTo(size.width, 0);
+    axisPath.relativeLineTo(-10, 4);
+    axisPath.moveTo(0, 0);
+    axisPath.relativeLineTo(0, -size.height);
+    axisPath.relativeLineTo(-4, 10);
+    axisPath.moveTo(0, -size.height);
+    axisPath.relativeLineTo(4, 10);
+    canvas.drawPath(axisPath, axisPaint);
+
+    textPainter.text = TextSpan(
+        text: '帧数/f', style: TextStyle(fontSize: 12, color: Colors.black));
+    textPainter.layout(); // 进行布局
+    Size textSize = textPainter.size; // 尺寸必须在布局后获取
+    textPainter.paint(canvas, Offset(size.width - textSize.width, 5));
+    textPainter.text = TextSpan(
+        text: '数值/y', style: TextStyle(fontSize: 12, color: Colors.black));
+    textPainter.layout(); // 进行布局
+    Size textSize2 = textPainter.size; // 尺寸必须在布局后获取
+    textPainter.paint(canvas,
+        Offset(-textSize2.width + textSize2.width/2, -size.height - textSize2.height-3));
+  }
+
+  void _drawScale(Canvas canvas, Size size) {
+
+    double step = size.height / 11;
+
+    if(points.values.length>0){
+      canvas.drawLine(Offset(0, -points.values.last*step*10), Offset(280, -points.values.last*step*10), Paint()..color=Colors.purple);
+      canvas.drawCircle(Offset(240, -points.values.last*step*10), 10, Paint()..color=Colors.orange);
+    }
+
+    Path scalePath = Path();
+    for (int i = 1; i <= 10; i++) {
+      scalePath
+        ..moveTo(0, -step * i)
+        ..relativeLineTo(5, 0);
+
+      textPainter.text = TextSpan(
+          text: '${i / 10}',
+          style: TextStyle(fontSize: 12, color: Colors.black));
+
+      textPainter.layout(); // 进行布局
+      Size textSize = textPainter.size; // 尺寸必须在布局后获取
+      textPainter.paint(
+          canvas, Offset(-textSize.width - 5, -step * i - textSize.height / 2));
+    }
+    canvas.drawPath(scalePath, axisPaint);
+  }
+
+  void _drawPoint(List<double> values, Canvas canvas, Size size) {
+    double stepY = size.height / 11;
+
+    List<Offset> drawPoint = [];
+    // print(values.length);
+
+    for (int i = 0; i < values.length; i++) {
+      drawPoint.add(Offset(3.0 * (i + 1), -values[i] * (size.height - stepY)));
+    }
+
+    canvas.drawPoints(
+        PointMode.points,
+        drawPoint,
+        Paint()
+          ..style = PaintingStyle.stroke..color=Colors.blue
+          ..strokeWidth = 2);
+  }
+}

lib/painter_system/anim/curve_shower/curve_anim_shower.dart

@@ -0,0 +1,67 @@
+import 'dart:ui';
+
+import 'package:flutter/material.dart';
+
+import 'anim_painter.dart';
+import 'point_data.dart';
+
+class CurveAnimShower extends StatefulWidget {
+  const CurveAnimShower();
+
+  @override
+  _CurveAnimShowerState createState() => _CurveAnimShowerState();
+}
+
+class _CurveAnimShowerState extends State<CurveAnimShower>
+    with SingleTickerProviderStateMixin {
+  PointData points = PointData();
+
+  AnimationController _ctrl;
+
+  final Duration animDuration = const Duration(milliseconds: 1000);
+
+  Animation<double> curveAnim;
+
+  @override
+  void initState() {
+    super.initState();
+    _ctrl = AnimationController(
+      vsync: this,
+      duration: animDuration,
+    )..addListener(_collectPoint);
+    curveAnim = CurvedAnimation(parent: _ctrl, curve: Curves.bounceOut);
+  }
+
+  @override
+  void dispose() {
+    _ctrl.dispose();
+    points.dispose();
+    super.dispose();
+  }
+
+  void _collectPoint() {
+    points.push(curveAnim.value);
+  }
+
+  void _startAnim() async {
+    points.clear();
+    await _ctrl.forward(from: 0);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: _startAnim,
+      child: Padding(
+        padding: const EdgeInsets.all(30.0),
+        child: CustomPaint(
+          painter: AnimPainter(points),
+          size: const Size(
+            200,
+            200,
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/painter_system/anim/curve_shower/point_data.dart

@@ -0,0 +1,16 @@
+import 'package:flutter/cupertino.dart';
+
+class PointData extends ChangeNotifier {
+  final List<double> values = [];
+
+  void push(double value) {
+    values.add(value);
+    notifyListeners();
+  }
+
+
+  void clear() {
+    values.clear();
+    notifyListeners();
+  }
+}

lib/painter_system/gallery_factory.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_unit/painter_system/anim/spring_widget.dart';
 
 import 'anim/bezier3_player/bezier3_palyer.dart';
+import 'anim/curve_shower/curve_anim_shower.dart';
 import 'anim/draw_path.dart';
 import 'art/circle_packing.dart';
 import 'art/cubic_disarray.dart';
@@ -69,6 +70,11 @@ class GalleryFactory {
               author: "张风捷特烈",
               info: "    本样例介绍如何绘制弹簧，通过触点竖直拖拽拉伸、压缩，放手时进行恢复动画，是一个很好的综合小案例。",
               content: const SpringWidget()),
+          FrameShower(
+              title: "动画曲线散点图",
+              author: "张风捷特烈",
+              info: "    本样例通过直观的方式，来查看动画曲线 curve 的作用效果，让大家对动画有更深的理解。",
+              content: const CurveAnimShower()),
           FrameShower(
               title: "Draw Curve",
               author: "张风捷特烈",

pubspec.lock

@@ -14,7 +14,7 @@ packages:
       name: async
       url: "https://pub.flutter-io.cn"
     source: hosted
-    version: "2.5.0"
+    version: "2.6.1"
   bloc:
     dependency: transitive
     description:
@@ -363,7 +363,7 @@ packages:
       name: source_span
       url: "https://pub.flutter-io.cn"
     source: hosted
-    version: "1.8.0"
+    version: "1.8.1"
   sqflite:
     dependency: "direct main"
     description:
@@ -419,7 +419,7 @@ packages:
       name: test_api
       url: "https://pub.flutter-io.cn"
     source: hosted
-    version: "0.2.19"
+    version: "0.3.0"
   toggle_rotate:
     dependency: "direct main"
     description: