SwiftUI与rotation3DEffect动画冲突

debugcn 发表于 Dev

CH荣

代码参考：https : //github.com/amosgyamfi/swiftui-animation-library/blob/master/After%20WWDC2020/Parallax%203D/ios_3d_parallax.gif

当我更改状态horizontalAlignment并在VStack（alignment：horizontalAlignment）中使用它时，内容将从左移到中心。

我想通过点击按钮在中心和领先之间切换

当前效果：

预期效果：

import SwiftUI
struct ContentView: View {
    
    @State private var rotateIn3D = false
    @State private var horizontalAlignment: HorizontalAlignment = .leading
    
    let weatherBg = LinearGradient(gradient: Gradient(colors: [Color.blue, Color.white]), startPoint: .topLeading, endPoint: .bottomTrailing)
    
    var body: some View {
        VStack{
            ZStack { // Weather
                VStack(alignment: horizontalAlignment) {
                    Text("Wednesday")
                    
                    Text("18°")
                        .font(.system(size: 44))
                        .fontWeight(.thin)
                    
                    Spacer()
                    Image(systemName: "cloud.sun.fill")
                    Text("Partly Cloudy")
                        .frame(width: 150, height: 20, alignment: .leading)
                    Text("H:21° L:12°")
                    
                }
                .padding()
                .background(Color.blue)
                .background(Color.yellow)
                .cornerRadius(22)
                .foregroundColor(.white)
                
            }.frame(width: 170, height: 170, alignment: .leading)
            .rotation3DEffect(.degrees(rotateIn3D ? 12 : -12), axis: (x: rotateIn3D ? 90 : -45, y: rotateIn3D ? -45 : -90, z: 0))
            .animation(Animation.easeInOut(duration: 2).repeatForever(autoreverses: true))
            .onAppear() {
                rotateIn3D.toggle()
            }
            Button(action: {
                horizontalAlignment = .center
            }, label: {
                Text("Change Horizontal Alignment to center")
            })
        }
        
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .preferredColorScheme(/*@START_MENU_TOKEN@*/.dark/*@END_MENU_TOKEN@*/)
    }
}

他的脾气

只需使每个状态的值分开的动画即可。

经过Xcode 12.1 / iOS 14.1测试

  // ... other code

    .rotation3DEffect(.degrees(rotateIn3D ? 12 : -12), axis: (x: rotateIn3D ? 90 : -45, y: rotateIn3D ? -45 : -90, z: 0))
    .animation(Animation.easeInOut(duration: 2).repeatForever(autoreverses: true), 
         value: rotateIn3D) // << here !!
    .animation(.default, value: horizontalAlignment)  // << here !!
    .onAppear() {
        rotateIn3D.toggle()
    }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。