iOS SwiftUI: prevent resizable() animation

user_6747915 0
Viewed 941

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)
        }
    }

}
swiftui swift ios
2 Answers

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()
    }
}
user_122990300

I would add a @State private var isDownloaded = false to your struct. Then when the download is finished use the ternary operator to animate the opacity. Something like this.

    Image(uiImage: self.model.image)
        .resizable()
        .opacity(isDownloaded ? 1 : 0)
        .animation(.default)
user_51327550
Related