Merge pull request #102 from componentskit/smooth-scale-animation

Make scale animations in buttons and cards smoother

Author: mikhailChelbaev

Sources/ComponentsKit/Components/Button/SUButton.swift

@@ -9,8 +9,8 @@ public struct SUButton: View {
   /// A closure that is triggered when the button is tapped.
   public var action: () -> Void
 
-  /// A Boolean value indicating whether the button is pressed.
-  @State public var isPressed: Bool = false
+  /// A current scale effect value.
+  @State public var scale: CGFloat = 1.0
 
   // MARK: Initialization
 
@@ -37,17 +37,15 @@ public struct SUButton: View {
     .buttonStyle(CustomButtonStyle(model: self.model))
     .simultaneousGesture(DragGesture(minimumDistance: 0.0)
       .onChanged { _ in
-        self.isPressed = true
+        self.scale = self.model.animationScale.value
       }
       .onEnded { _ in
-        self.isPressed = false
+        self.scale = 1.0
       }
     )
     .disabled(!self.model.isInteractive)
-    .scaleEffect(
-      self.isPressed ? self.model.animationScale.value : 1,
-      anchor: .center
-    )
+    .scaleEffect(self.scale, anchor: .center)
+    .animation(.easeOut(duration: 0.05), value: self.scale)
   }
 
   @ViewBuilder

Sources/ComponentsKit/Components/Button/UKButton.swift

@@ -18,12 +18,14 @@ open class UKButton: FullWidthComponent, UKComponent {
   /// A Boolean value indicating whether the button is pressed.
   public private(set) var isPressed: Bool = false {
     didSet {
-      self.transform = self.isPressed && self.model.isInteractive
-      ? .init(
-        scaleX: self.model.animationScale.value,
-        y: self.model.animationScale.value
-      )
-      : .identity
+      UIView.animate(withDuration: 0.05, delay: 0, options: [.curveEaseOut]) {
+        self.transform = self.isPressed && self.model.isInteractive
+        ? .init(
+          scaleX: self.model.animationScale.value,
+          y: self.model.animationScale.value
+        )
+        : .identity
+      }
     }
   }
 

Sources/ComponentsKit/Components/Card/SUCard.swift

@@ -19,8 +19,8 @@ public struct SUCard<Content: View>: View {
   /// A closure that is triggered when the card is tapped.
   public var onTap: () -> Void
 
-  /// A Boolean value indicating whether the card is pressed.
-  @State public var isPressed: Bool = false
+  /// A current scale effect value.
+  @State public var scale: CGFloat = 1.0
 
   @ViewBuilder private let content: () -> Content
   @State private var contentSize: CGSize = .zero
@@ -66,16 +66,14 @@ public struct SUCard<Content: View>: View {
       .simultaneousGesture(
         DragGesture(minimumDistance: 0.0)
           .onChanged { _ in
-            self.isPressed = true
+            self.scale = self.model.animationScale.value
           }
           .onEnded { _ in
-            self.isPressed = false
+            self.scale = 1.0
           },
         isEnabled: self.model.isTappable
       )
-      .scaleEffect(
-        self.isPressed ? self.model.animationScale.value : 1,
-        anchor: .center
-      )
+      .scaleEffect(self.scale, anchor: .center)
+      .animation(.easeOut(duration: 0.05), value: self.scale)
   }
 }

Sources/ComponentsKit/Components/Card/UKCard.swift

@@ -29,12 +29,14 @@ open class UKCard<Content: UIView>: UIView, UKComponent {
   /// A Boolean value indicating whether the button is pressed.
   public private(set) var isPressed: Bool = false {
     didSet {
-      self.transform = self.isPressed
-      ? .init(
-        scaleX: self.model.animationScale.value,
-        y: self.model.animationScale.value
-      )
-      : .identity
+      UIView.animate(withDuration: 0.05, delay: 0, options: [.curveEaseOut]) {
+        self.transform = self.isPressed
+        ? .init(
+          scaleX: self.model.animationScale.value,
+          y: self.model.animationScale.value
+        )
+        : .identity
+      }
     }
   }