swift - SwiftUI .rotation3dEffect 动画在 Apple Watch 列表行中没有所需的深度效果

Question

当 .rotation3dEffect 在 Apple Watch listRow 中设置动画时，该行似乎在前一行上方进行动画处理（这是所需的），但动画似乎发生在下一行下方，这破坏了 3d 效果。这个动画怎么也发生在下一行之上？

import SwiftUI

struct TestView: View {
let colors: [Color] = [.red,.blue,.green,.pink,.purple,.black,.brown,.cyan,.indigo,.teal]

var body: some View {
    List {
        ForEach(0..<10) { i in
            RowView(color: colors[i])
        }
    }
    .listStyle(.carousel)
}
}

struct RowView: View {
let color: Color

@State private var rotationAngle: Double = 0

var body: some View {
    Button(action: {
        withAnimation(.easeInOut(duration: 3.0)) {
            rotationAngle += 180
        }
    }) {
        HStack {
            Text("Test Row")
            Spacer()
        }
        .frame(height: 100)
        .background(color)
        .rotation3DEffect(
            Angle.degrees(rotationAngle),
            axis: (0,1,0),
            perspective: 1.0
    )
    }
}
}

Answer 1

这是你的perspective设置。为了模拟透视，Apple 让它看起来像是一个视图在另一个视图后面。这给人一种距离的错觉。离 0 越远，一个视图出现在另一个后面的越多。如果你设置perspective为 0，你是说我在这个视图上自上而下看，所以它不会在另一个视图后面。如果你想要一些视角，你需要在你的不同视图之间有一些间隙，所以当你触发动画时不会发生重叠。

struct RowView: View {
    let color: Color
    
    @State private var rotationAngle: Double = 0
    
    var body: some View {
        Button(action: {
            withAnimation(.easeInOut(duration: 3.0)) {
                rotationAngle += 180
            }
        }) {
            HStack {
                Text("Test Row")
                Spacer()
            }
            .frame(height: 100)
            .background(color)
            .rotation3DEffect(
                Angle.degrees(rotationAngle),
                axis: (0,1,0),
                // Set the perspective to 0 and it animates
                // without being under another view.
                perspective: 0)
        }
    }
}