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.
![](https://i0.wp.com/ashishkakkad.com/wp-content/uploads/2020/01/SwiftUIAnimations3D.gif?resize=283%2C137&ssl=1)
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:
1 2 |
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.
1 2 3 4 5 6 7 8 9 |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
// // 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 ?