SwiftUI - 动画 HUD / 像 iOS 静音模式一样弹出答案

【问题标题】：SwiftUI - Animating HUD / Pop Over like iOS Silent ModeSwiftUI - 动画 HUD / 像 iOS 静音模式一样弹出
【发布时间】：2021-12-31 08:35:16
【问题描述】：

我正在尝试从 iOS 克隆以下动画：

这是我的代码。我被星星的动画困住了。例如，我想稍微摇晃一下或围绕它的 y 轴旋转它。

这是我的代码：

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        PopOver(image: "star.fill", color: .primary, title: "Thank You!")
    }
}

struct PopOver: View{
    
    var image: String
    var color: Color
    var title: String

    @Environment(\.colorScheme) var scheme
    
    var body: some View{
        
        HStack(spacing: 10){
            
            Image(systemName: image)
                .font(.title3)
                .foregroundColor(color)
            
            Text(title)
                .foregroundColor(.primary)
        }
        .padding(.vertical,10)
        .padding(.horizontal)
        .background(
            scheme == .dark ? Color.black : Color.white
        )
        .clipShape(Capsule())
        .shadow(color: Color.primary.opacity(0.1), radius: 5, x: 1, y: 5)
        .shadow(color: Color.primary.opacity(0.03), radius: 5, x: 0, y: -5)
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
        .offset(y: 0)
    }
}

你能告诉我这是如何实现的吗？

非常感谢！

【问题讨论】：

标签： animation swiftui popover hud

【解决方案1】：

你可以试试这样的方法：

struct ContentView: View {
    @State var popUpPresented = false
    
    var body: some View {
        Button(action: {popUpPresented = true}) {
            Text("click me")
        }
        .popover(isPresented: $popUpPresented, arrowEdge: .top) {
            PopOver(image: "star.fill", color: .primary, title: "Thank You!")
        }
    }
}

struct PopOver: View{
    var image: String
    var color: Color
    var title: String

    @State var rotate = 0.0  // <-- here
    
    @Environment(\.colorScheme) var scheme
    
    var body: some View{
        HStack(spacing: 10){
            Image(systemName: image).font(.title3).foregroundColor(color)
                // --- here ---
                .rotation3DEffect(Angle.degrees(rotate), axis: (x: 0, y: 1, z: 0))
                .task {
                    withAnimation(Animation.default.speed(0.3).delay(0).repeatForever(autoreverses: false)){
                        rotate = 360.0
                    }
                }
            Text(title).foregroundColor(.primary)
        }
        .padding(.vertical,10)
        .padding(.horizontal)
        .background(scheme == .dark ? Color.black : Color.white)
        .clipShape(Capsule())
        .shadow(color: Color.primary.opacity(0.1), radius: 5, x: 1, y: 5)
        .shadow(color: Color.primary.opacity(0.03), radius: 5, x: 0, y: -5)
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
        .offset(y: 0)
    }
}

【讨论】：