The official release of Xamarin.Forms 4.7, included for the first time the control, under the flag. Fast-forward to the present, in the actual version ( ), things change a lot, left behind the experimental flag, and now it’s pretty stable on all supported platforms (Android, iOS, UWP, WPF and macOS). Shapes experimental v5.0.0.2012 Shapes it’s a really powerful control that allows us to easily draw any shape on the screen, like , , , and even take values from some svg image file and paste it by using the . Shapes circles lines rectangles polygons paths We could use this control to create graphics, good-looking backgrounds, innovative UI controls, etc., as can be seen in by . this great article David Ortinau Another really powerful tool provided by Xamarin.Forms are , that help us to bring life to our application by using default controls or create our own custom animations. Animations Animating shapes! In order to make our application outstand the others, we should create something really impressive, and putting shapes with animations together seems like a good start. Also, let’s add navigation between pages into the mix. Let’s face it, Xamarin.Forms built-in transition animation it’s boring and the plugin created by it’s really neat, but it just contains common transitions widely used nowadays in most applications. We are going to create some awesome transition animations using shapes! SharedTransitions Giampaolo Gabba Before starting, some considerations for this post: Despite Shapes being available for UWP, WPF and macOS, . we will stick to Android and iOS only We are going to centralize most of the navigations on the MainPage. We will remove the original toolbar and replace it with a fake one, in order to present the animations on full screen. These are just samples, not actual production code. Let’s get started! For all our pages we will use a control to wrap the entire page content, in order to take advantage of the overlap property. Also, we will set to the toolbar and content to make them disappear during the transition. Grid x:Name Here we are going to create our first shape, in this case, we want a big red arrow pointing to the right. Let’s use a control. While checking the we can see that field basically needs: to determine the start of the Path, next to the starting points, then with we define the line and the several points that it travels and finally to signal the end of the path. We make it invisible and hide it on the left side of the screen. Path markup syntax Data M X,Y L X,Y Z In the button click handler of our code behind, we just call an async method on the main thread that will run our . In the animation, we will turn the shape’s visibility on and make it move from left to right, while we fade off our toolbar and content. This whole animation will last 350 milliseconds. As our animation is committed synchronously, we need to add a delay a bit longer than the animation and then finally run the navigation to the next page. custom animation Let’s check the result: Our will be almost the same as the , but the arrow will be pointing in the opposite direction. ArrowNavigationPage MainPage And code behind will be almost the same, but also add an override for the Android back button. And this will be the result of the forward and backward navigation. For our second page navigation transition, let’s create some overlapping shapes. And let’s make it move from bottom to top The result: Now, for the return animation, let’s get a little more creative and create two circles using the , one at the left top corner of our screen and the other at the right bottom. Ellipse We will grow a circle from the bottom right to return to its original size at the top left The result: Continuing with our “creative rush”, let’s create a multi-page transition animation, that’s mean an animation that starts on one screen and finish on the other one. For that reason, on the Main Page we add some shapes hidden on both sides of the screen. In the code behind, we will create an animation that closes the pane shapes we made and navigate the next page. On the next page, we start with the same panes shapes, but they must start closed. In the code behind, we override the method and execute the panes open animation. OnAppearing The result: For the return animation, let’s make something more interesting. Although some shapes are simple to make with paths, others won’t or would require much time to make, so we will use SVG path data for that. If you are lucky enough, maybe you have a UI designer on your team, you could go and ask them to make great designs that you can use. If not, you can use some tool like to create and export SVG code: Figma Create your shape on Figma, then right-click on it, look for the section and select . Copy/Paste Copy as SVG Paste it on your editor and take the content inside the tag d Finally, paste it as in a Xamarin.Forms path. Data Now let’s add all the shapes to our screen: Remember that we need to add the same on the Main Page, but also need to say that we only want to fire that animation when return from a specific page, so we simply add a flag: Now we can add the rest of the code code behind for the return animation. PadlockTransitionAnimationShapes The result: For our last example, let’s stress the engine with lots of shapes and animations running on the screen. For that reason, we will make a wild pokemon appear as transition animation! For this example, we add the pokemon as a png image, but you can look at some svg pokemon image to take the path 😉. These will be our shapes on the MainPage And the code behind animation: Result: That’s all folks! As I said before, these are just samples of how we can exploit our creativity and push the boundaries of Xamarin.Forms. If this post helps you to create amazing transition animations or you want to showcase the things you’ve done, please leave a sample repo in the comments and will be added to this post later. Also, you can see a complete sample repository for this post on GitHub. 👇 https://github.com/FabriBertani/XFShapeAnimatedTransitions Thanks for reading and keep coding! 😁 Also published on Medium

How To Add Animation Effects To Xamarin.Forms with Shapes

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

An Example of Leveraging Xamarin's Material Visual Feature for a Consistent Look in iOS and Android

Web Design: Creating Classy Links with Animated Transitions

10 Useful Assets and Third-party Kits for Unity Developers of Any Level

Recommended Read: 11 JavaScript Animation Libraries For 2019

10 JavaScript Animation Libraries to Follow

App Design Made Easy

An Example of Leveraging Xamarin's Material Visual Feature for a Consistent Look in iOS and Android

Web Design: Creating Classy Links with Animated Transitions

10 Useful Assets and Third-party Kits for Unity Developers of Any Level

Recommended Read: 11 JavaScript Animation Libraries For 2019

10 JavaScript Animation Libraries to Follow

App Design Made Easy

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps