flutter实现雷达动画测试
import 'dart:math' as math show sin, pi, sqrt;
import 'package:flutter/material.dart';
class HYRipplesAnimation extends StatefulWidget {
const HYRipplesAnimation({
super.key,
this.size = 90,
this.color = Colors.blue,
this.child,
this.tips = '正在搜索...',
});
final double size;
final Color color;
final Widget? child;
final String? tips;
@override
State<HYRipplesAnimation> createState() => _HYRipplesAnimationState();
}
class _HYRipplesAnimationState extends State<HYRipplesAnimation>
with TickerProviderStateMixin {
late AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(milliseconds: 2000),
vsync: this,
)..repeat();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
Widget _button() {
return Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(widget.size),
child: DecoratedBox(
decoration: BoxDecoration(
gradient: RadialGradient(
colors: <Color>[
widget.color,
Color.lerp(widget.color, Colors.black, .05) ?? Colors.black,
],
),
),
child: ScaleTransition(
scale: Tween(begin: 0.95, end: 1.0).animate(
CurvedAnimation(
parent: _controller,
curve: const _PulsateCurve(),
),
),
child: widget.child,
),
),
),
);
}
@override
Widget build(BuildContext context) {
return Column(
children: [
CustomPaint(
painter: _CirclePainter(
_controller,
color: widget.color,
),
child: SizedBox(
width: widget.size * 2.125,
height: widget.size * 2.125,
child: _button(),
),
),
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Text(
widget.tips!,
style: const TextStyle(fontSize: 14, color: Colors.grey),
),
),
],
);
}
}
class _CirclePainter extends CustomPainter {
_CirclePainter(
this._animation, {
required this.color,
}) : super(repaint: _animation);
final Color color;
final Animation<double> _animation;
void circle(Canvas canvas, Rect rect, double value) {
final double opacity = (1.0 - (value / 4.0)).clamp(0.0, 1.0);
final Color tempColor = color.withOpacity(opacity);
final double size = rect.width / 2;
final double area = size * size;
final double radius = math.sqrt(area * value / 4);
final Paint paint = Paint()..color = tempColor;
canvas.drawCircle(rect.center, radius, paint);
}
@override
void paint(Canvas canvas, Size size) {
final Rect rect = Rect.fromLTRB(0.0, 0.0, size.width, size.height);
for (int wave = 3; wave >= 0; wave--) {
circle(canvas, rect, wave + _animation.value);
}
}
@override
bool shouldRepaint(_CirclePainter oldDelegate) => true;
}
class _PulsateCurve extends Curve {
const _PulsateCurve();
@override
double transform(double t) {
if (t == 0 || t == 1) {
return 0.01;
}
return math.sin(t * math.pi);
}
}