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

SwiftUI - Move and rotate an Image when a button is pressed

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

这是我的代码:

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)
            }
            }
}}

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

感谢所有帮助我的人!

这样怎么样:

@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. 将图片移到底部。