Fix the transition visual jump between placeholderImage and final image for AnimatedImage

This commit is contained in:
DreamPiggy 2024-07-01 17:59:27 +08:00
parent 26f75715c7
commit d68c13a7f3
2 changed files with 16 additions and 19 deletions

View File

@ -276,7 +276,7 @@ public struct AnimatedImage : PlatformViewRepresentable {
self.imageHandler.failureBlock?(error ?? NSError()) self.imageHandler.failureBlock?(error ?? NSError())
} }
// Finished loading, async // Finished loading, async
finishUpdateView(view, context: context, image: image) finishUpdateView(view, context: context)
} }
} }
@ -364,7 +364,7 @@ public struct AnimatedImage : PlatformViewRepresentable {
} }
// Finished loading, sync // Finished loading, sync
finishUpdateView(view, context: context, image: view.wrapped.image) finishUpdateView(view, context: context)
if let viewUpdateBlock = imageHandler.viewUpdateBlock { if let viewUpdateBlock = imageHandler.viewUpdateBlock {
viewUpdateBlock(view.wrapped, context) viewUpdateBlock(view.wrapped, context)
@ -383,13 +383,8 @@ public struct AnimatedImage : PlatformViewRepresentable {
} }
} }
func finishUpdateView(_ view: AnimatedImageViewWrapper, context: Context, image: PlatformImage?) { func finishUpdateView(_ view: AnimatedImageViewWrapper, context: Context) {
// Finished loading // Finished loading
if let imageSize = image?.size {
view.imageSize = imageSize
} else {
view.imageSize = nil
}
configureView(view, context: context) configureView(view, context: context)
layoutView(view, context: context) layoutView(view, context: context)
} }

View File

@ -16,11 +16,15 @@ import SwiftUI
@available(iOS 14.0, macOS 11.0, tvOS 14.0, watchOS 7.0, *) @available(iOS 14.0, macOS 11.0, tvOS 14.0, watchOS 7.0, *)
public class AnimatedImageViewWrapper : PlatformView { public class AnimatedImageViewWrapper : PlatformView {
/// The wrapped actual image view, using SDWebImage's aniamted image view /// The wrapped actual image view, using SDWebImage's aniamted image view
public var wrapped = SDAnimatedImageView() @objc dynamic public var wrapped = SDAnimatedImageView()
var observation: NSKeyValueObservation?
var interpolationQuality = CGInterpolationQuality.default var interpolationQuality = CGInterpolationQuality.default
var shouldAntialias = false var shouldAntialias = false
var resizingMode: Image.ResizingMode? var resizingMode: Image.ResizingMode?
var imageSize: CGSize?
deinit {
observation?.invalidate()
}
public override func draw(_ rect: CGRect) { public override func draw(_ rect: CGRect) {
#if os(macOS) #if os(macOS)
@ -50,15 +54,7 @@ public class AnimatedImageViewWrapper : PlatformView {
public override var intrinsicContentSize: CGSize { public override var intrinsicContentSize: CGSize {
/// Match the behavior of SwiftUI.Image, only when image is resizable, use the super implementation to calculate size /// Match the behavior of SwiftUI.Image, only when image is resizable, use the super implementation to calculate size
var contentSize = wrapped.intrinsicContentSize let contentSize = wrapped.intrinsicContentSize
/// Sometimes, like during the transaction, the wrapped.image == nil, which cause contentSize invalid
/// Use image size as backup
/// TODO: This mixed use of UIKit/SwiftUI animation will cause visial issue because the intrinsicContentSize during animation may be changed
if let imageSize = imageSize {
if contentSize != imageSize {
contentSize = imageSize
}
}
if let _ = resizingMode { if let _ = resizingMode {
/// Keep aspect ratio /// Keep aspect ratio
if contentSize.width > 0 && contentSize.height > 0 { if contentSize.width > 0 && contentSize.height > 0 {
@ -77,11 +73,17 @@ public class AnimatedImageViewWrapper : PlatformView {
public override init(frame frameRect: CGRect) { public override init(frame frameRect: CGRect) {
super.init(frame: frameRect) super.init(frame: frameRect)
addSubview(wrapped) addSubview(wrapped)
observation = observe(\.wrapped.image, options: [.new]) { _, _ in
self.invalidateIntrinsicContentSize()
}
} }
public required init?(coder: NSCoder) { public required init?(coder: NSCoder) {
super.init(coder: coder) super.init(coder: coder)
addSubview(wrapped) addSubview(wrapped)
observation = observe(\.wrapped.image, options: [.new]) { _, _ in
self.invalidateIntrinsicContentSize()
}
} }
} }