Add animations for coupon creation success view

Author: itsmeichigo

WooCommerce/Classes/ViewRelated/Coupons/Add and Edit Coupons/CouponCreationSuccess.swift

@@ -6,27 +6,28 @@ struct CouponCreationSuccess: View {
     let couponCode: String
     let shareMessage: String
     let onDismiss: () -> Void
-    @State private var showingShareSheet: Bool = false
 
+    @State private var showingShareSheet: Bool = false
+    @State private var imageScale = Constants.initialImageScale
+    @State private var imageBottomSpace = Constants.initialImageBottomSpacing
+    @State private var textOpacity = Constants.initialTextOpacity
+    @State private var buttonsVerticalOffset = Constants.initialButtonsVerticalOffset
 
     var body: some View {
         VStack(alignment: .center, spacing: 0) {
-            // Anchor the action sheet at the top to be able to show the popover on iPad in the most appropriate position
-            Divider()
-                .shareSheet(isPresented: $showingShareSheet) {
-                    ShareSheet(activityItems: [shareMessage])
-                }
-
             Spacer()
 
             VStack(alignment: .leading, spacing: 0) {
                 Image(uiImage: UIImage.checkSuccessImage)
-                    .padding(.bottom, Constants.imageBottomSpacing)
+                    .padding(.bottom, imageBottomSpace)
+                    .scaleEffect(imageScale)
                 Text(Localization.successMessage)
                     .font(.largeTitle)
                     .bold()
+                    .opacity(textOpacity)
                 Text(couponCode)
                     .font(.largeTitle)
+                    .opacity(textOpacity)
             }
             .padding(Constants.contentPadding)
 
@@ -38,21 +39,73 @@ struct CouponCreationSuccess: View {
                     // TODO: add analytics
                 }
                 .buttonStyle(PrimaryButtonStyle())
+                .shareSheet(isPresented: $showingShareSheet) {
+                    ShareSheet(activityItems: [shareMessage])
+                }
 
                 Button(Localization.close) {
                     onDismiss()
                 }
                 .buttonStyle(SecondaryButtonStyle())
             }
             .padding(Constants.contentPadding)
+            .offset(x: 0, y: buttonsVerticalOffset)
+        }
+        .onAppear {
+            animateEntry()
+        }
+    }
+
+    func animateEntry() {
+        let buttonGroupAnimation = Animation.easeIn(duration: Constants.buttonGroupAnimationDuration)
+
+        let imageAnimation = Animation
+            .interpolatingSpring(stiffness: Constants.imageAnimationStiffness,
+                                 damping: Constants.imageAnimationDamping,
+                                 initialVelocity: Constants.imageAnimationInitialVelocity)
+            .delay(Constants.imageAnimationDelay)
+
+        let textAnimation = Animation
+            .easeIn(duration: Constants.textAnimationDuration)
+            .delay(Constants.textAnimationDelay)
+
+        withAnimation(buttonGroupAnimation) {
+            buttonsVerticalOffset = Constants.finalButtonsVerticalOffset
+        }
+
+        withAnimation(imageAnimation) {
+            imageScale = Constants.finalImageScale
+        }
+
+        withAnimation(textAnimation) {
+            imageBottomSpace = Constants.finalImageBottomSpacing
+            textOpacity = Constants.finalTextOpacity
         }
     }
 }
 
 private extension CouponCreationSuccess {
     enum Constants {
-        static let imageBottomSpacing: CGFloat = 40
         static let contentPadding: CGFloat = 16
+
+        static let initialImageBottomSpacing: CGFloat = 80
+        static let finalImageBottomSpacing: CGFloat = 40
+        static let initialImageScale: CGFloat = 0
+        static let finalImageScale: CGFloat = 1
+
+        static let initialTextOpacity: CGFloat = 0
+        static let finalTextOpacity: CGFloat = 1
+
+        static let initialButtonsVerticalOffset: CGFloat = 300
+        static let finalButtonsVerticalOffset: CGFloat = 0
+
+        static let buttonGroupAnimationDuration: CGFloat = 0.3
+        static let imageAnimationStiffness: CGFloat = 150
+        static let imageAnimationDamping: CGFloat = 15
+        static let imageAnimationInitialVelocity: CGFloat = 3
+        static let imageAnimationDelay: CGFloat = 0.7
+        static let textAnimationDuration: CGFloat = 0.3
+        static let textAnimationDelay: CGFloat = 0.5
     }
 
     enum Localization {