Jelajahi Sumber

添加lottie插件,增加选择预览的完成播放动画

云天逵 1 tahun lalu
induk
melakukan
9f0d8cf214

TEMPAT SAMPAH
assets/anim/anim_photo_selected_preview_fireworks.zip


TEMPAT SAMPAH
assets/images/bg_photo_selected_preview_finish.webp


TEMPAT SAMPAH
assets/images/icon_photo_selected_preview_fireworks.webp


+ 30 - 17
lib/module/photo_preview/photo_preview_view.dart

@@ -48,7 +48,8 @@ class PhotoPreviewPage extends BasePage<PhotoPreviewController> {
         child: SafeArea(
           child: Container(
             child: Obx(() {
-              if (controller.isSwiperEnd.value||controller.photoGroups.isEmpty) {
+              if (controller.isSwiperEnd.value ||
+                  controller.photoGroups.isEmpty) {
                 return onSwiperEndCard();
               } else {
                 return Column(
@@ -70,19 +71,23 @@ class PhotoPreviewPage extends BasePage<PhotoPreviewController> {
                         cardsCount: controller.photoGroups.length,
                         onSwipe: controller.onSwipe,
                         onUndo: controller.onSwiperUndo,
-                        numberOfCardsDisplayed: (controller.photoGroups.length == 1)
-                            ? 1
-                            : (controller.photoGroups.length == 2)
-                            ? 2
-                            : 3,
+                        numberOfCardsDisplayed:
+                            (controller.photoGroups.length == 1)
+                                ? 1
+                                : (controller.photoGroups.length == 2)
+                                    ? 2
+                                    : 3,
                         onEnd: controller.onSwiperEnd,
-                        cardBuilder: (context, index, horizontalOffsetPercentage,
+                        cardBuilder: (context,
+                            index,
+                            horizontalOffsetPercentage,
                             verticalOffsetPercentage) {
                           final assetEntity = controller.photoGroups[index];
                           return AssetEntityImage(
                             assetEntity,
                             width: 314.w,
                             height: 392.h,
+                            fit: BoxFit.cover,
                           );
                         },
                       ),
@@ -97,16 +102,26 @@ class PhotoPreviewPage extends BasePage<PhotoPreviewController> {
           ),
         ),
       )),
-      IgnorePointer(
-        child: Assets.images.bgHome.image(
-          width: 360.w,
-          height: 234.h,
-        ),
-      ),
+      Obx(() {
+        if (controller.isSwiperEnd.value || controller.photoGroups.isEmpty) {
+          return IgnorePointer(
+            child: Assets.images.bgPreviewSwiperEndFirework.image(
+              width: 360.w,
+              height: 234.h,
+            ),
+          );
+        } else {
+          return IgnorePointer(
+            child: Assets.images.bgHome.image(
+              width: 360.w,
+              height: 234.h,
+            ),
+          );
+        }
+      }),
     ]);
   }
 
-
   Widget _titleCard() {
     return Container(
       alignment: Alignment.centerLeft,
@@ -310,10 +325,8 @@ class PhotoPreviewPage extends BasePage<PhotoPreviewController> {
           ),
         ),
         Spacer(),
-        controller.photoGroups.isEmpty? SizedBox() : _bottomBarCard(),
+        controller.photoGroups.isEmpty ? SizedBox() : _bottomBarCard(),
       ],
     );
   }
-
-
 }

+ 17 - 0
lib/module/photo_preview/photo_selected_preview_controller.dart

@@ -4,6 +4,7 @@ import 'package:clean/module/image_picker/image_picker_util.dart';
 import 'package:clean/module/people_photo/photo_group.dart';
 import 'package:clean/module/photo_preview/photo_preview_controller.dart';
 import 'package:clean/utils/toast_util.dart';
+import 'package:flutter/Material.dart';
 import 'package:get/get.dart';
 import 'package:wechat_assets_picker/wechat_assets_picker.dart';
 
