ios - 相等的矩形动画不同？

Question

import SwiftUI

struct GrowView: View {
    var size:CGFloat = 400
    @State var scale:CGFloat = 0
    var body: some View {
        HStack(alignment: .bottom) {
            Rectangle()
                .foregroundColor(.red)
                .frame(height: 300 * scale)
                .animation(.default)
            if true {
                Rectangle()
                    .foregroundColor(.red)
                    .frame(height: 400 * scale)
                    .animation(.default)
            }

        }.onAppear {
            self.scale = 1
        }.frame( maxHeight: 500, alignment: .bottom)
    }
}

struct GrowView_Previews: PreviewProvider {
    static var previews: some View {
        GrowView()
    }
}

没有 if块，第二个 Rectangle从下到上动画。当它在 If 内时然而，块似乎是从上到下绘制的。这是怎么回事？

Answer 1

如果你找到一种方法让它们朝着一个方向动画(而不是思考为什么和如何)那么这里是一个解决方案

使用 Xcode 11.4/iOS 13.4 测试

    var body: some View {
        HStack(alignment: .bottom) {
            Rectangle()
                .foregroundColor(.red)
                .frame(height: 300 * scale)
//                .animation(.default)   // XX remove !!
            if true {
                Rectangle()
                    .foregroundColor(.red)
                    .frame(height: 400 * scale)
//                    .animation(.default) // XX remove !!
            }

        }
        .animation(.default)       // << put animation here !!!
        .onAppear {
            self.scale = 1
        }.frame( maxHeight: 500, alignment: .bottom)
    }

更新:有条件的第二个矩形延迟的解决方案

struct GrowView: View {
    var size:CGFloat = 400
    @State var scale:CGFloat = 0
    @State var showSecond = true

    var body: some View {
        HStack(alignment: .bottom) {
            Rectangle()
                .foregroundColor(.red)
                .frame(height: 300 * scale)
                .animation(.default)
            VStack {
                if showSecond {
                    Rectangle()
                        .foregroundColor(.red)
                        .frame(height: 400 * scale)
                }
            }
            .animation(Animation.default.delay(0.5))
        }
        .onAppear {
            self.scale = 1
        }.frame(maxHeight: 500, alignment: .bottom)
    }
}