opt: coin: show thunder

lib/pages/video/detail/introduction/controller.dart

@@ -744,6 +744,15 @@ class _PayCoinsPageState extends State<PayCoinsPage>
   late AnimationController _coinFadeController;
   late AnimationController _boxAnimController;
 
+  final List _images = [
+    'assets/images/paycoins/ic_thunder_1.png',
+    'assets/images/paycoins/ic_thunder_2.png',
+    'assets/images/paycoins/ic_thunder_3.png',
+  ];
+  late int _imageIndex = -1;
+  Timer? _timer;
+  bool get _showThunder => _imageIndex != -1 && _imageIndex != _images.length;
+
   @override
   void initState() {
     super.initState();
@@ -772,6 +781,7 @@ class _PayCoinsPageState extends State<PayCoinsPage>
 
   @override
   void dispose() {
+    _timer?.cancel();
     _slide22Controller.dispose();
     _scale22Controller.dispose();
     _coinSlideController.dispose();
@@ -803,7 +813,17 @@ class _PayCoinsPageState extends State<PayCoinsPage>
     });
   }
 
-  Widget _buildBody(isV) => Column(
+  Widget _buildBody(isV) => Stack(
+        alignment: Alignment.center,
+        children: [
+          Visibility(
+            visible: _showThunder,
+            maintainSize: true,
+            maintainAnimation: true,
+            maintainState: true,
+            child: Image.asset(_images[_showThunder ? _imageIndex : 0]),
+          ),
+          Column(
             mainAxisAlignment: MainAxisAlignment.end,
             children: [
               Row(
@@ -876,7 +896,8 @@ class _PayCoinsPageState extends State<PayCoinsPage>
                                             ),
                                           ),
                                           child: FadeTransition(
-                                        opacity: Tween<double>(begin: 1, end: 0)
+                                            opacity: Tween<double>(
+                                                    begin: 1, end: 0)
                                                 .animate(_coinFadeController),
                                             child: Image.asset(
                                               height: 35 + (factor * 15),
@@ -932,6 +953,7 @@ class _PayCoinsPageState extends State<PayCoinsPage>
                   height: 140,
                   child: Center(
                     child: GestureDetector(
+                      onTap: _onPayCoin,
                       onPanUpdate: (e) => _handlePanUpdate(e, true),
                       child: ScaleTransition(
                         scale: _scale22Controller.drive(
@@ -960,29 +982,17 @@ class _PayCoinsPageState extends State<PayCoinsPage>
                 ),
               ),
               SizedBox(
-              height: (isV ? 50 : 0) + MediaQuery.of(context).padding.bottom),
+                  height:
+                      (isV ? 50 : 0) + MediaQuery.of(context).padding.bottom),
+            ],
+          ),
         ],
       );
 
   void _handlePanUpdate(DragUpdateDetails e, [bool needV = false]) {
     if (needV && e.delta.dy.abs() > max(2, e.delta.dx.abs())) {
       if (e.delta.dy < 0) {
-        setState(() {
+        _onPayCoin();
-          _isPaying = true;
-        });
-        _slide22Controller.forward().whenComplete(() {
-          _slide22Controller.reverse().whenComplete(() {
-            _boxAnimController.forward().whenComplete(() {
-              _boxAnimController.reverse();
-            });
-            _coinSlideController.forward().whenComplete(() {
-              _coinFadeController.forward().whenComplete(() {
-                Get.back();
-                widget.callback(_index + 1);
-              });
-            });
-          });
-        });
       }
     } else if (e.delta.dx.abs() > max(2, e.delta.dy.abs())) {
       if (e.delta.dx > 0) {
@@ -998,4 +1008,35 @@ class _PayCoinsPageState extends State<PayCoinsPage>
       }
     }
   }
+
+  void _onPayCoin() {
+    if (_isPaying) return;
+    setState(() {
+      _isPaying = true;
+    });
+    _slide22Controller.forward().whenComplete(() {
+      _slide22Controller.reverse().whenComplete(() {
+        if (_index == 1) {
+          _timer ??= Timer.periodic(const Duration(milliseconds: 50 ~/ 3), (_) {
+            if (_imageIndex != _images.length) {
+              setState(() {
+                _imageIndex = _imageIndex + 1;
+              });
+            } else {
+              _timer?.cancel();
+            }
+          });
+        }
+        _boxAnimController.forward().whenComplete(() {
+          _boxAnimController.reverse();
+        });
+        _coinSlideController.forward().whenComplete(() {
+          _coinFadeController.forward().whenComplete(() {
+            Get.back();
+            widget.callback(_index + 1);
+          });
+        });
+      });
+    });
+  }
 }