Skip to content

Drop WatchKit hack. Supports Native SwiftUI animated image, using SDAnimatedImagePlayer #65

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Nov 29, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions Example/SDWebImageSwiftUIDemo/ContentView.swift
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ struct ContentView: View {
"https://raw.githubusercontent.com/icons8/flat-color-icons/master/pdf/stack_of_photos.pdf",
"https://raw.githubusercontent.com/icons8/flat-color-icons/master/pdf/smartphone_tablet.pdf"
]
@State var animated: Bool = false // You can change between WebImage/AnimatedImage
@State var animated: Bool = true // You can change between WebImage/AnimatedImage

var body: some View {
#if os(iOS) || os(tvOS)
Expand Down Expand Up @@ -105,8 +105,16 @@ struct ContentView: View {
.scaledToFit()
.frame(width: CGFloat(100), height: CGFloat(100), alignment: .center)
#else
AnimatedImage(url: URL(string:url))
WebImage(url: URL(string:url))
.resizable()
.animated()
.indicator { _, _ in
ActivityBar()
.foregroundColor(Color.white)
.frame(width: 50, height: 50)
}
.animation(.easeInOut(duration: 0.5))
.transition(.fade)
.scaledToFit()
.frame(width: CGFloat(100), height: CGFloat(100), alignment: .center)
#endif
Expand Down
8 changes: 7 additions & 1 deletion Example/SDWebImageSwiftUIDemo/DetailView.swift
Original file line number Diff line number Diff line change
Expand Up @@ -95,8 +95,14 @@ struct DetailView: View {
.resizable()
.scaledToFit()
#else
AnimatedImage(url: URL(string:url), options: [.progressiveLoad], isAnimating: $isAnimating)
WebImage(url: URL(string:url), options: [.progressiveLoad])
.resizable()
.animated(isAnimating)
.indicator { isAnimating, progress in
ProgressBar(value: progress)
.foregroundColor(.blue)
.frame(maxHeight: 6)
}
.scaledToFit()
#endif
} else {
Expand Down
9 changes: 1 addition & 8 deletions Package.swift
Original file line number Diff line number Diff line change
Expand Up @@ -24,16 +24,9 @@ let package = Package(
// Targets can depend on other targets in this package, and on products in packages which this package depends on.
.target(
name: "SDWebImageSwiftUI",
dependencies: ["SDWebImage", "SDWebImageSwiftUIObjC"],
dependencies: ["SDWebImage"],
path: "SDWebImageSwiftUI/Classes",
exclude: ["ObjC"]
),
// This is implementation detail because SwiftPM does not support mixed Objective-C/Swift code, don't dependent this target
.target(
name: "SDWebImageSwiftUIObjC",
dependencies: ["SDWebImage"],
path: "SDWebImageSwiftUI/Classes/ObjC",
publicHeadersPath: "."
)
]
)
12 changes: 9 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@ let package = Package(
- [x] Supports success/failure/progress changes event for custom handling
- [x] Supports indicator with activity/progress indicator and customization
- [x] Supports built-in animation and transition, powered by SwiftUI
- [x] Supports animated image as well ! (from v0.9.0)

```swift
var body: some View {
Expand All @@ -99,6 +100,7 @@ var body: some View {
.placeholder {
Rectangle().foregroundColor(.gray)
}
.animated() // Supports Animated Image
.indicator(.activity) // Activity Indicator
.animation(.easeInOut(duration: 0.5)) // Animation Duration
.transition(.fade) // Fade Transition
Expand All @@ -109,6 +111,8 @@ var body: some View {

Note: This `WebImage` using `Image` for internal implementation, which is the best compatible for SwiftUI layout and animation system. But it supports static image format only, because unlike `UIImageView` in UIKit, SwiftUI's `Image` does not support animated image or vector image.

Note: From v0.9.0, `WebImage` supports animated image as well ! You can use `.animated()` to start animation. This is done by using the native SwiftUI rendering system and SDWebImage's powerful [Animated Player](https://github.com/SDWebImage/SDWebImage/wiki/Advanced-Usage#animated-player-530). But it's still recommend to use `AnimatedImage` for advanced controls like progressive animation rendering, runloop mode, playback rate, etc.

### Using `AnimatedImage` to play animation

- [x] Supports network image as well as local data and bundle image
Expand Down Expand Up @@ -150,17 +154,19 @@ var body: some View {

Note: `AnimatedImage` supports both image url or image data for animated image format. Which use the SDWebImage's [Animated ImageView](https://github.com/SDWebImage/SDWebImage/wiki/Advanced-Usage#animated-image-50) for internal implementation. Pay attention that since this base on UIKit/AppKit representable, some advanced SwiftUI layout and animation system may not work as expected. You may need UIKit/AppKit and Core Animation to modify the native view.

Note: From v0.8.0, `AnimatedImage` on watchOS support all features the same as iOS/tvOS/macOS, including Animated WebP rendering, runloop mode, pausable, purgeable, playback rate, etc. It use the SDWebImage's [Animated Player](https://github.com/SDWebImage/SDWebImage/wiki/Advanced-Usage#animated-player-530), which is the same backend engine for iOS/tvOS/macOS's Animated ImageView.
Note: From v0.9.0, `AnimatedImage` on watchOS drop the supports on watchOS, because of using hacks and private APIs. For watchOS user, choose `WebImage` instead.

Note: From v0.4.0, `AnimatedImage` supports watchOS as well. However, it's not backed by SDWebImage's [Animated ImageView](https://github.com/SDWebImage/SDWebImage/wiki/Advanced-Usage#animated-image-50) like iOS/tvOS/macOS. It use some tricks and hacks because of the limitation on current Apple's API. It also use Image/IO decoding system, which means it supports GIF and APNG format only, but not external format like Animated WebP.
Note: From v0.8.0, `AnimatedImage` on watchOS support all features the same as iOS/tvOS/macOS, including Animated WebP rendering, runloop mode, pausable, purgeable, playback rate, etc. It use the SDWebImage's [Animated Player](https://github.com/SDWebImage/SDWebImage/wiki/Advanced-Usage#animated-player-530), which is the same backend engine for iOS/tvOS/macOS's Animated ImageView.

### Which View to choose

Why we have two different View types here, is because of current SwiftUI limit. But we're aimed to provide best solution for all use cases.

If you don't need animated image, prefer to use `WebImage` firstly. Which behaves the seamless as built-in SwiftUI View. If SwiftUI works, it works.

If you need animated image, `AnimatedImage` is the one to choose. Remember it supports static image as well, you don't need to check the format, just use as it.
If you need simple animated image, use v0.9.0 above with `WebImage`. Which provide the animated image support.

If you need powerful animated image, `AnimatedImage` is the one to choose. Remember it supports static image as well, you don't need to check the format, just use as it.

But, because `AnimatedImage` use `UIViewRepresentable` and driven by UIKit, currently there may be some small incompatible issues between UIKit and SwiftUI layout and animation system, or bugs related to SwiftUI itself. We try our best to match SwiftUI behavior, and provide the same API as `WebImage`, which make it easy to switch between these two types if needed.

Expand Down
Loading