Leveraging the RotationEffect modifier to create a easy Pendulum Swing Animation
- Create a dangling base for the Pendulum — utilizing a Rectangle View
- Create a Pendulum Holder from the hanging base — utilizing a Rectangle View and specifying unique Backside left and proper nook radius
- Create a rope for the Pendulum — utilizing a Rectangle View
- Create a ball — utilizing a Circle View and filling it with an Angular Radiant
- Swing the Pendulum left and proper — utilizing
RotationEffect
Right here we are going to merely use a Rectangle View to make a roof-like view. We are going to name it as TopBase and we are going to specify the shade as Grey. From the beneath code you possibly can see how we are going to create the Hanging Base.
As soon as the Pendulum Hanging Base is create we are going to fast create the Pendulum Holder. To create the Pendulum Holder we are going to use a Rectangle View with a customized view modifier which is able to clip of the Backside left and proper with a nook radius. To clip the Backside left and proper corners of the Rectangle view we are going to use the beneath extension and form
As soon as the extension is setup we are going to create our Pendulum Holder View just like the beneath code.
As soon as the Holder is created we are going to once more use the Rectangle View to create the Pendulum Rope. You should use the beneath code to create the Pendulum Rope View. We are going to give it a width of two and peak of 200
Ball
So as to create the Ball we are going to use a circle view and masks it with a Radial Gradient in order that the Ball will get some 3D look.
RadialGradient(gradient: Gradient(colours: [.clear, .black, .black, .black]), heart: .heart, startRadius: 1, endRadius: 50)
We are going to use the above Gradient to masks our Circle.
So as to arrange an animation just like the Pendulum Swing, we have to have a state setter that may inform us if the Ball is on the Proper or Left. Additionally we want to verify the animation is repeated ceaselessly.
We are going to first introduce our state variable which is able to inform us if the Ball is at its Max(Proper) or Min(Left) place. We are going to arrange an Enum, will name it as RotationState which may have two states Min and Max .
When the animation or the ball has reached the Max state we have to toggle the state(RotationState) to Min after which vice versa.
We are going to create a VStack inside that VStack we are going to add our TopBase, the Holder, and likewise one other VStack which has PendulumRope and the Ball inside it.
Why I created one other VStack and put the Pendulum Rope and the Ball view inside it’s as a result of we simply must rotate the Pendulum Rope and the Ball and never TopBase and the holder. We setup of the identical could be seen within the beneath code.
Right here what we are going to do is that we’ll add a rotationEffect modifier to our second VStack which holds the PendulumRope and the Ball.
The angle of rotation might be pushed by our state variable. Each time the state is ready as max we are going to set the rotation angle as -40 levels and when state is ready as min we are going to set the rotation angle as 40 levels. And the identical we are going to toggle it inside our withAnimation closure inside our onAppear view modifier.
I hope you understood how we are able to use the rotationEffect to create a Pendulum Swing-like Animation.
Thanks for studying.
