books

assets/draw/p11/p11.dart

@@ -0,0 +1 @@
+export 'p11_page.dart';

assets/draw/p11/p11_page.dart

@@ -0,0 +1,24 @@
+import 'package:flutter/material.dart';
+
+import 'package:idraw/components/demo_shower.dart';
+import 's01.dart' as s1;
+import 's02.dart' as s2;
+import 's03.dart' as s3;
+import 's04.dart' as s4;
+
+class P11Page extends StatelessWidget {
+  const P11Page({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const DemoShower(
+      srcCodeDir: 'draw/p11',
+      demos:  [
+        s1.Paper(),
+        s2.Paper(),
+        s3.Paper(),
+        s4.Paper(),
+      ],
+    );
+  }
+}

assets/draw/p11/s01.dart

@@ -0,0 +1,121 @@
+
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+
+import '../components/coordinate_pro.dart';
+
+
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: CurveBox(curve: const Cubic(1, -0.06, 0.1, 1.2),),
+    );
+  }
+}
+
+
+class CurveBox extends StatefulWidget {
+  final Color color;
+  final Curve curve;
+
+  CurveBox({Key? key, this.color = Colors.lightBlue, this.curve = Curves.linear})
+      : super(key: key);
+
+  @override
+  _CurveBoxState createState() => _CurveBoxState();
+}
+
+class _CurveBoxState extends State<CurveBox>
+    with SingleTickerProviderStateMixin {
+  late AnimationController _controller;
+  late Animation<double> _angleAnimation;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      duration: const Duration(seconds: 3),
+      vsync: this,
+    );
+    _angleAnimation = CurveTween(curve: widget.curve).animate(_controller);
+    _controller.repeat();
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return CustomPaint(
+      size: Size(100, 100),
+      painter: CurveBoxPainter(_controller, _angleAnimation), // 背景
+    );
+  }
+}
+
+class CurveBoxPainter extends CustomPainter {
+  final Animation<double> repaint; //
+  Animation<double> angleAnimation;
+
+  Paint _paint = Paint();
+
+  CurveBoxPainter(this.repaint, this.angleAnimation) : super(repaint: repaint) {}
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    canvas.clipRect(Offset.zero & size);
+    canvas.translate(size.width / 2, size.height / 2);
+    _drawRing(canvas, size);
+    _drawRedCircle(canvas, size);
+    _drawGreenCircle(canvas, size);
+  }
+
+  //绘制环
+  void _drawRing(Canvas canvas, Size size) {
+    final double strokeWidth = 5;
+    _paint
+      ..color = Colors.blue
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = strokeWidth;
+    canvas.drawCircle(Offset.zero, size.width / 2 - strokeWidth, _paint);
+  }
+
+  // 绘制红球
+  void _drawRedCircle(Canvas canvas, Size size) {
+    canvas.save();
+    canvas.rotate(angleAnimation.value * 2 * pi);
+    _paint
+      ..color = Colors.red
+      ..style = PaintingStyle.fill;
+    canvas.drawCircle(
+        Offset.zero.translate(0, -(size.width / 2 - 5)), 5, _paint);
+    canvas.restore();
+  }
+
+  // 绘制绿球
+  void _drawGreenCircle(Canvas canvas, Size size) {
+    canvas.save();
+    canvas.translate(0,angleAnimation.value * (size.height-10));
+    _paint
+      ..color = Colors.green
+      ..style = PaintingStyle.fill;
+    canvas.drawCircle(
+        Offset.zero.translate(0, -(size.width / 2 - 5)), 5, _paint);
+    canvas.restore();
+  }
+
+  @override
+  bool shouldRepaint(covariant CurveBoxPainter oldDelegate) =>
+      oldDelegate.repaint != repaint;
+}

assets/draw/p11/s02.dart

