.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;
1---2name: maui-animations3description: .NET MAUI view animations, custom animations, easing functions, rotation, scale, translation, and fade effects. USE FOR: "animate view", "fade in", "fade out", "slide animation", "scale animation", "rotate view", "translate view", "easing function", "custom animation", "animation chaining", "ViewExtensions animation". DO NOT USE FOR: gesture recognition (use maui-gestures), custom drawing (use maui-graphics-drawing), or static layout changes (use maui-data-binding).4---5
6# .NET MAUI Animations
7
8## Built-in ViewExtensions
9
10All animation methods are extension methods on `VisualElement` and return `Task<bool>` for `await` chaining.
11
12### Methods
13
14| Method | Description |
15|---|---|
16| `FadeTo(opacity, length, easing)` | Animate `Opacity` |
17| `RotateTo(degrees, length, easing)` | Animate `Rotation` |
18| `RotateXTo(degrees, length, easing)` | Animate `RotationX` (3D) |
19| `RotateYTo(degrees, length, easing)` | Animate `RotationY` (3D) |
20| `ScaleTo(scale, length, easing)` | Animate `Scale` uniformly |
21| `ScaleXTo(scale, length, easing)` | Animate `ScaleX` |
22| `ScaleYTo(scale, length, easing)` | Animate `ScaleY` |
23| `TranslateTo(x, y, length, easing)` | Animate `TranslationX`/`TranslationY` |
24| `RelScaleTo(delta, length, easing)` | Relative scale increment |
25| `RelRotateTo(delta, length, easing)` | Relative rotation increment |
26
27- `length` defaults to 250 ms. `easing` defaults to `Easing.Linear`.
28- Call `view.CancelAnimations()` to stop all running animations on that view.
29
30### Composite Animations
31
32```csharp
33// Parallel – all run at the same time
34await Task.WhenAll(
35 view.FadeTo(1, 500),
36 view.ScaleTo(1.5, 500),
37 view.RotateTo(360, 500));
38
39// Sequential – one after the other
40await view.FadeTo(0, 250);
41await view.TranslateTo(100, 0, 500);
42await view.FadeTo(1, 250);
43```
44
45## Custom Animation Class
46
47Use `Animation` for fine-grained control with child animations and timing ratios.
48
49```csharp
50var parent = new Animation();
51
52// Child animations with begin/end ratios (0.0–1.0)
53parent.Add(0.0, 0.5, new Animation(v => view.Opacity = v, 0, 1));
54parent.Add(0.5, 1.0, new Animation(v => view.Scale = v, 1, 2, Easing.SpringOut));
55
56// Commit to run
57parent.Commit(
58 owner: view,
59 name: "MyAnimation",
60 rate: 16, // ms per frame
61 length: 1000, // total duration ms
62 easing: Easing.Linear,
63 finished: (v, cancelled) => { /* cleanup */ },
64 repeat: () => false); // return true to loop
65```
66
67### Constructor
68
69```csharp
70new Animation(
71 callback: v => view.Scale = v, // Action<double>
72 start: 0.0,
73 end: 1.0,
74 easing: Easing.CubicInOut);
75```
76
77### Cancelling
78
79```csharp
80view.AbortAnimation("MyAnimation");
81```
82
83> **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.
84
85## AnimationExtensions.Animate
86
87Animate any property on any object:
88
89```csharp
90view.Animate<double>(
91 name: "opacity",
92 transform: v => v, // Func<double, T>
93 callback: v => view.Opacity = v,
94 rate: 16,
95 length: 500,
96 easing: Easing.SinInOut,
97 finished: (v, cancelled) => { });
98```
99
100## Easing Functions
101
102| Easing | Curve |
103|---|---|
104| `Easing.Linear` | Constant speed |
105| `Easing.SinIn` | Smooth accelerate |
106| `Easing.SinOut` | Smooth decelerate |
107| `Easing.SinInOut` | Smooth both |
108| `Easing.CubicIn` | Sharp accelerate |
109| `Easing.CubicOut` | Sharp decelerate |
110| `Easing.CubicInOut` | Sharp both |
111| `Easing.BounceIn` | Bounce at start |
112| `Easing.BounceOut` | Bounce at end |
113| `Easing.SpringIn` | Spring at start |
114| `Easing.SpringOut` | Spring at end |
115
116### Custom Easing
117
118```csharp
119var customEase = new Easing(t => t * t * t);
120await view.ScaleTo(2, 500, customEase);
121```
122
123## Accessibility: Power-Save Mode
124
125Check `VisualElement.IsAnimationEnabled` before running animations. This is `false` when the OS power-save / reduced-motion mode is active.
126
127```csharp
128if (view.IsAnimationEnabled)
129 await view.FadeTo(1, 500);
130else
131 view.Opacity = 1;
132```
majiayu000