Developer Docs - Mobile Docs - Animations

Animations provide a way to make adjustments to the UI in response to user actions over a pre-determined amount of time.

Animations in Rock Mobile Shell are provided by the AlohaKit animation library. That page has some samples and screenshots to give you a few ideas of what you can build. But we'll give you some information on how to build it here.

Defining Animations

Let's talk about simple animations first. Animations are referenced by name and defined in the Resources of an element. In order to access an animation, it must be defined in an ancestor of where you are trying to reference it. Said another way, let's suppose you have the following XAML defined:

So let's take an example of what this might look like:

These types of animation definitions let you target specific visual elements with a pre-defined animation style.

Starting Animations

Okay, we were able to define an animation but we need to start it somehow. You have two choices when it comes to triggering an animation.

Let's modify our example above but include a trigger style activator based on the user tapping a button:

Another way we could define this is by behavior. Suppose we wanted the text to automatically fade out after the page loads? To do that we would use a BeginAnimationBehavior instead:

The way behaviors work is that they begin when the element they are attached to are themselves attached to their parent element. Because there might be a delay between when this happens and when the page itself becomes fully visible, there is a hard-coded 250-millisecond delay before the referenced animation actually begins.

Stopping Animations

You can also provide the ability to stop an animation by using a trigger. Technically, the library also supports stopping an animation using a behavior, but in our use case, those don't actually make sense. If you are curious though, it is available as EndAnimationBehavior. But here is an example of two buttons, one to start and one to stop an animation.

Triggered Animations

Triggered animations are ones that are, well, triggered by some user interaction. Until the user activates that trigger event, such as tapping a button, the animation remains idle.

All of the animations in this section support the following properties.

BounceInAnimation

Animates the Scale and Opacity of the target to make it appear.

  This animation ignores the Easing property.  

BounceOutAnimation

Animates the Scale and Opacity of the target to make it disappear.

  This animation ignores the Easing property.  

BackgroundColorAnimation

Animates the BackgroundColor of the target from its current value to a new color.

  This animation ignores the Easing property.  

ColorAnimation

Animates the specified property of the target, which must be of type Color, between two values.

CornerRadiusAnimation

Animates the specified property of the target, which must be of type CornerRadius, between two values.

DoubleAnimation

Animates the specified property, which must be of type double, of the target between two values.

FadeInAnimation

Animates the Opacity and Y position of the element to make it visible. As the element is faded in it will also slide down or up to its final position.

This animation ignores the Easing property.

FadeToAnimation

Animates the Opacity of the target from its current value to a new value.

FadeOutAnimation

Animates the Opacity and Y position of the element to make it invisible. As the element is faded in, it will also slide down or up from its current position.

  This animation ignores the Easing property.  

FlipAnimation

Animates the Opacity and RotationY axis of the element to make it visible. As the element is faded in it will also rotate along its y-axis (that is, it will grow from a single vertical line to full-width) as if a card were being turned 90 degrees.

  Check out the Flip View for an easy way to animate between two sections of content.  

  This animation ignores the Easing property.  

HeartAnimation

Animates the Scale of the target to simulate a heartbeat, growing and shrinking slightly.

  This animation ignores the Easing property.  

IntAnimation

Animates the specified property of the target, which must be of type int, between two values.

JumpAnimation

Animates the TranslationY of the target to cause it to jump up and down.

  This animation ignores the Easing property.  

RelRotateToAnimation

Animates the Rotation of the target to spin the element by the number of degrees. This rotation happens along the Z-axis, meaning it does not distort the element's perspective at all.

RelScaleToAnimation

Animates the Scale of the target to make the element appear larger or smaller than it normally would.

RotateToAnimation

Animates the Rotation of the target to spin the element to the specified final rotation value. This rotation happens along the Z-axis, meaning it does not distort the element's perspective at all.

RotateXToAnimation

Animates the RotationX of the target to shift the perspective of the element.

RotateYToAnimation

Animates the RotationY of the target to shift the perspective of the element.

ScaleToAnimation

Animates the Scale of the target to make the element appear larger or smaller than it normally would.

  This animation ignores the RepeatForever property.  

ShakeAnimation

Animates the TranslationX target to make it appear as if it were being shaken back and forth.

  This animation ignores the Easing property.  

ThicknessAnimation

Animates the specified property of the target, which must be of type Thickness, between two values.

TranslateToAnimation

TurnstileInAnimation

  This animation ignores the Easing property.  

TurnstileOutAnimation

  This animation ignores the Easing property.  

GroupAnimation

This special animation does not conform to the common properties mentioned previously. This element lets you group animations so that they can be triggered at the same time. Animations to be grouped together can be added as child elements.

When targeting the same element with multiple animations, they'll be played sequentially from top to bottom. The next animation will not start until the previous one has finished.

Passive Animations

A passive animation is one that is always active and updates continuously whenever the property it uses to track progress changes. One example usage of this might be a slider that is used to specify the color of something. As the slider moves from one side to the other, the color slowly changes from one color to the other.

All of the animations in this section support the following properties.

AnimateProgressColor

Animates the Color-type property between the From and To values.

AnimateProgressCornerRadius

Animates the CornerRadius-type property between the From and To values.

AnimateProgressDouble

Animates the double-type property between the From and To values.

AnimateProgressInt

Animates the int-type property between the From and To values.

AnimateProgressThickness

Animates the Thickness-type property between the From and To values.