Xamarin.Forms Fancy Animations

Xamarin.Forms includes its own animation infrastructure that allows for easy creation of simple animations, while also being versatile enough to create complex animations. Let’s take a look how we can reproduce some popular animations with Xamarin.Forms built-in infrastructure.

The first animation that I want to reproduce is the nice entry shaking animation on the macOS X lock screen when you enter an incorrect password.

Shake Animation

The following code example demonstrates the TranslateTo method to reproduce the shake animation:

uint timeout = 50;
await MyEntry.TranslateTo(-15, 0, timeout);
await MyEntry.TranslateTo(15, 0, timeout);
await MyEntry.TranslateTo(-10, 0, timeout);
await MyEntry.TranslateTo(10, 0, timeout);
await MyEntry.TranslateTo(-5, 0, timeout);
await MyEntry.TranslateTo(5, 0, timeout);
MyEntry.TranslationX = 0;

Lets take a look what we get with this code. The following video shows shaking on each platform:

Flip Animation

Another often used animation is the flip animation. During it we can replace images, colors or even controls. We can achieve this with 3 steps:

  1. Rotate the control to 90 (-90 for Right to Left) degrees so it the width becomes zero pixels
  2. Replace it with the other control previously rotated to 270 (-270)
  3. Rotate the new control to 360 (-360) and setup the rotation to 0.

I will flip one button replacing it with another button with a different background color.  To reproduce the flip animation we will use RotateYTo method:

Here we go

GreenButton.RotationY = -270;
await RedButton.RotateYTo(-90, timeout);
RedButton.IsVisible = false;
GreenButton.IsVisible = true;
await GreenButton.RotateYTo(-360, timeout);
GreenButton.RotationY = 0;

Let’s take a look at what we got


 
Nice, but to me it looks very “linear”. That’s because we have skipped the additional parameter called “easing function”. Omitting the third parameter when creating an animation causes the animation to use the default Linear easing function, which produces a linear velocity. Let’s make it more fancy with smooth accelerations. For this we will pass the easing functions: Easing.SpringIn and Easing.SpringOut.

await RedButton.RotateYTo(-90, timeout, Easing.SpringIn);
await GreenButton.RotateYTo(-360, timeout, Easing.SpringOut);

Let’s take a look what we got now after minor changes:

Collapse/Expand animation

The last example that I want to show you is the Collapse/Expand animation that is often used in different types of accordion controls. Let’s take a look how we can achieve this with LayoutTo function. We will collapse the control’s height (Y-axis) but you can easily collapse the width (X-axis).

//collapse
MyContent.LayoutTo(new Rectangle(MyContent.Bounds.X, MyContent.Bounds.Y, MyContent.Bounds.Width, 0), 500, Easing.CubicIn)
//expand
MyContent.LayoutTo(new Rectangle(MyContent.Bounds.X, MyContent.Bounds.Y, MyContent.Bounds.Width, 300), 500, Easing.CubicOut)

Let’s take a look at our results

As you possibly have noticed we also got the “Arrow” rotating  and running simultaneously. This is called Composite Animations. Composite animations can be created by mixing awaited and non-awaited animations and using the Task.WhenAny and Task.WhenAll methods to run multiple asynchronous methods concurrently.

//expand
await Task.WhenAll(new List<Task> {MyContent.LayoutTo(new Rectangle(MyContent.Bounds.X, MyContent.Bounds.Y, MyContent.Bounds.Width, 300), 500, Easing.CubicOut), MyButton.RotateTo(180, 500, Easing.SpringOut)});
//Collapse
await Task.WhenAll(new List<Task>{MyContent.LayoutTo(new Rectangle(MyContent.Bounds.X, MyContent.Bounds.Y, MyContent.Bounds.Width, 0), 500, Easing.CubicIn),MyButton.RotateTo(360, 500, Easing.SpringOut)});

Wrapping Up

The examples in the blog demonstrate how easily with a few lines of code we can get nice smooth hardware-accelerated animations on 3 major platforms. Sample animations source code is available on github.

Related Blog Posts

We hope you’ve found this to be helpful and are walking away with some new, useful insights. If you want to learn more, here are a couple of related articles that others also usually find to be interesting:

Our Gear Is Packed and We're Excited to Explore with You

Ready to come with us? 

Together, we can map your company’s tech journey and start down the trails. If you’re set to take the first step, simply fill out the form below. We’ll be in touch – and you’ll have a partner who cares about you and your company. 

We can’t wait to hear from you! 

This field is for validation purposes and should be left unchanged.

Together, we can map your company’s tech journey and start down the trails. If you’re set to take the first step, simply fill out the form below. We’ll be in touch – and you’ll have a partner who cares about you and your company. 

We can’t wait to hear from you! 

Montage Portal

Montage Furniture Services provides furniture protection plans and claims processing services to a wide selection of furniture retailers and consumers.

Project Background

Montage was looking to build a new web portal for both Retailers and Consumers, which would integrate with Dynamics CRM and other legacy systems. The portal needed to be multi tenant and support branding and configuration for different Retailers. Trailhead architected the new Montage Platform, including the Portal and all of it’s back end integrations, did the UI/UX and then delivered the new system, along with enhancements to DevOps and processes.

Logistics

We’ve logged countless miles exploring the tech world. In doing so, we gained the experience that enables us to deliver your unique software and systems architecture needs. Our team of seasoned tech vets can provide you with:

Custom App and Software Development

We collaborate with you throughout the entire process because your customized tech should fit your needs, not just those of other clients.

Cloud and Mobile Applications

The modern world demands versatile technology, and this is exactly what your mobile and cloud-based apps will give you.

User Experience and Interface (UX/UI) Design

We want your end users to have optimal experiences with tech that is highly intuitive and responsive.

DevOps

This combination of Agile software development and IT operations provides you with high-quality software at reduced cost, time, and risk.

Trailhead stepped into a challenging project – building our new web architecture and redeveloping our portals at the same time the business was migrating from a legacy system to our new CRM solution. They were able to not only significantly improve our web development architecture but our development and deployment processes as well as the functionality and performance of our portals. The feedback from customers has been overwhelmingly positive. Trailhead has proven themselves to be a valuable partner.

– BOB DOERKSEN, Vice President of Technology Services
at Montage Furniture Services

Technologies Used

When you hit the trails, it is essential to bring appropriate gear. The same holds true for your digital technology needs. That’s why Trailhead builds custom solutions on trusted platforms like .NET, Angular, React, and Xamarin.

Expertise

We partner with businesses who need intuitive custom software, responsive mobile applications, and advanced cloud technologies. And our extensive experience in the tech field allows us to help you map out the right path for all your digital technology needs.

  • Project Management
  • Architecture
  • Web App Development
  • Cloud Development
  • DevOps
  • Process Improvements
  • Legacy System Integration
  • UI Design
  • Manual QA
  • Back end/API/Database development

We partner with businesses who need intuitive custom software, responsive mobile applications, and advanced cloud technologies. And our extensive experience in the tech field allows us to help you map out the right path for all your digital technology needs.

Our Gear Is Packed and We're Excited to Explore with You

Ready to come with us? 

Together, we can map your company’s tech journey and start down the trails. If you’re set to take the first step, simply fill out the contact form. We’ll be in touch – and you’ll have a partner who cares about you and your company. 

We can’t wait to hear from you! 

This field is for validation purposes and should be left unchanged.

Thank you message.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.