diff --git a/lib/painter_system/anim/circle_halo.dart b/lib/painter_system/anim/circle_halo.dart new file mode 100644 index 00000000..a077fd6e --- /dev/null +++ b/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 + 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 animation; + + CircleHaloPainter(this.animation) : super(repaint: animation); + + final Animatable rotateTween = Tween(begin: 0, end: 2 * pi) + .chain(CurveTween(curve: Curves.easeIn)); + + final Animatable breatheTween = TweenSequence( + >[ + TweenSequenceItem( + tween: Tween(begin: 0, end: 4), + weight: 1, + ), + TweenSequenceItem( + tween: Tween(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 colors = [ + Color(0xFFF60C0C), + Color(0xFFF3B913), + Color(0xFFE7F716), + Color(0xFF3DF30B), + Color(0xFF0DF6EF), + Color(0xFF0829FB), + Color(0xFFB709F4), + ]; + colors.addAll(colors.reversed.toList()); + final List 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; +} diff --git a/lib/painter_system/gallery_factory.dart b/lib/painter_system/gallery_factory.dart index 7087acf6..e97901f9 100644 --- a/lib/painter_system/gallery_factory.dart +++ b/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 [];