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:
|
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 ?