绘制集录-流光

lib/painter_system/anim/circle_halo.dart

@@ -0,0 +1,112 @@
+import 'dart:math';
+import 'dart:ui' as ui;
+
+import 'package:flutter/material.dart';
+
+class CircleHalo extends StatefulWidget {
+  const CircleHalo({Key key}) : super(key: key);
+
+  @override
+  _CircleHaloState createState() => _CircleHaloState();
+}
+
+class _CircleHaloState extends State<CircleHalo>
+    with SingleTickerProviderStateMixin {
+  AnimationController _ctrl;
+
+  @override
+  void initState() {
+    super.initState();
+    _ctrl = AnimationController(
+      vsync: this,
+      duration: Duration(seconds: 2),
+    );
+    _ctrl.repeat();
+
+  }
+
+  @override
+  void dispose() {
+    _ctrl.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return  CustomPaint(
+        size: Size(200, 200),
+        painter: CircleHaloPainter(_ctrl),
+      );
+  }
+}
+
+class CircleHaloPainter extends CustomPainter {
+  Animation<double> animation;
+
+  CircleHaloPainter(this.animation) : super(repaint: animation);
+
+  final Animatable<double> rotateTween = Tween<double>(begin: 0, end: 2 * pi)
+      .chain(CurveTween(curve: Curves.easeIn));
+
+  final Animatable<double> breatheTween = TweenSequence<double>(
+    <TweenSequenceItem<double>>[
+      TweenSequenceItem<double>(
+        tween: Tween<double>(begin: 0, end: 4),
+        weight: 1,
+      ),
+      TweenSequenceItem<double>(
+        tween: Tween<double>(begin: 4, end: 0),
+        weight: 1,
+      ),
+    ],
+  ).chain(CurveTween(curve: Curves.decelerate));
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    canvas.translate(size.width / 2, size.height / 2);
+    final Paint paint = Paint()
+      ..strokeWidth = 1
+      ..style = PaintingStyle.stroke;
+
+    Path circlePath = Path()
+      ..addOval(Rect.fromCenter(center: Offset(0, 0), width: 100, height: 100));
+    Path circlePath2 = Path()
+      ..addOval(
+          Rect.fromCenter(center: Offset(-1, 0), width: 100, height: 100));
+    Path result =
+        Path.combine(PathOperation.difference, circlePath, circlePath2);
+
+    List<Color> colors = [
+      Color(0xFFF60C0C),
+      Color(0xFFF3B913),
+      Color(0xFFE7F716),
+      Color(0xFF3DF30B),
+      Color(0xFF0DF6EF),
+      Color(0xFF0829FB),
+      Color(0xFFB709F4),
+    ];
+    colors.addAll(colors.reversed.toList());
+    final List<double> pos =
+        List.generate(colors.length, (index) => index / colors.length);
+
+    paint.shader =
+        ui.Gradient.sweep(Offset.zero, colors, pos, TileMode.clamp, 0, 2 * pi);
+
+    paint.maskFilter =
+        MaskFilter.blur(BlurStyle.solid, breatheTween.evaluate(animation));
+    canvas.drawPath(circlePath, paint);
+
+    canvas.save();
+    canvas.rotate(animation.value * 2 * pi);
+    paint
+      ..style = PaintingStyle.fill
+      ..color = Color(0xff00abf2);
+    paint.shader=null;
+    canvas.drawPath(result, paint);
+    canvas.restore();
+  }
+
+  @override
+  bool shouldRepaint(covariant CircleHaloPainter oldDelegate) =>
+      oldDelegate.animation != animation;
+}

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/circle_halo.dart';
 import 'anim/curve_shower/curve_anim_shower.dart';
 import 'anim/draw_path.dart';
 import 'art/circle_packing.dart';
@@ -75,6 +76,11 @@ class GalleryFactory {
               author: "张风捷特烈",
               info: "    本样例通过直观的方式，来查看动画曲线 curve 的作用效果，让大家对动画有更深的理解。",
               content: const CurveAnimShower()),
+          FrameShower(
+              title: "流光",
+              author: "张风捷特烈",
+              info: "    本样例介绍如何在绘制中使用着色器和过滤器，并通过动画进行数值变化达到旋转流光效果。",
+              content: const CircleHalo()),
           FrameShower(
               title: "Draw Curve",
               author: "张风捷特烈",
@@ -85,11 +91,6 @@ class GalleryFactory {
               author: "张风捷特烈",
               info: "    本样例介绍如何绘制三次贝塞尔曲线，通过触点判断某点是否激活，据此控制点的位置达到拖动控制效果。",
               content: Bezier3Player()),
-          FrameShower(
-              title: "Draw Curve",
-              author: "张风捷特烈",
-              info: "    本样例介绍如何使用路径绘制函数曲线，并使用路径测量进行动画",
-              content: DrawPath()),
         ];
       case GalleryType.particle:
         return [];