@@ -0,0 +1,175 @@
+
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+
+import '../components/coordinate_pro.dart';
+
+
+
+/// create by 张风捷特烈 on 2020-03-19
+/// contact me by email 1981462002@qq.com
+/// 说明: 纸
+class Paper extends StatelessWidget {
+  const Paper({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final curvesMap = {
+      "linear": Curves.linear,
+      "decelerate": Curves.decelerate,
+      "fastLinearToSlowEaseIn": Curves.fastLinearToSlowEaseIn,
+      "ease": Curves.ease,
+      "easeIn": Curves.easeIn,
+      "easeInToLinear": Curves.easeInToLinear,
+      "easeInSine": Curves.easeInSine,
+      "easeInQuad": Curves.easeInCubic,
+      "easeInCubic": Curves.easeInCubic,
+      "easeInQuart": Curves.easeInQuart,
+      "easeInQuint": Curves.easeInQuint,
+      "easeInExpo": Curves.easeInExpo,
+      "easeInCirc": Curves.easeInCirc,
+      "easeInBack": Curves.easeInBack,
+      "easeOut": Curves.easeOut,
+      "linearToEaseOut": Curves.linearToEaseOut,
+      "easeOutSine": Curves.easeOutSine,
+      "easeOutQuad": Curves.easeOutQuad,
+      "easeOutCubic": Curves.easeOutCubic,
+      "easeOutQuart": Curves.easeOutQuart,
+      "easeOutQuint": Curves.easeOutQuint,
+
+      // "easeOutExpo": Curves.easeOutExpo,
+      // "easeOutCirc": Curves.easeOutCirc,
+      // "easeOutBack": Curves.easeOutBack,
+      // "easeInOut": Curves.easeInOut,
+      // "easeInOutSine": Curves.easeInOutSine,
+      // "easeInOutQuad": Curves.easeInOutQuad,
+      // "easeInOutCubic": Curves.easeInOutCubic,
+      // "easeInOutQuart": Curves.easeInOutQuart,
+      // "easeInOutQuint": Curves.easeInOutQuint,
+      // "easeInOutExpo": Curves.easeInOutExpo,
+      // "easeInOutCirc": Curves.easeInOutCirc,
+      // "easeInOutBack": Curves.easeInOutBack,
+      // "fastOutSlowIn": Curves.fastOutSlowIn,
+      // "slowMiddle": Curves.slowMiddle,
+      // "bounceIn": Curves.bounceIn,
+      // "bounceOut": Curves.bounceOut,
+      // "bounceInOut": Curves.bounceInOut,
+      // "elasticIn": Curves.elasticIn,
+      // "elasticInOut": Curves.elasticInOut,
+      // "elasticOut": Curves.elasticOut,
+    };
+    return Center(
+      child:
+      Wrap(
+        runSpacing: 20,
+        children: curvesMap.keys.map((e) => Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            CurveBox(curve: curvesMap[e]!,),
+            SizedBox(height: 3,),
+            Text(e,style: TextStyle(fontSize: 10),)
+          ],
+        )).toList(),
+      ),
+    );
+  }
+}
+
+class CurveBox extends StatefulWidget {
+  final Color color;
+  final Curve curve;
+
+  const CurveBox({Key? key, this.color = Colors.lightBlue, this.curve = Curves.linear})
+      : super(key: key);
+
+  @override
+  _CurveBoxState createState() => _CurveBoxState();
+}
+
+class _CurveBoxState extends State<CurveBox>
+    with SingleTickerProviderStateMixin {
+  late AnimationController _controller;
+  late Animation<double> _angleAnimation;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      duration: const Duration(seconds: 3),
+      vsync: this,
+    );
+    _angleAnimation = CurveTween(curve: widget.curve).animate(_controller);
+    _controller.repeat();
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return CustomPaint(
+      size: Size(100, 100),
+      painter: CurveBoxPainter(_controller, _angleAnimation), // 背景
+    );
+  }
+}
+
+class CurveBoxPainter extends CustomPainter {
+  final Animation<double> repaint; //
+  Animation<double> angleAnimation;
+
+  Paint _paint = Paint();
+
+  CurveBoxPainter(this.repaint, this.angleAnimation) : super(repaint: repaint) {}
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    canvas.clipRect(Offset.zero & size);
+    canvas.translate(size.width / 2, size.height / 2);
+    _drawRing(canvas, size);
+    _drawRedCircle(canvas, size);
+    _drawGreenCircle(canvas, size);
+  }
+
+  //绘制环
+  void _drawRing(Canvas canvas, Size size) {
+    final double strokeWidth = 5;
+    _paint
+      ..color = Colors.blue
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = strokeWidth;
+    canvas.drawCircle(Offset.zero, size.width / 2 - strokeWidth, _paint);
+  }
+
+  // 绘制红球
+  void _drawRedCircle(Canvas canvas, Size size) {
+    canvas.save();
+    canvas.rotate(angleAnimation.value * 2 * pi);
+    _paint
+      ..color = Colors.red
+      ..style = PaintingStyle.fill;
+    canvas.drawCircle(
+        Offset.zero.translate(0, -(size.width / 2 - 5)), 5, _paint);
+    canvas.restore();
+  }
+
+  // 绘制绿球
+  void _drawGreenCircle(Canvas canvas, Size size) {
+    canvas.save();
+    canvas.translate(0,angleAnimation.value * (size.height-10));
+    _paint
+      ..color = Colors.green
+      ..style = PaintingStyle.fill;
+    canvas.drawCircle(
+        Offset.zero.translate(0, -(size.width / 2 - 5)), 5, _paint);
+    canvas.restore();
+  }
+
+  @override
+  bool shouldRepaint(covariant CurveBoxPainter oldDelegate) =>
+      oldDelegate.repaint != repaint;
+}

assets/draw/p11/s03.dart

