添加动画

lib/modules/chat/views/chat_view.dart

@@ -8,6 +8,7 @@ import '../../../core/theme/app_colors.dart';
 import 'animated_gradient_background.dart';
 import 'chat_music_card.dart';
 import 'chat_navigation_card.dart';
+import 'cloud_background.dart';
 import 'weather_day_card.dart';
 
 class ChatView extends GetView<ChatController> {
@@ -549,13 +550,23 @@ class ChatView extends GetView<ChatController> {
               children: [],
             ),
             Expanded(
-              child: Container(
-                width: 200.w,
-                height: 200.w,
-                decoration: BoxDecoration(
-                  color:
-                      isDarkMode ? Colors.white.withOpacity(0.1) : Colors.white,
-                  shape: BoxShape.circle,
+              child: Center(
+                child: Container(
+                  width: 200.w,
+                  height: 200.w,
+                  clipBehavior: Clip.hardEdge,
+                  decoration: BoxDecoration(
+                    gradient: LinearGradient(
+                      colors: [
+                        Colors.blue.withOpacity(0.4),
+                        Colors.purple.withOpacity(0.4)
+                      ],
+                      begin: Alignment.centerLeft,
+                      end: Alignment.centerRight,
+                    ),
+                    shape: BoxShape.circle,
+                  ),
+                  child: CircularFlowAnimation(),
                 ),
               ),
             ),

lib/modules/chat/views/cloud_background.dart

@@ -0,0 +1,144 @@
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+
+class CircularFlowAnimation extends StatefulWidget {
+  const CircularFlowAnimation({super.key});
+
+  @override
+  State<CircularFlowAnimation> createState() => _CircularFlowAnimationState();
+}
+
+class _CircularFlowAnimationState extends State<CircularFlowAnimation>
+    with SingleTickerProviderStateMixin {
+  late AnimationController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      vsync: this,
+      duration: const Duration(seconds: 20),
+    )..repeat();
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return CustomPaint(
+      painter: CircularFlowPainter(_controller),
+      size: Size.infinite,
+    );
+  }
+}
+
+class CircularFlowPainter extends CustomPainter {
+  final Animation<double> animation;
+
+  CircularFlowPainter(this.animation) : super(repaint: animation);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final center = Offset(size.width / 2, size.height / 2);
+    const baseRadius = 150.0;
+    final time = animation.value * 2 * pi;
+
+    // 绘制圆形路径
+    _drawCircularPath(canvas, center, baseRadius);
+
+    // 绘制三个围绕圆形运动的渐变云朵
+    _drawOrbitingCloud(
+      canvas: canvas,
+      center: center,
+      time: time,
+      colors: [Colors.blue, Colors.purple],
+      orbitRadius: baseRadius,
+      speed: 0.5,
+      direction: 1,
+    );
+
+    _drawOrbitingCloud(
+      canvas: canvas,
+      center: center,
+      time: time,
+      colors: [Colors.pink, Colors.orange],
+      orbitRadius: baseRadius * 0.8,
+      speed: 1.0,
+      direction: -1,
+    );
+
+    _drawOrbitingCloud(
+      canvas: canvas,
+      center: center,
+      time: time,
+      colors: [Colors.green, Colors.yellow],
+      orbitRadius: baseRadius * 1.2,
+      speed: 0.3,
+      direction: 1,
+    );
+
+    _drawOrbitingCloud(
+      canvas: canvas,
+      center: center,
+      time: time,
+      colors: [Colors.red, Colors.deepOrangeAccent],
+      orbitRadius: baseRadius * 0.5,
+      speed: 0.8,
+      direction: -1,
+    );
+  }
+
+  void _drawCircularPath(Canvas canvas, Offset center, double radius) {
+    final paint = Paint()
+      ..color = Colors.red
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = 2
+      ..maskFilter = MaskFilter.blur(BlurStyle.normal, 4);
+
+    canvas.drawCircle(center, radius, paint);
+  }
+
+  void _drawOrbitingCloud({
+    required Canvas canvas,
+    required Offset center,
+    required double time,
+    required List<Color> colors,
+    required double orbitRadius,
+    required double speed,
+    required int direction,
+  }) {
+    final angle = time * speed * direction;
+    final position = Offset(
+      center.dx + orbitRadius * cos(angle),
+      center.dy + orbitRadius * sin(angle),
+    );
+
+    final gradient = RadialGradient(
+      colors: colors,
+      stops: const [0.3, 1.0],
+      radius: 0.6,
+      focal: Alignment(
+        0.1 + cos(angle * 2) * 0.3,
+        0.1 + sin(angle * 2) * 0.3,
+      ),
+    );
+
+    final paint = Paint()
+      ..shader = gradient.createShader(Rect.fromCircle(
+        center: position,
+        radius: 100 + 30 * sin(time * 3),
+      ))
+      ..maskFilter = MaskFilter.blur(BlurStyle.normal, 40)
+      ..blendMode = BlendMode.plus;
+
+    canvas.drawCircle(position, 80 + 20 * cos(time * 2), paint);
+  }
+
+  @override
+  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
+}