Animation Engine (LB Android 1.10+)

Written By Brian Faeran

Last updated 6 months ago

Namespace:

xmlns:anim="clr-namespace:Unbroken.LaunchBox.MAUI.AnimationSystem"

Animations can be applied to elements in all views. Combine with Trigger Bindings to control when they run.

General Properties (All Animations)

  • Delay — Time before animation starts (ms)

  • Duration — How long animation lasts (ms)

  • Easing — Transition style:

    BounceIn 
BounceOut 
CubicIn 
CubicInOut 
CubicOut 
Linear 
SinIn 
SinInOut 
SinOut 
SpringIn 
SpringOut

  • RepeatForever (bool) — Repeat indefinitely

Available Animations

TranslateAnimation

Moves element on X/Y axes.

Properties:

  • TranslateX (double)

  • TranslateY (double)

Example:

<Grid TranslationY="0"> 
   <Grid.Triggers> 
      <DataTrigger TargetType="Grid" Binding="{Binding IsSelected}" Value="True"> 
         <DataTrigger.EnterActions> 
            <anim:BeginAnimation> 
               <anim:TranslateAnimation TranslateX="0" TranslateY="-20" Duration="250" Delay="0" Easing="CubicOut" RepeatForever="False" /> 
            </anim:BeginAnimation> 
         </DataTrigger.EnterActions> 
         <DataTrigger.ExitActions> 
            <anim:BeginAnimation> 
               <anim:TranslateAnimation TranslateX="0" TranslateY="0" Duration="250" Delay="0" Easing="CubicOut" RepeatForever="False" /> 
            </anim:BeginAnimation> 
         </DataTrigger.ExitActions> 
      </DataTrigger> 
   </Grid.Triggers> 
</Grid>

FadeToAnimation

Adjusts element opacity.

Property:

  • Opacity (0 to 1.0)

Example:

<Grid Opacity="0"> 
   <Grid.Triggers> 
      <DataTrigger TargetType="Grid" Binding="{Binding IsSelected}" Value="True"> 
         <DataTrigger.EnterActions> 
            <anim:BeginAnimation> 
               <anim:FadeToAnimation Opacity="0.75" Duration="250" Delay="0" Easing="CubicOut" RepeatForever="False" /> 
            </anim:BeginAnimation> 
         </DataTrigger.EnterActions> 
         <DataTrigger.ExitActions> 
            <anim:BeginAnimation> 
               <anim:FadeToAnimation Opacity="0" Duration="250" Delay="0" Easing="CubicOut" RepeatForever="False" /> 
            </anim:BeginAnimation> 
         </DataTrigger.ExitActions> 
      </DataTrigger> 
   </Grid.Triggers> 
</Grid>

ScaleAnimation

Adjusts element scale (1.0 = 100%).

Property:

  • Scale (double)

Example:

<Grid> 
   <Grid.Triggers> 
      <DataTrigger TargetType="Grid" Binding="{Binding IsSelected}" Value="True"> 
         <DataTrigger.EnterActions> 
            <anim:BeginAnimation> 
               <anim:ScaleAnimation Scale="1.2" Duration="250" Delay="0" Easing="CubicOut" RepeatForever="False" /> 
            </anim:BeginAnimation> 
         </DataTrigger.EnterActions> 
         <DataTrigger.ExitActions> 
            <anim:BeginAnimation> 
               <anim:FadeToAnimation Scale="1.0" Duration="250" Delay="0" Easing="CubicOut" RepeatForever="False" /> 
            </anim:BeginAnimation> 
         </DataTrigger.ExitActions> 
      </DataTrigger> 
   </Grid.Triggers> 
</Grid>

RotateAnimation

Adjusts element rotation based on angle.

Property:

  • Rotation (double, default 0)

Example:

<Grid Rotation="10"> 
   <Grid.Triggers> 
      <DataTrigger TargetType="Grid" Binding="{Binding IsSelected}" Value="True"> 
         <DataTrigger.EnterActions> 
            <anim:BeginAnimation> 
               <anim:RotateAnimation Rotation="180" Duration="250" Delay="0" Easing="CubicOut" RepeatForever="False" /> 
            </anim:BeginAnimation> 
         </DataTrigger.EnterActions> 
         <DataTrigger.ExitActions> 
            <anim:BeginAnimation> 
               <anim:RotateAnimation Rotation="10" Duration="250" Delay="0" Easing="CubicOut" RepeatForever="False" /> 
            </anim:BeginAnimation> 
         </DataTrigger.ExitActions> 
      </DataTrigger> 
   </Grid.Triggers> 
</Grid>

AnimateDouble

Can animate any property with a double value.

Required Property:

  • TargetProperty — format: VisualElement.Property (e.g., Grid.Opacity)

  • To — ending value

  • From — starting value (optional; if omitted, uses current value)

Example:

<Grid Rotation="10"> 
   <Grid.Triggers> 
      <DataTrigger TargetType="Grid" Binding="{Binding IsSelected}" Value="True"> 
         <DataTrigger.EnterActions> 
            <anim:AnimateDouble TargetProperty="Grid.RotationY" To="15" Duration="250" Delay="0" Easing="CubicOut" RepeatForever="False" /> 
         </DataTrigger.EnterActions> 
         <DataTrigger.ExitActions> 
            <anim:AnimateDouble TargetProperty="Grid.RotationY" To="0" Duration="250" Delay="0" Easing="CubicOut" RepeatForever="False" /> 
         </DataTrigger.ExitActions> 
      </DataTrigger> 
   </Grid.Triggers> 
</Grid>

Storyboards

Chain multiple animations to run in sequence.

Example — scale to 1.1 then back to 1.0, repeat forever:

<Image Source="{Binding ClearLogoThumbImage}"> 
   <Image.Triggers> 
      <DataTrigger TargetType="Image" Binding="{Binding IsSelected}" Value="True"> 
         <DataTrigger.EnterActions> 
            <anim:BeginAnimation> 
               <anim:StoryBoard RepeatForever="True"> 
                  <anim:ScaleAnimation Scale="1.1" Duration="500" Delay="0" /> 
                  <anim:ScaleAnimation Scale="1.0" Duration="500" Delay="0" /> 
               </anim:StoryBoard> 
            </anim:BeginAnimation> 
         </DataTrigger.EnterActions> 
         <DataTrigger.ExitActions> 
            <anim:BeginAnimation> 
               <anim:ScaleAnimation Scale="1.0" Duration="250" Delay="0" /> 
            </anim:BeginAnimation> 
         </DataTrigger.ExitActions> 
      </DataTrigger> 
   </Image.Triggers> 
</Image>

BeginAnimationBehavior

Starts an animation when a view first loads.

Example:

<Label TextColor="White"> 
   <Label.Behaviors> 
      <anim:BeginAnimationBehavior> 
         <anim:BeginAnimationBehavior.Animation> 
            <anim:RotateAnimation Rotation="360" Duration="1000" Easing="CubicOut" /> 
         </anim:BeginAnimationBehavior.Animation> 
      </anim:BeginAnimationBehavior> 
   </Label.Behaviors> 
</Label>

Animation – Extras

Extra properties to help control animations:

  • TranslationX — Starting X-axis position (default 0)

  • TranslationY — Starting Y-axis position (default 0)

  • Rotation — Starting rotation angle (default 0)

  • Scale — Starting scale (default 1.0)

  • AnchorX — Horizontal anchor point (0 = left, 1.0 = right, default 0.5)

  • AnchorY — Vertical anchor point (0 = top, 1.0 = bottom, default 0.5)