@@ -0,0 +1,87 @@
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+
+/// create by 张风捷特烈 on 2020/11/2
+/// contact me by email 1981462002@qq.com
+/// 说明:
+///
+
+class Paper extends StatefulWidget {
+  final Color color;
+
+  const Paper({Key? key, this.color = Colors.lightBlue}) : super(key: key);
+
+  @override
+  _PaperState createState() => _PaperState();
+}
+
+class _PaperState extends State<Paper> with SingleTickerProviderStateMixin {
+  late AnimationController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      lowerBound: 10,
+      upperBound: 40,
+      duration: const Duration(seconds: 1),
+      vsync: this,
+    );
+
+    // _controller.forward();
+    // _controller.reverse(from: 40);
+    // _controller.repeat();
+    // _controller.repeat(reverse: true);
+    _controller.fling();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: CustomPaint(
+        size: Size(100, 100),
+        painter: PicManPainter(color: widget.color, angle: _controller), // 背景
+      ),
+    );
+  }
+}
+
+class PicManPainter extends CustomPainter {
+
+  final Animation<double> angle; // 角度(与x轴交角 角度制)
+  final Color color; // 颜色
+  Paint _paint = Paint();
+
+  PicManPainter({this.color = Colors.yellowAccent,required this.angle})
+      : super(repaint: angle);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    canvas.clipRect(Offset.zero & size); //剪切画布
+    final double radius = size.width / 2;
+    canvas.translate(radius, size.height / 2);
+    _drawHead(canvas, size);
+    _drawEye(canvas, radius);
+  }
+
+  //绘制头
+  void _drawHead(Canvas canvas, Size size) {
+    var rect = Rect.fromCenter(
+        center: Offset(0, 0), height: size.width, width: size.height);
+    var a = angle.value / 180 * pi;
+    canvas.drawArc(rect, a, 2 * pi - a.abs() * 2, true, _paint..color = color);
+  }
+
+  //绘制眼睛
+  void _drawEye(Canvas canvas, double radius) {
+    canvas.drawCircle(Offset(radius * 0.15, -radius * 0.6), radius * 0.12,
+        _paint..color = Colors.white);
+  }
+
+  @override
+  bool shouldRepaint(covariant PicManPainter oldDelegate) {
+    print('-----shouldRepaint---------');
+    return true;
+  }
+}

assets/draw/p11/s04.dart

@@ -0,0 +1,111 @@
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+
+/// create by 张风捷特烈 on 2020/11/2
+/// contact me by email 1981462002@qq.com
+/// 说明:
+///
+
+class Paper extends StatefulWidget {
+  final Color color;
+
+  const Paper({Key? key, this.color = Colors.lightBlue}) : super(key: key);
+
+  @override
+  _PaperState createState() => _PaperState();
+}
+
+class _PaperState extends State<Paper> with SingleTickerProviderStateMixin {
+  late AnimationController _controller;
+  final ValueNotifier<Color> _color = ValueNotifier<Color>(Colors.blue);
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      lowerBound: 10,
+      upperBound: 40,
+      duration: const Duration(seconds: 1),
+      vsync: this,
+    );
+    _controller.addStatusListener(_statusListen);
+    _controller.forward();
+    // _controller.repeat(reverse: true);
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: CustomPaint(
+        size: Size(100, 100),
+        painter: PicManPainter(
+            color: _color,
+            angle: _controller,
+            repaint: Listenable.merge([_controller, _color])), // 背景
+      ),
+    );
+  }
+
+  void _statusListen(AnimationStatus status) {
+    switch (status) {
+      case AnimationStatus.dismissed:
+        _color.value = Colors.black;
+        break;
+      case AnimationStatus.forward:
+        _color.value = Colors.blue;
+        break;
+      case AnimationStatus.reverse:
+        _color.value = Colors.red;
+        break;
+      case AnimationStatus.completed:
+        _color.value = Colors.green;
+        break;
+    }
+  }
+}
+
+class PicManPainter extends CustomPainter {
+  final Animation<double> angle;
+  final Listenable repaint;
+  final ValueNotifier<Color> color;
+
+  PicManPainter({required this.color,required this.angle, required this.repaint})
+      : super(repaint: repaint);
+
+  Paint _paint = Paint();
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    canvas.clipRect(Offset.zero & size); //剪切画布
+    final double radius = size.width / 2;
+    canvas.translate(radius, size.height / 2);
+    _drawHead(canvas, size);
+    _drawEye(canvas, radius);
+  }
+
+  //绘制头
+  void _drawHead(Canvas canvas, Size size) {
+    var rect = Rect.fromCenter(
+        center: Offset(0, 0), height: size.width, width: size.height);
+    var a = angle.value / 180 * pi;
+    canvas.drawArc(
+        rect, a, 2 * pi - a.abs() * 2, true, _paint..color = color.value);
+  }
+
+  //绘制眼睛
+  void _drawEye(Canvas canvas, double radius) {
+    canvas.drawCircle(Offset(radius * 0.15, -radius * 0.6), radius * 0.12,
+        _paint..color = Colors.white);
+  }
+
+  @override
+  bool shouldRepaint(covariant PicManPainter oldDelegate) =>
+      oldDelegate.repaint != repaint;
+}