From 38fa9f7942f40f0bb4c9782e08405bdc968146c6 Mon Sep 17 00:00:00 2001
From: Richard Shiue <71320345+richardshiue@users.noreply.github.com>
Date: Mon, 13 May 2024 14:58:28 +0800
Subject: [PATCH] chore: improve floating mobile toolbar animation for iOS
 (#5309)

---
 .../custom_mobile_floating_toolbar.dart       | 39 +++++++++++++++----
 1 file changed, 31 insertions(+), 8 deletions(-)

diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_floating_toolbar/custom_mobile_floating_toolbar.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_floating_toolbar/custom_mobile_floating_toolbar.dart
index 6b374f79f8..e3b320a63d 100644
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_floating_toolbar/custom_mobile_floating_toolbar.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_floating_toolbar/custom_mobile_floating_toolbar.dart
@@ -1,3 +1,5 @@
+import 'dart:io';
+
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:easy_localization/easy_localization.dart';
@@ -100,14 +102,7 @@ class CustomMobileFloatingToolbar extends StatelessWidget {
   Widget build(BuildContext context) {
     return Animate(
       autoPlay: true,
-      effects: [
-        const FadeEffect(duration: SelectionOverlay.fadeDuration),
-        MoveEffect(
-          curve: Curves.easeOutCubic,
-          begin: const Offset(0, 16),
-          duration: 100.milliseconds,
-        ),
-      ],
+      effects: _getEffects(context),
       child: AdaptiveTextSelectionToolbar.buttonItems(
         buttonItems: buildMobileFloatingToolbarItems(
           editorState,
@@ -120,4 +115,32 @@ class CustomMobileFloatingToolbar extends StatelessWidget {
       ),
     );
   }
+
+  List<Effect> _getEffects(BuildContext context) {
+    if (Platform.isIOS) {
+      final Size(:width, :height) = MediaQuery.of(context).size;
+      final alignmentX = (anchor.dx - width / 2) / (width / 2);
+      final alignmentY = (anchor.dy - height / 2) / (height / 2);
+      return [
+        ScaleEffect(
+          curve: Curves.easeInOut,
+          alignment: Alignment(alignmentX, alignmentY),
+          duration: 250.milliseconds,
+        ),
+      ];
+    } else if (Platform.isAndroid) {
+      return [
+        const FadeEffect(
+          duration: SelectionOverlay.fadeDuration,
+        ),
+        MoveEffect(
+          curve: Curves.easeOutCubic,
+          begin: const Offset(0, 16),
+          duration: 100.milliseconds,
+        ),
+      ];
+    } else {
+      return [];
+    }
+  }
 }