SwiftUI - 按下按钮时移动和旋转图像

Question

我有一个图像，我希望它在 y 轴上旋转，并在我按下按钮时向视图的底部移动。我尝试使用.onChange，但我收到错误“调用'动画'的结果未使用”，我理解其中的含义，但我既不明白为什么会出现，也不明白如何修复它。

这是我的代码：

import SwiftUI

struct ContentView : View {

    @State var animateCoin = false
    @Environment(\.colorScheme) var colorScheme

        var body: some View {

 Rectangle()
        .foregroundColor(colorScheme == .dark ? .white : .black)
        .frame(width: 150, height: 150, alignment: .center)
        .offset(y: -60)
        .mask(Image("Coin") //That's the name of the Image I have in the assets
                      .resizable()
                      .onChange(of: animateCoin, perform: { value in
                            self.animation(.easeIn) //I put .easeIn just as an example, because the .rotation3DEffect gives me a red warning
                        }))

Button(action: { animateCoin = true } ) { 
             ZStack {
                RoundedRectangle(cornerRadius: 10)
                    .foregroundColor(.green)
                    .frame(width: 100, height: 40, alignment: .center)
                    .shadow(radius: 10)
                Text("Animate")
                    .foregroundColor(.white)
                    .shadow(radius: 20)
            }
            }
}}

图像被设置为蒙版，以便我可以根据亮或暗模式轻松控制其颜色。

感谢所有帮助我的人！

Answer 1

这样做怎么样：

@State var animateCoin = false
@Environment(\.colorScheme) var colorScheme

var body: some View {
    
    VStack {
        Rectangle()
            .foregroundColor(colorScheme == .dark ? .white : .black)
            .frame(width: 150, height: 150, alignment: .center)
            .offset(y: -60)
            .mask(Image(systemName: "car.fill")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .rotation3DEffect(
                        Angle(degrees: self.animateCoin ? 360 : 0),
                        axis: (x: 0, y: self.animateCoin ? 360 : 0, z: 0)
                        
            )
            )
            .offset(y: self.animateCoin ? 600 : 0)
            .animation(.linear(duration: 1))
        
        
        ZStack {
            Button(action: { self.animateCoin.toggle() } ) {
                ZStack {
                    RoundedRectangle(cornerRadius: 10)
                        .foregroundColor(.green)
                        .frame(width: 100, height: 40, alignment: .center)
                        .shadow(radius: 10)
                    Text("Animate")
                        .foregroundColor(.white)
                        .shadow(radius: 20)
                }
            }
        }
        
    }
    
}

如你所愿：

1. 在 Y 轴上旋转。
2. 将图片移到底部。