[function] 完成语音播报动画

Signed-off-by: xiaweizi <1012126908@qq.com>

Author: xiaweizi

assets/images/play.png

@@ -6,6 +6,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_dynamic_weather/app/utils/print_utils.dart';
 import 'package:flutter_dynamic_weather/event/change_index_envent.dart';
 import 'package:flutter_dynamic_weather/views/app/flutter_app.dart';
+import 'package:flutter_dynamic_weather/views/pages/home/speak_anim.dart';
 import 'package:flutter_tts/flutter_tts.dart';
 
 class RealTimeTempView extends StatefulWidget {
@@ -106,6 +107,7 @@ class _RealTimeTempViewState extends State<RealTimeTempView> {
 
   @override
   Widget build(BuildContext context) {
+    var color = Colors.white;
     return GestureDetector(
       child: Container(
         child: Row(
@@ -118,27 +120,29 @@ class _RealTimeTempViewState extends State<RealTimeTempView> {
             Text(
               "${widget.temp}",
               style: TextStyle(
-                  fontSize: 150,
-                  fontWeight: FontWeight.w400,
-                  color: Colors.white),
+                  fontSize: 150, fontWeight: FontWeight.w400, color: color),
             ),
             Text(
               "°",
               style: TextStyle(
-                  fontSize: 50,
-                  fontWeight: FontWeight.w500,
-                  color: Colors.white),
+                  fontSize: 50, fontWeight: FontWeight.w500, color: color),
             ),
             Container(
-              alignment: Alignment(1, 0.8),
-              width: 20,
+              alignment: Alignment(1, 0.9),
+              width: 30,
               height: 150,
-              child: Icon(
-                Icons.ac_unit,
-                color: Colors.white,
+              child: AnimatedCrossFade(
+                firstChild: Image.asset(
+                  "assets/images/play.png",
+                  color: color,
+                ),
+                secondChild: SpeakAnim(),
+                crossFadeState: ttsState == TtsState.playing
+                    ? CrossFadeState.showSecond
+                    : CrossFadeState.showFirst,
+                duration: Duration(milliseconds: 150),
               ),
             ),
-            Text("$ttsState"),
           ],
         ),
       ),

lib/views/pages/home/real_time_temp.dart

@@ -0,0 +1,78 @@
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+
+class SpeakAnim extends StatefulWidget {
+  @override
+  _SpeakAnimState createState() => _SpeakAnimState();
+}
+
+class _SpeakAnimState extends State<SpeakAnim>
+    with SingleTickerProviderStateMixin {
+  AnimationController _controller;
+  Animation<double> animation;
+
+  @override
+  void initState() {
+    _controller = new AnimationController(
+        vsync: this, duration: Duration(seconds: 6));
+    animation = Tween<double>(begin: 0, end: 30).animate(_controller)
+      ..addListener(() {
+        setState(() {});
+      });
+    _controller.repeat();
+    super.initState();
+  }
+
+  @override
+  void deactivate() {
+    _controller.stop();
+    super.deactivate();
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      child: CustomPaint(
+        painter: SpeakPainter(animation.value),
+        size: Size(25, 15),
+      ),
+    );
+  }
+}
+
+class SpeakPainter extends CustomPainter {
+
+  final double itemWidth = 3;
+  Paint _paint = Paint();
+  final double value;
+
+  SpeakPainter(this.value);
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    var width = size.width;
+    var height = size.height;
+    _paint.color = Colors.white;
+    _paint.style = PaintingStyle.fill;
+    _paint.isAntiAlias = true;
+    double startX = -width;
+    int count = width ~/ itemWidth;
+    for (int i = 0; i < count; i++) {
+      double x = startX + itemWidth * 2 * i + value;
+      double y = (sin(x) + 1) * height / 3 + height / 3;
+      canvas.drawRRect(RRect.fromLTRBAndCorners(x, height - y, x + itemWidth, height, topLeft: Radius.circular(4), topRight: Radius.circular(4)), _paint);
+    }
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) {
+    return true;
+  }
+}

lib/views/pages/home/speak_anim.dart

@@ -82,6 +82,7 @@ flutter:
     - assets/images/typhoon.png
     - assets/images/thunder.webp
     - assets/images/sun.webp
+    - assets/images/play.png
 
     - assets/images/weather/
     - assets/images/lightning/