.Net Maui/Xamarin Forms Bounce Animation
In this blog, we will learn how to give bounce animation to any view in .Net Maui/Xamarin Forms.
Let’s understand the basics of computer graphics.
As we can see above the top left corner of the screen is (0,0), X coordinates will increase as we move towards the right side of the screen from the left & Y coordinates will increase as we move towards the bottom of the screen.
I have separated the logic in the below steps.
- Create basic UI (with button & ball).
- Get screen height & width.
- Translate (Bounce) the ball.
Design
Used AbsoluteLayout to center the BoxView & given it a 100-corner radius to give to make it circular.
Button to start & stop the bounce of ball/BoxView.
Capture Screen Height & Width
.Net Maui & Xamarin Forms both have this override method OnSizeAllocated which is called when the size of the element is set during a layout cycle in our case is the entire page.
So we have the total screen height & width now it’s time to do some magic.
Translate (Bounce) the ball
The BounceBall button click event starts the animation
The StartBouncingBall has all the logical code.
The xDirectionBounceFactor & yDirectionBounceFactor are basically the positive or negative values of the X & Y direction of the ball. If the values are positive coordinate values will also go in a positive direction & vice versa.
Whenever the ball’s X or ball’s Y coordinate reaches half of the screen width or height from its actual 0 positions we will reverse the X or Y coordinate increment value to decrement it.
And whenever the ball’s X or ball’s Y coordinate reaches the top or left of the screen from its actual 0 positions we will reverse the X or Y coordinate decrement value to increment it.
I have added half of the ball height & width in the if conditions to check if the ball reached the end or start of the screen.
Thanks for reading, you can check my other blogs as well such as Basic Animations in Net Maui/Xamarin Forms by clicking here. Happy Coding :-)
