I have a cell with an image. The image is downloaded from the internet, and I would like to have a fade opacity transition when the image is downloaded. This is easily accomplished with the couple of modifiers:
.transition(.opacity)
.animation(.default)
But because my image has also the .resizable() modifier I also get a scaling animation that I really don't want.
How can I prevent this?
struct GridCellView: View {
@ObservedObject var model: CellViewModel
var body: some View {
GeometryReader { proxy in
Image(uiImage: self.model.image)
.resizable()
.transition(.opacity)
.animation(.default)
.scaledToFill()
.frame(width: proxy.size.width, height: proxy.size.width)
.aspectRatio(1/1, contentMode: .fit)
.clipped()
.animation(nil)
}
}
}
Use .animation(nil)
right after property/ies which animations you want to disable, like below
var body: some View {
GeometryReader { proxy in
Image(uiImage: self.model.image)
.resizable()
.animation(nil) // << disables animation
.transition(.opacity)
.animation(.default) // << enables animation
.scaledToFill()
.frame(width: proxy.size.width, height: proxy.size.width)
.aspectRatio(1/1, contentMode: .fit)
.clipped()
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With