Loading...
Loading...
.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).
npx skill4agent add davidortinau/maui-skills maui-animationsVisualElementTask<bool>await| Method | Description |
|---|---|
| Animate |
| Animate |
| Animate |
| Animate |
| Animate |
| Animate |
| Animate |
| Animate |
| Relative scale increment |
| Relative rotation increment |
lengtheasingEasing.Linearview.CancelAnimations()// 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);Animationvar 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 loopnew Animation(
callback: v => view.Scale = v, // Action<double>
start: 0.0,
end: 1.0,
easing: Easing.CubicInOut);view.AbortAnimation("MyAnimation");Gotcha: Returningfrom a child animation'struecallback does not repeat the parent animation. Only therepeatcallback passed torepeaton the parent controls parent repetition.Commit
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 | Curve |
|---|---|
| Constant speed |
| Smooth accelerate |
| Smooth decelerate |
| Smooth both |
| Sharp accelerate |
| Sharp decelerate |
| Sharp both |
| Bounce at start |
| Bounce at end |
| Spring at start |
| Spring at end |
var customEase = new Easing(t => t * t * t);
await view.ScaleTo(2, 500, customEase);VisualElement.IsAnimationEnabledfalseif (view.IsAnimationEnabled)
await view.FadeTo(1, 500);
else
view.Opacity = 1;