maui-animations

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

.NET MAUI Animations

.NET MAUI 动画

Built-in ViewExtensions

内置 ViewExtensions

All animation methods are extension methods on

VisualElement

and return

Task<bool>

for

await

chaining.

所有动画方法都是

VisualElement

的扩展方法，返回

Task<bool>

以支持

await

链式调用。

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.

方法	描述
`FadeTo(opacity, length, easing)`	对 `Opacity` 属性执行动画
`RotateTo(degrees, length, easing)`	对 `Rotation` 属性执行动画
`RotateXTo(degrees, length, easing)`	对 `RotationX` 属性执行3D旋转动画
`RotateYTo(degrees, length, easing)`	对 `RotationY` 属性执行3D旋转动画
`ScaleTo(scale, length, easing)`	对视图执行均匀缩放动画
`ScaleXTo(scale, length, easing)`	对 `ScaleX` 属性执行动画
`ScaleYTo(scale, length, easing)`	对 `ScaleY` 属性执行动画
`TranslateTo(x, y, length, easing)`	对 `TranslationX` / `TranslationY` 属性执行平移动画
`RelScaleTo(delta, length, easing)`	相对增量缩放动画
`RelRotateTo(delta, length, easing)`	相对增量旋转动画

```
length
```
默认值为250毫秒。
```
easing
```
默认值为
```
Easing.Linear
```
。
调用
```
view.CancelAnimations()
```
可停止该视图上所有正在运行的动画。

Composite Animations

组合动画

csharp

// 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);

csharp

// 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

自定义 Animation 类

Use

Animation

for fine-grained control with child animations and timing ratios.

csharp

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

使用

Animation

类可实现对子动画和时间比例的精细控制。

csharp

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

构造函数

csharp

new Animation(
    callback: v => view.Scale = v,  // Action<double>
    start: 0.0,
    end: 1.0,
    easing: Easing.CubicInOut);

csharp

new Animation(
    callback: v => view.Scale = v,  // Action<double>
    start: 0.0,
    end: 1.0,
    easing: Easing.CubicInOut);

Cancelling

取消动画

csharp

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.

csharp

view.AbortAnimation("MyAnimation");

注意事项： 从子动画的
repeat
回调中返回
true
不会重复父动画。只有传递给父动画
Commit
方法的
repeat
回调才能控制父动画的重复。

AnimationExtensions.Animate

Animate any property on any object:

csharp

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) => { });

可为任意对象的任意属性执行动画：

csharp

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

缓动函数	曲线描述
`Easing.Linear`	匀速
`Easing.SinIn`	平滑加速
`Easing.SinOut`	平滑减速
`Easing.SinInOut`	先加速后减速，平滑过渡
`Easing.CubicIn`	急剧加速
`Easing.CubicOut`	急剧减速
`Easing.CubicInOut`	先急剧加速后急剧减速
`Easing.BounceIn`	起始处弹跳
`Easing.BounceOut`	结束处弹跳
`Easing.SpringIn`	起始处弹性效果
`Easing.SpringOut`	结束处弹性效果

Custom Easing

自定义缓动函数

csharp

var customEase = new Easing(t => t * t * t);
await view.ScaleTo(2, 500, customEase);

csharp

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.

csharp

if (view.IsAnimationEnabled)
    await view.FadeTo(1, 500);
else
    view.Opacity = 1;

在运行动画前，请检查

VisualElement.IsAnimationEnabled

属性。当系统处于省电/减少动画模式时，该属性值为

false

。

csharp

if (view.IsAnimationEnabled)
    await view.FadeTo(1, 500);
else
    view.Opacity = 1;