feat: new pay coin page

README.md

@@ -41,6 +41,7 @@
 
 ## feat
 
+- [x] 投币动画
 - [x] 取消/追番，更新追番状态
 - [x] 取消/订阅合集
 - [x] SponsorBlock

lib/common/widgets/self_sized_horizontal_list.dart

@@ -7,6 +7,7 @@ class SelfSizedHorizontalList extends StatefulWidget {
   final int itemCount;
   final double gapSize;
   final EdgeInsetsGeometry? padding;
+
   const SelfSizedHorizontalList({
     super.key,
     required this.childBuilder,

lib/pages/bangumi/introduction/controller.dart

@@ -4,10 +4,12 @@ import 'package:PiliPalaX/http/init.dart';
 import 'package:PiliPalaX/http/loading_state.dart';
 import 'package:PiliPalaX/http/user.dart';
 import 'package:PiliPalaX/pages/common/common_controller.dart';
+import 'package:PiliPalaX/pages/video/detail/introduction/controller.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
 import 'package:get/get.dart';
+import 'package:get/get_navigation/src/dialog/dialog_route.dart';
 import 'package:hive/hive.dart';
 import 'package:PiliPalaX/http/constants.dart';
 import 'package:PiliPalaX/http/search.dart';
@@ -175,66 +177,103 @@ class BangumiIntroController extends CommonController {
     }
   }
 
+  void coinVideo(int coin) async {
+    var res = await VideoHttp.coinVideo(bvid: bvid, multiply: _tempThemeValue);
+    if (res['status']) {
+      SmartDialog.showToast('投币成功');
+      hasCoin.value = true;
+      dynamic bangumiDetail = (loadingState.value as Success).response;
+      bangumiDetail.stat!['coins'] =
+          bangumiDetail.stat!['coins'] + _tempThemeValue;
+      loadingState.value = LoadingState.success(bangumiDetail);
+    } else {
+      SmartDialog.showToast(res['msg']);
+    }
+  }
+
   // 投币
   Future actionCoinVideo() async {
     if (userInfo == null) {
       SmartDialog.showToast('账号未登录');
       return;
     }
-    showDialog(
+    Navigator.of(Get.context!).push(
-        context: Get.context!,
+      GetDialogRoute(
-        builder: (context) {
+        pageBuilder: (buildContext, animation, secondaryAnimation) {
-          return AlertDialog(
+          return PayCoinsPage(
-            title: const Text('选择投币个数'),
+            callback: coinVideo,
-            contentPadding: const EdgeInsets.fromLTRB(0, 12, 0, 12),
-            content: StatefulBuilder(builder: (context, StateSetter setState) {
-              return Column(
-                mainAxisSize: MainAxisSize.min,
-                children: [
-                  RadioListTile(
-                    value: 1,
-                    title: const Text('1枚'),
-                    groupValue: _tempThemeValue,
-                    onChanged: (value) {
-                      _tempThemeValue = value!;
-                      Get.appUpdate();
-                    },
-                  ),
-                  RadioListTile(
-                    value: 2,
-                    title: const Text('2枚'),
-                    groupValue: _tempThemeValue,
-                    onChanged: (value) {
-                      _tempThemeValue = value!;
-                      Get.appUpdate();
-                    },
-                  ),
-                ],
-              );
-            }),
-            actions: [
-              TextButton(onPressed: () => Get.back(), child: const Text('取消')),
-              TextButton(
-                  onPressed: () async {
-                    var res = await VideoHttp.coinVideo(
-                        bvid: bvid, multiply: _tempThemeValue);
-                    if (res['status']) {
-                      SmartDialog.showToast('投币成功');
-                      hasCoin.value = true;
-                      dynamic bangumiDetail =
-                          (loadingState.value as Success).response;
-                      bangumiDetail.stat!['coins'] =
-                          bangumiDetail.stat!['coins'] + _tempThemeValue;
-                      loadingState.value = LoadingState.success(bangumiDetail);
-                    } else {
-                      SmartDialog.showToast(res['msg']);
-                    }
-                    Get.back();
-                  },
-                  child: const Text('确定'))
-            ],
           );
-        });
+        },
+        transitionDuration: const Duration(milliseconds: 225),
+        transitionBuilder: (context, animation, secondaryAnimation, child) {
+          const begin = 0.0;
+          const end = 1.0;
+          const curve = Curves.linear;
+
+          var tween = Tween<double>(begin: begin, end: end)
+              .chain(CurveTween(curve: curve));
+
+          return FadeTransition(
+            opacity: animation.drive(tween),
+            child: child,
+          );
+        },
+      ),
+    );
+    // showDialog(
+    //     context: Get.context!,
+    //     builder: (context) {
+    //       return AlertDialog(
+    //         title: const Text('选择投币个数'),
+    //         contentPadding: const EdgeInsets.fromLTRB(0, 12, 0, 12),
+    //         content: StatefulBuilder(builder: (context, StateSetter setState) {
+    //           return Column(
+    //             mainAxisSize: MainAxisSize.min,
+    //             children: [
+    //               RadioListTile(
+    //                 value: 1,
+    //                 title: const Text('1枚'),
+    //                 groupValue: _tempThemeValue,
+    //                 onChanged: (value) {
+    //                   _tempThemeValue = value!;
+    //                   Get.appUpdate();
+    //                 },
+    //               ),
+    //               RadioListTile(
+    //                 value: 2,
+    //                 title: const Text('2枚'),
+    //                 groupValue: _tempThemeValue,
+    //                 onChanged: (value) {
+    //                   _tempThemeValue = value!;
+    //                   Get.appUpdate();
+    //                 },
+    //               ),
+    //             ],
+    //           );
+    //         }),
+    //         actions: [
+    //           TextButton(onPressed: () => Get.back(), child: const Text('取消')),
+    //           TextButton(
+    //               onPressed: () async {
+    //                 var res = await VideoHttp.coinVideo(
+    //                     bvid: bvid, multiply: _tempThemeValue);
+    //                 if (res['status']) {
+    //                   SmartDialog.showToast('投币成功');
+    //                   hasCoin.value = true;
+    //                   dynamic bangumiDetail =
+    //                       (loadingState.value as Success).response;
+    //                   bangumiDetail.stat!['coins'] =
+    //                       bangumiDetail.stat!['coins'] + _tempThemeValue;
+    //                   loadingState.value = LoadingState.success(bangumiDetail);
+    //                 } else {
+    //                   SmartDialog.showToast(res['msg']);
+    //                 }
+    //                 Get.back();
+    //               },
+    //               child: const Text('确定'))
+    //         ],
+    //       );
+    //     });
   }
 
   // （取消）收藏 bangumi

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

@@ -1,10 +1,12 @@
 import 'dart:async';
+import 'dart:math';
 
 import 'package:PiliPalaX/http/loading_state.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
 import 'package:get/get.dart';
+import 'package:get/get_navigation/src/dialog/dialog_route.dart';
 import 'package:hive/hive.dart';
 import 'package:PiliPalaX/http/constants.dart';
 import 'package:PiliPalaX/http/user.dart';
@@ -280,51 +282,76 @@ class VideoIntroController extends GetxController {
     }
   }
 
+  void coinVideo(int coin) async {
+    var res = await VideoHttp.coinVideo(bvid: bvid, multiply: coin);
+    if (res['status']) {
+      print(res);
+      SmartDialog.showToast('投币成功');
+      hasCoin.value = true;
+      videoDetail.value.stat!.coin = videoDetail.value.stat!.coin! + coin;
+    } else {
+      SmartDialog.showToast(res['msg']);
+    }
+  }
+
   // 投币
   Future actionCoinVideo() async {
     if (userInfo == null) {
       SmartDialog.showToast('账号未登录');
       return;
     }
-    void coinVideo(int coin) async {
-      var res = await VideoHttp.coinVideo(bvid: bvid, multiply: coin);
-      if (res['status']) {
-        print(res);
-        SmartDialog.showToast('投币成功');
-        hasCoin.value = true;
-        videoDetail.value.stat!.coin = videoDetail.value.stat!.coin! + coin;
-      } else {
-        SmartDialog.showToast(res['msg']);
-      }
-    }
 
-    showDialog(
+    Navigator.of(Get.context!).push(
-        context: Get.context!,
+      GetDialogRoute(
-        builder: (context) {
+        pageBuilder: (buildContext, animation, secondaryAnimation) {
-          return AlertDialog(
+          return PayCoinsPage(
-            title: const Text('选择投币个数'),
+            callback: coinVideo,
-            contentPadding: const EdgeInsets.fromLTRB(0, 12, 0, 12),
-            actions: [
-              TextButton(
-                  onPressed: () => Get.back(),
-                  child: Text('取消',
-                      style: TextStyle(
-                          color: Theme.of(context).colorScheme.outline))),
-              TextButton(
-                  onPressed: () async {
-                    coinVideo(1);
-                    Get.back();
-                  },
-                  child: const Text('投 1 枚')),
-              TextButton(
-                  onPressed: () async {
-                    coinVideo(1);
-                    Get.back();
-                  },
-                  child: const Text('投 2 枚'))
-            ],
           );
-        });
+        },
+        transitionDuration: const Duration(milliseconds: 225),
+        transitionBuilder: (context, animation, secondaryAnimation, child) {
+          const begin = 0.0;
+          const end = 1.0;
+          const curve = Curves.linear;
+
+          var tween = Tween<double>(begin: begin, end: end)
+              .chain(CurveTween(curve: curve));
+
+          return FadeTransition(
+            opacity: animation.drive(tween),
+            child: child,
+          );
+        },
+      ),
+    );
+    // showDialog(
+    //   context: Get.context!,
+    //   builder: (context) {
+    //     return AlertDialog(
+    //       title: const Text('选择投币个数'),
+    //       contentPadding: const EdgeInsets.fromLTRB(0, 12, 0, 12),
+    //       actions: [
+    //         TextButton(
+    //             onPressed: () => Get.back(),
+    //             child: Text('取消',
+    //                 style: TextStyle(
+    //                     color: Theme.of(context).colorScheme.outline))),
+    //         TextButton(
+    //             onPressed: () async {
+    //               coinVideo(1);
+    //               Get.back();
+    //             },
+    //             child: const Text('投 1 枚')),
+    //         TextButton(
+    //             onPressed: () async {
+    //               coinVideo(2);
+    //               Get.back();
+    //             },
+    //             child: const Text('投 2 枚'))
+    //       ],
+    //     );
+    //   },
+    // );
   }
 
   // （取消）收藏
@@ -694,3 +721,281 @@ class VideoIntroController extends GetxController {
     return res;
   }
 }
+
+class PayCoinsPage extends StatefulWidget {
+  const PayCoinsPage({super.key, required this.callback});
+
+  final Function callback;
+
+  @override
+  State<PayCoinsPage> createState() => _PayCoinsPageState();
+}
+
+class _PayCoinsPageState extends State<PayCoinsPage>
+    with TickerProviderStateMixin {
+  bool _isPaying = false;
+  late final _controller = PageController(viewportFraction: 0.30);
+
+  int get _index => _controller.hasClients ? _controller.page?.round() ?? 0 : 0;
+
+  late AnimationController _slide22Controller;
+  late AnimationController _scale22Controller;
+  late AnimationController _coinSlideController;
+  late AnimationController _coinFadeController;
+  late AnimationController _boxAnimController;
+
+  @override
+  void initState() {
+    super.initState();
+    _slide22Controller = AnimationController(
+      vsync: this,
+      duration: const Duration(milliseconds: 50),
+    );
+    _scale22Controller = AnimationController(
+      vsync: this,
+      duration: const Duration(milliseconds: 50),
+    );
+    _coinSlideController = AnimationController(
+      vsync: this,
+      duration: const Duration(milliseconds: 200),
+    );
+    _coinFadeController = AnimationController(
+      vsync: this,
+      duration: const Duration(milliseconds: 100),
+    );
+    _boxAnimController = AnimationController(
+      vsync: this,
+      duration: const Duration(milliseconds: 50),
+    );
+    _scale();
+  }
+
+  @override
+  void dispose() {
+    _slide22Controller.dispose();
+    _scale22Controller.dispose();
+    _coinSlideController.dispose();
+    _coinFadeController.dispose();
+    _boxAnimController.dispose();
+    _controller.dispose();
+    super.dispose();
+  }
+
+  void _scale() {
+    _scale22Controller.forward().whenComplete(() {
+      _scale22Controller.reverse();
+    });
+  }
+
+  void _onScroll(int index) {
+    _controller.animateToPage(
+      index,
+      duration: const Duration(milliseconds: 200),
+      curve: Curves.ease,
+    );
+    _scale();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(builder: (_, constraints) {
+      return _buildBody(constraints.maxHeight > constraints.maxWidth);
+    });
+  }
+
+  Widget _buildBody(isV) => Column(
+        mainAxisAlignment: MainAxisAlignment.end,
+        children: [
+          Row(
+            children: [
+              Visibility(
+                visible: !_isPaying,
+                maintainSize: true,
+                maintainAnimation: true,
+                maintainState: true,
+                child: GestureDetector(
+                  onTap: _index == 0
+                      ? null
+                      : () {
+                          _onScroll(0);
+                        },
+                  child: Padding(
+                    padding: const EdgeInsets.only(left: 12),
+                    child: Image.asset(
+                      width: 16,
+                      height: 28,
+                      _index == 0
+                          ? 'assets/images/paycoins/ic_left_disable.png'
+                          : 'assets/images/paycoins/ic_left.png',
+                    ),
+                  ),
+                ),
+              ),
+              Expanded(
+                child: SizedBox(
+                  height: 100,
+                  child: PageView.builder(
+                    itemCount: 2,
+                    controller: _controller,
+                    onPageChanged: (index) => setState(() {
+                      _scale();
+                    }),
+                    itemBuilder: (context, index) {
+                      return ListenableBuilder(
+                        listenable: _controller,
+                        builder: (context, child) {
+                          double factor = index == 0 ? 1 : 0;
+                          if (_controller.position.hasContentDimensions) {
+                            factor = 1 - (_controller.page! - index).abs();
+                          }
+                          return Visibility(
+                            visible: !_isPaying || _index == index,
+                            child: Center(
+                              child: SizedBox(
+                                height: 70 + (factor * 30),
+                                width: 70 + (factor * 30),
+                                child: Stack(
+                                  alignment: Alignment.center,
+                                  children: [
+                                    SlideTransition(
+                                      position: _boxAnimController.drive(
+                                        Tween(
+                                          begin: const Offset(0.0, 0.0),
+                                          end: const Offset(0.0, -0.2),
+                                        ),
+                                      ),
+                                      child: Image.asset(
+                                        'assets/images/paycoins/ic_pay_coins_box.png',
+                                      ),
+                                    ),
+                                    SlideTransition(
+                                      position: _coinSlideController.drive(
+                                        Tween(
+                                          begin: const Offset(0.0, 0.0),
+                                          end: const Offset(0.0, -2),
+                                        ),
+                                      ),
+                                      child: FadeTransition(
+                                        opacity: Tween<double>(begin: 1, end: 0)
+                                            .animate(_coinFadeController),
+                                        child: Image.asset(
+                                          height: 35 + (factor * 15),
+                                          width: 35 + (factor * 15),
+                                          index == 0
+                                              ? 'assets/images/paycoins/ic_coins_one.png'
+                                              : 'assets/images/paycoins/ic_coins_two.png',
+                                        ),
+                                      ),
+                                    ),
+                                  ],
+                                ),
+                              ),
+                            ),
+                          );
+                        },
+                      );
+                    },
+                  ),
+                ),
+              ),
+              Visibility(
+                visible: !_isPaying,
+                maintainSize: true,
+                maintainAnimation: true,
+                maintainState: true,
+                child: GestureDetector(
+                  onTap: _index == 1
+                      ? null
+                      : () {
+                          _onScroll(1);
+                        },
+                  child: Padding(
+                    padding: const EdgeInsets.only(right: 12),
+                    child: Image.asset(
+                      width: 16,
+                      height: 28,
+                      _index == 1
+                          ? 'assets/images/paycoins/ic_right_disable.png'
+                          : 'assets/images/paycoins/ic_right.png',
+                    ),
+                  ),
+                ),
+              ),
+            ],
+          ),
+          const SizedBox(height: 25),
+          GestureDetector(
+            behavior: HitTestBehavior.opaque,
+            onPanUpdate: _handlePanUpdate,
+            child: SizedBox(
+              width: double.infinity,
+              height: 140,
+              child: Center(
+                child: GestureDetector(
+                  onPanUpdate: (e) => _handlePanUpdate(e, true),
+                  child: ScaleTransition(
+                    scale: _scale22Controller.drive(
+                      Tween(begin: 1, end: 1.2),
+                    ),
+                    child: SlideTransition(
+                      position: _slide22Controller.drive(
+                        Tween(
+                          begin: const Offset(0.0, 0.0),
+                          end: const Offset(0.0, -0.2),
+                        ),
+                      ),
+                      child: SizedBox(
+                        width: 100,
+                        height: 140,
+                        child: Image.asset(
+                          _index == 0
+                              ? 'assets/images/paycoins/ic_22_gun_sister.png'
+                              : 'assets/images/paycoins/ic_22_mario.png',
+                        ),
+                      ),
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ),
+          SizedBox(
+              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(() {
+          _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) {
+        if (_index == 1) {
+          _onScroll(0);
+          setState(() {});
+        }
+      } else {
+        if (_index == 0) {
+          _onScroll(1);
+          setState(() {});
+        }
+      }
+    }
+  }
+}

pubspec.yaml

@@ -252,6 +252,7 @@ flutter:
     - assets/images/logo/
     - assets/images/live/
     - assets/images/video/
+    - assets/images/paycoins/
   # An image asset can refer to one or more resolution-specific "variants", see
   # https://flutter.dev/assets-and-images/#resolution-aware