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

Question

I have an Image, and I want it to rotate on the y axis, and move towards the bottom of the View when I press a Button. I tried using the .onChange, but I get the error "Result of call to 'animation' is unused", of which I understand the meaning, but I don't understand neither why it comes up nor how can I fix it.

Here's my code:

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

The Image is set as a mask so that I can easily control its color depending on the light or dark mode.

Thank to everyone who will help me!

user_14684839 · Answer

How about doing it like this:

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

As you asked:

Rotate on Y axis.
Move the image to the buttom.

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

1 Answers