透明度动画

lib/muyu/animate_text.dart

@@ -0,0 +1,45 @@
+import 'package:flutter/material.dart';
+
+class AnimateText extends StatefulWidget {
+  final String text;
+
+  const AnimateText({Key? key, required this.text}) : super(key: key);
+
+  @override
+  State<AnimateText> createState() => _FadTextState();
+}
+
+class _FadTextState extends State<AnimateText> with SingleTickerProviderStateMixin {
+  late AnimationController controller;
+  late Animation<double> opacity;
+  late Animation<Offset> position;
+  late Animation<double> scale;
+
+  @override
+  void initState() {
+    super.initState();
+    controller = AnimationController(vsync: this, duration: const Duration(milliseconds: 500));
+    opacity = Tween(begin: 1.0, end: 0.0).animate(controller);
+    controller.forward();
+  }
+
+  @override
+  void didUpdateWidget(covariant AnimateText oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    controller.forward(from: 0);
+  }
+
+  @override
+  void dispose() {
+    controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return FadeTransition(
+      opacity: opacity,
+      child: Text(widget.text),
+    );
+  }
+}

lib/muyu/muyu_page.dart

@@ -2,6 +2,7 @@ import 'dart:math';
 
 import 'package:flame_audio/flame_audio.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_first_station/muyu/animate_text.dart';
 import 'muyu_image.dart';
 
 import 'count_panel.dart';
@@ -16,6 +17,8 @@ class MuyuPage extends StatefulWidget {
 
 class _MuyuPageState extends State<MuyuPage> {
   int _counter = 0;
+  int _cruValue = 2;
+
   final Random _random = Random();
 
   AudioPool? pool;
@@ -49,9 +52,15 @@ class _MuyuPageState extends State<MuyuPage> {
             ),
           ),
           Expanded(
-            child: MuyuAssetsImage(
-              image: 'assets/images/muyu.png',
-              onTap: _onKnock,
+            child: Stack(
+              alignment: Alignment.topCenter,
+              children: [
+                MuyuAssetsImage(
+                  image: 'assets/images/muyu.png',
+                  onTap: _onKnock,
+                ),
+                if (_cruValue != 0) AnimateText(text: '功德+$_cruValue')
+              ],
             ),
           ),
         ],
@@ -68,8 +77,8 @@ class _MuyuPageState extends State<MuyuPage> {
   void _onKnock() {
     pool?.start();
     setState(() {
-      int addCount = 1 + _random.nextInt(3);
-      _counter += addCount;
+      _cruValue = 1 + _random.nextInt(3);
+      _counter += _cruValue;
     });
   }
 }