SwiftUI Animations – 3D Rotation Effect

by

SwiftUI has lots of new features with easiest way of implementation. In this tutorial, you’ll learn how to add fancy 3D animations with SwiftUI. 

rotation3DEffect

The rotation3DEffect() modifier gives output like as rotating views in 3D.

This modifier have two parameters:

angle: for rotate view in specified angle/degrees
axis: for X, Y and Z axis to perform rotation.

For Example:

 Text("SwiftUI Animations")
    .rotation3DEffect(.degrees(45), axis: (x: 1, y: 0, z: 0))

Let’s Do It With Animation

Now we will create one button with rotating view by 3D Effect.

 Button("Animate..!") {
     withAnimation {
         self.degrees += 360
     }
 }
 .padding(20)
 .background(Color.blue.opacity(0.8))
 .foregroundColor(Color.white)
 .rotation3DEffect(.degrees(degrees), axis: (x: 1, y: 1, z: 1))

Here, degrees variable is defined as @State so when that value changes, it automatically perform the 3D rotation effect.

Put All Together:

 //
 //  ContentView.swift
 //
 //  Created by Ashish Kakkad on 29/01/2020.
 //
 
 import SwiftUI

 struct ContentView: View {
     @State private var degrees = 0.0
 
     var body: some View {
         VStack {
             Button("Animate..!") {
                 withAnimation {
                     self.degrees += 360
                 }
             }
             .padding(20)
             .background(Color.blue.opacity(0.8))
             .foregroundColor(Color.white)
             .rotation3DEffect(.degrees(degrees), axis: (x: 1, y: 1, z: 1))
 

             Text("SwiftUI Animations")
                 .rotation3DEffect(.degrees(45), axis: (x: 1, y: 0, z: 0))
         }
     }
 }
 

 struct ContentView_Previews: PreviewProvider {
     static var previews: some View {
         ContentView()
     }
 }

Conclusion

SwiftUI is comes with lot of things to learn. Keep Learning!
Happy Coding ?