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

Posted 2023-02-15

【中文标题】SwiftUI .rotation3dEffect 动画在 Apple Watch 列表行中没有所需的深度效果

【英文标题】：SwiftUI .rotation3dEffect animation doesn't have desired depth effect in Apple Watch List Row

【发布时间】：2022-01-22 09:24:30

【问题描述】：

当 .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
    )
    

【参考方案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)