I made this little animation and it works great except that the "grey background" of the main VStack is already at his maximum height.

我制作了这个小动画，效果很好，只是主VStack的“灰色背景”已经达到了他的最大高度。

Do you think it's possible to make the image appears/exists instead of working on the opacity so the "grey background" can expand when the image is showed?

你认为有没有可能让图像出现/存在，而不是处理不透明度，这样当图像显示时，“灰色背景”可以扩展？

import SwiftUI

struct ExampleView: View {
    @State private var isSowing = false

    var body: some View {
        VStack() {
            HStack() {
                Image("photo")
                    .onAppear { animateImage() }
                VStack() {
                    Text("Name")
                    Text("Company")
                }
                Spacer()
            }
            Image("image")
                .opacity(isSowing ? 1 : 0)
                .offset(y: isSowing ? 0 : 80)
        }
        .background(Color.grey)
    }

    private func animateImage() {
        withAnimation(.easeInOut.delay(1)) {
            isSowing = true
        }
    }
}

Wrap the image with an if.

用if将图像包起来。

VStack {
    HStack() {
        ...
    }
    if isSowing {
        Image("my_image")
            .transition(.push(from: .bottom))
    }
}
.background(Color.gray)

I assumed you added the .offset modifier to achieve a "push from bottom" effect when the image appears. You can instead do this with a transition instead.

我假设您添加了.Offset修改器，以在图像显示时实现“从底部推送”的效果。相反，您可以通过转换来实现这一点。

^{(IMHO .push(from: .top) looks better)}

(IMHO.PUSH(发件人：.TOP)看起来更好)

If I understand correctly, you want "image" to appear at the same time as the background, perhaps dropping down from behind the initial content? This is possible with the following changes:

如果我理解正确的话，你想让“图像”和背景同时出现，也许是从最初的内容后面掉下来？这可以通过以下更改来实现：

• make the image an overlay over the background


• add bottom padding to allow space for the image


• reveal the image + background by using a masking layer that is animated.

This approach reserves all the space needed when the view first appears, so the size of the VStack doesn't change when the animation happens. Any content that follows the VStack will not move when the image is revealed.

此方法保留了第一次显示视图时所需的所有空间，因此VStack的大小不会在动画发生时更改。当图像显示时，VStack后面的任何内容都不会移动。

Here you go, hope it's what you wanted:

给你，希望这是你想要的：

struct ExampleView: View {
    @State private var isShowing = false

    var body: some View {
        VStack() {
            HStack() {
                Image(systemName: "person.fill") // "photo"
                    .resizable()
                    .scaledToFit()
                    .padding()
                    .frame(width: 70, height: 70)
                    .onAppear { animateImage() }
                VStack(alignment: .leading) {
                    Text("Name")
                    Text("Company")
                }
                Spacer()
            }
            .padding(.bottom, 80)
        }
        .background {
            Color.gray
                .overlay(alignment: .bottom) {
                    Image(systemName: "fossil.shell.fill") // "image"
                        .resizable()
                        .scaledToFit()
                        .padding()
                        .frame(width: 80, height: 80)
                }
                .overlay(alignment: .bottom) {
                    Color(UIColor.systemBackground)
                        .frame(height: isShowing ? 0 : 80)
                }
        }
    }

    private func animateImage() {
        withAnimation(.easeInOut.delay(1)) {
            isShowing = true
        }
    }
}