@@ -19,12 +20,20 @@ class PhotoSelectedPreviewController extends BaseController {
   PhotoPreviewController photoPreviewController =
       Get.find<PhotoPreviewController>();
 
+
+
+
+
   @override
   onInit() {
     super.onInit();
     _getArgs();
 
     loadPhotoSelectedPreview();
+
+
+
+
   }
 
   _getArgs() {
@@ -167,6 +176,14 @@ class PhotoSelectedPreviewController extends BaseController {
       }
     }
     selectedFilesSize.value = totalSize / 1024; // Convert to KB
+    //  如果超过1MB转成MB
+    if (selectedFilesSize.value > 1024) {
+      selectedFilesSize.value = selectedFilesSize.value / 1024;
+    }
+    //   如果超过1GB转成GB
+    if (selectedFilesSize.value > 1024 * 1024) {
+      selectedFilesSize.value = selectedFilesSize.value / 1024 / 1024;
+    }
   }
 
   void clickImage(List<AssetEntity> images, int imageIndex) {

+ 76 - 8
lib/module/photo_preview/phtoto_selected_preview_view.dart

@@ -6,6 +6,7 @@ import 'package:clean/router/app_pages.dart';
 import 'package:flutter/Material.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:get/get_core/src/get_main.dart';
+import 'package:lottie/lottie.dart';
 import 'package:wechat_assets_picker/wechat_assets_picker.dart';
 import 'package:get/get.dart';
 
@@ -38,7 +39,7 @@ class PhotoSelectedPreviewPage
           child: Obx(() {
             if (controller.photoGroups.isEmpty ||
                 controller.photoGroups[0].images.isEmpty) {
-              return _noNoPicturesCard();
+              return _finishCleanCard();
             }
             return Column(
               children: [
@@ -76,19 +77,32 @@ class PhotoSelectedPreviewPage
           }),
         ),
       ),
-      IgnorePointer(
-        child: Assets.images.bgHome.image(
-          width: 360.w,
-          height: 234.h,
-        ),
-      ),
+      Obx(() {
+        if (controller.photoGroups.isEmpty ||
+            controller.photoGroups[0].images.isEmpty) {
+          return IgnorePointer(
+            child: Assets.images.bgPhotoSelectedPreviewFinish.image(
+              width: 360.w,
+              height: 335.h,
+            ),
+          );
+        } else {
+          return IgnorePointer(
+            child: Assets.images.bgHome.image(
+              width: 360.w,
+              height: 234.h,
+            ),
+          );
+        }
+      }),
     ]);
   }
 
   Widget _titleCard() {
     return Container(
       alignment: Alignment.centerLeft,
-      padding: EdgeInsets.only(left: 16.w, top: 14.h, right: 16.w,bottom: 20.h),
+      padding:
+          EdgeInsets.only(left: 16.w, top: 14.h, right: 16.w, bottom: 20.h),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
@@ -271,4 +285,58 @@ class PhotoSelectedPreviewPage
       ],
     );
   }
+
+  Widget _finishCleanCard() {
+    return Container(
+      width: 360.w,
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.start,
+        children: [
+          Spacer(
+            flex: 3,
+          ),
+          Text(
+            'Great!',
+            textAlign: TextAlign.center,
+            style: TextStyle(
+              color: Colors.white,
+              fontSize: 32.sp,
+              fontWeight: FontWeight.w700,
+            ),
+          ),
+          SizedBox(height: 14.h),
+          Text(
+            "You've completed 1 photo review",
+            textAlign: TextAlign.center,
+            style: TextStyle(
+              color: Colors.white.withValues(alpha: 0.8),
+              fontSize: 16.sp,
+              fontWeight: FontWeight.w400,
+            ),
+          ),
+          SizedBox(height: 47.h),
+          // Assets.images.iconPhotoSelectedPreviewFireworks.image(
+          //   width: 158.w,
+          //   height: 158.h,
+          // ),
+
+          SizedBox(
+
+              child: Lottie.asset(
+                Assets.anim.animPhotoSelectedPreviewFireworks,
+
+                width: 158.w,
+                height: 158.w,
+
+                repeat: false,
+
+              )),
+
+          Spacer(
+            flex: 5,
+          ),
+        ],
+      ),
+    );
+  }
 }

+ 5 - 0
pubspec.yaml

@@ -94,6 +94,10 @@ dependencies:
   classify_photo:
     path: plugins/classify_photo
 
+  #    动画
+  lottie: ^3.3.1
+
+
 dev_dependencies:
   flutter_test:
     sdk: flutter
@@ -135,6 +139,7 @@ flutter:
 
   assets:
     - assets/images/
+    - assets/anim/
 
   # To add assets to your application, add an assets section, like this:
   # assets: