.NET MAUI Animations
Built-in ViewExtensions
All animation methods are extension methods on VisualElement and return Task<bool> for await chaining.
Methods
Method Description
FadeTo(opacity, length, easing)
Animate Opacity
RotateTo(degrees, length, easing)
Animate Rotation
RotateXTo(degrees, length, easing)
Animate RotationX (3D)
RotateYTo(degrees, length, easing)
Animate RotationY (3D)
ScaleTo(scale, length, easing)
Animate Scale uniformly
ScaleXTo(scale, length, easing)
Animate ScaleX
ScaleYTo(scale, length, easing)
Animate ScaleY
TranslateTo(x, y, length, easing)
Animate TranslationX /TranslationY
RelScaleTo(delta, length, easing)
Relative scale increment
RelRotateTo(delta, length, easing)
Relative rotation increment
-
length defaults to 250 ms. easing defaults to Easing.Linear .
-
Call view.CancelAnimations() to stop all running animations on that view.
Composite Animations
// Parallel – all run at the same time await Task.WhenAll( view.FadeTo(1, 500), view.ScaleTo(1.5, 500), view.RotateTo(360, 500));
// Sequential – one after the other await view.FadeTo(0, 250); await view.TranslateTo(100, 0, 500); await view.FadeTo(1, 250);
Custom Animation Class
Use Animation for fine-grained control with child animations and timing ratios.
var parent = new Animation();
// Child animations with begin/end ratios (0.0–1.0) parent.Add(0.0, 0.5, new Animation(v => view.Opacity = v, 0, 1)); parent.Add(0.5, 1.0, new Animation(v => view.Scale = v, 1, 2, Easing.SpringOut));
// Commit to run parent.Commit( owner: view, name: "MyAnimation", rate: 16, // ms per frame length: 1000, // total duration ms easing: Easing.Linear, finished: (v, cancelled) => { /* cleanup */ }, repeat: () => false); // return true to loop
Constructor
new Animation( callback: v => view.Scale = v, // Action<double> start: 0.0, end: 1.0, easing: Easing.CubicInOut);
Cancelling
view.AbortAnimation("MyAnimation");
Gotcha: Returning true from a child animation's repeat callback does not repeat the parent animation. Only the repeat callback passed to Commit on the parent controls parent repetition.
AnimationExtensions.Animate
Animate any property on any object:
view.Animate<double>( name: "opacity", transform: v => v, // Func<double, T> callback: v => view.Opacity = v, rate: 16, length: 500, easing: Easing.SinInOut, finished: (v, cancelled) => { });
Easing Functions
Easing Curve
Easing.Linear
Constant speed
Easing.SinIn
Smooth accelerate
Easing.SinOut
Smooth decelerate
Easing.SinInOut
Smooth both
Easing.CubicIn
Sharp accelerate
Easing.CubicOut
Sharp decelerate
Easing.CubicInOut
Sharp both
Easing.BounceIn
Bounce at start
Easing.BounceOut
Bounce at end
Easing.SpringIn
Spring at start
Easing.SpringOut
Spring at end
Custom Easing
var customEase = new Easing(t => t * t * t); await view.ScaleTo(2, 500, customEase);
Accessibility: Power-Save Mode
Check VisualElement.IsAnimationEnabled before running animations. This is false when the OS power-save / reduced-motion mode is active.
if (view.IsAnimationEnabled) await view.FadeTo(1, 500); else view.Opacity = 1;