Learn SwiftUI

Fading image

Still in RecipeDetailView.swift, let's make a change to our main image. By design, the image should just appear on the screen when the view is loaded, but with a small and very subtle animation, we can give it a much more grand entrance.

Add the following highlighted changes to the Image view, at the top of our view:

Image(uiImage: recipe.image)    .resizable()    .aspectRatio(contentMode: .fill)    .frame(maxWidth: 400, maxHeight: 200)    .clipShape(RoundedRectangle(cornerRadius: 10))    .opacity(imageOpacity)    .onAppear {        withAnimation(Animation.easeIn(duration: 2.6).delay(0.4)) {            self.imageOpacity = 1        }    }

We'll start by adding the .opacity modifier to our Image view and setting this with the value from the imageOpacity variable:

@State private ...