Merge pull request #116 from SDWebImage/feature_convenient_transition_with_duration

Feature convenient transition with duration

Example/SDWebImageSwiftUIDemo/ContentView.swift

@@ -173,8 +173,7 @@ struct ContentView: View {
                             WebImage(url: URL(string:url), isAnimating: self.$animated)
                             .resizable()
                             .indicator(.activity)
-                            .animation(.easeInOut(duration: 0.5))
+                            .transition(.fade(duration: 0.5))
-                            .transition(.fade)
                             .scaledToFit()
                             .frame(width: CGFloat(100), height: CGFloat(100), alignment: .center)
                             #endif
@@ -187,8 +186,7 @@ struct ContentView: View {
                              }
                              */
                             .indicator(.activity)
-                            .animation(.easeInOut(duration: 0.5))
+                            .transition(.fade(duration: 0.5))
-                            .transition(.fade)
                             .scaledToFit()
                             .frame(width: CGFloat(100), height: CGFloat(100), alignment: .center)
                         }

README.md

@@ -122,8 +122,7 @@ var body: some View {
         Rectangle().foregroundColor(.gray)
     }
     .indicator(.activity) // Activity Indicator
-    .animation(.easeInOut(duration: 0.5)) // Animation Duration
+    .transition(.fade(duration: 0.5)) // Fade Transition with duration
-    .transition(.fade) // Fade Transition
     .scaledToFit()
     .frame(width: 300, height: 300, alignment: .center)
 }

SDWebImageSwiftUI/Classes/Transition/Transition.swift

@@ -18,6 +18,15 @@ extension AnyTransition {
         return AnyTransition.asymmetric(insertion: insertion, removal: removal)
     }
     
+    /// Fade-in transition with duration
+    /// - Parameter duration: transition duration, use ease-in-out
+    /// - Returns: A transition with duration
+    public static func fade(duration: Double) -> AnyTransition {
+        let insertion = AnyTransition.opacity.animation(.easeInOut(duration: duration))
+        let removal = AnyTransition.identity
+        return AnyTransition.asymmetric(insertion: insertion, removal: removal)
+    }
+    
     /// Flip from left transition
     public static var flipFromLeft: AnyTransition {
         let insertion = AnyTransition.move(edge: .leading)
@@ -25,6 +34,15 @@ extension AnyTransition {
         return AnyTransition.asymmetric(insertion: insertion, removal: removal)
     }
     
+    /// Flip from left transition with duration
+    /// - Parameter duration: transition duration, use ease-in-out
+    /// - Returns: A transition with duration
+    public static func flipFromLeft(duration: Double) -> AnyTransition {
+        let insertion = AnyTransition.move(edge: .leading).animation(.easeInOut(duration: duration))
+        let removal = AnyTransition.identity
+        return AnyTransition.asymmetric(insertion: insertion, removal: removal)
+    }
+    
     /// Flip from right transition
     public static var flipFromRight: AnyTransition {
         let insertion = AnyTransition.move(edge: .trailing)
@@ -32,6 +50,15 @@ extension AnyTransition {
         return AnyTransition.asymmetric(insertion: insertion, removal: removal)
     }
     
+    /// Flip from right transition with duration
+    /// - Parameter duration: transition duration, use ease-in-out
+    /// - Returns: A transition with duration
+    public static func flipFromRight(duration: Double) -> AnyTransition {
+        let insertion = AnyTransition.move(edge: .trailing).animation(.easeInOut(duration: duration))
+        let removal = AnyTransition.identity
+        return AnyTransition.asymmetric(insertion: insertion, removal: removal)
+    }
+    
     /// Flip from top transition
     public static var flipFromTop: AnyTransition {
         let insertion = AnyTransition.move(edge: .top)
@@ -39,10 +66,28 @@ extension AnyTransition {
         return AnyTransition.asymmetric(insertion: insertion, removal: removal)
     }
     
+    /// Flip from top transition with duration
+    /// - Parameter duration: transition duration, use ease-in-out
+    /// - Returns: A transition with duration
+    public static func flipFromTop(duration: Double) -> AnyTransition {
+        let insertion = AnyTransition.move(edge: .top).animation(.easeInOut(duration: duration))
+        let removal = AnyTransition.identity
+        return AnyTransition.asymmetric(insertion: insertion, removal: removal)
+    }
+    
     /// Flip from bottom transition
     public static var flipFromBottom: AnyTransition {
         let insertion = AnyTransition.move(edge: .bottom)
         let removal = AnyTransition.identity
         return AnyTransition.asymmetric(insertion: insertion, removal: removal)
     }
+    
+    /// Flip from bottom transition with duration
+    /// - Parameter duration: transition duration, use ease-in-out
+    /// - Returns: A transition with duration
+    public static func flipFromBottom(duration: Double) -> AnyTransition {
+        let insertion = AnyTransition.move(edge: .bottom).animation(.easeInOut(duration: duration))
+        let removal = AnyTransition.identity
+        return AnyTransition.asymmetric(insertion: insertion, removal: removal)
+    }
 }