> For the complete documentation index, see [llms.txt](https://pwangs-organization.gitbook.io/avaloniachinese/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://pwangs-organization.gitbook.io/avaloniachinese/docs/animations/keyframe-animations.md).

# 关键帧动画

Avalonia 中的关键帧动画受到 CSS 动画的启发。它们可以用于动画控件上的任何数量的属性，使用任意数量的关键帧来定义每个属性必须经过的状态。关键帧动画可以任意次数地运行，以任何方向运行。

## 定义关键帧动画 <a href="#defining-a-keyframe-animation" id="defining-a-keyframe-animation"></a>

关键帧动画使用样式来应用。可以通过将 `Animation` 对象添加到 `Style.Animation` 属性来定义任何样式：

```markup
<Window xmlns="https://github.com/avaloniaui">
    <Window.Styles>
        <Style Selector="Rectangle.red">
            <Setter Property="Height" Value="100"/>
            <Setter Property="Width" Value="100"/>
            <Setter Property="Fill" Value="Red"/>
            <Style.Animations>
                <Animation Duration="0:0:1"> 
                    <KeyFrame Cue="0%">
                        <Setter Property="Opacity" Value="0.0"/>
                    </KeyFrame>
                    <KeyFrame Cue="100%">
                        <Setter Property="Opacity" Value="1.0"/>
                    </KeyFrame>
                </Animation>
            </Style.Animations>
        </Style>
    </Window.Styles>

    <Rectangle Classes="red"/>
</Window>
```

上面的示例将目标 `Control` 按照其 [选择器](https://docs.avaloniaui.net/docs/styling/selectors) 进行动画处理。当控件加载时立即运行。

## 触发动画 <a href="#triggering-animations" id="triggering-animations"></a>

与 WPF 的 `Triggers` 不同，XAML 中定义的动画依赖于 [选择器](https://docs.avaloniaui.net/docs/styling/selectors) 来进行触发行为。选择器可以始终适用于一个控件，或者它们可以有条件地适用（例如，如果控件有应用样式类）。

如果选择器不是有条件的，则动画将在匹配的 `Control` 加载到视觉树中时触发。否则，动画将在其选择器被激活时运行。当选择器不再匹配时，当前运行的动画将被取消。

## `KeyFrames` <a href="#keyframes" id="keyframes"></a>

`KeyFrame` 对象定义目标 `Setter` 对象应该何时应用于目标 `Control` 上，并在之间进行值插值。

`KeyFrame` 对象的 `Cue` 属性基于父动画的 `Duration`，可以是绝对时间索引（即 `"0:0:1"`）或动画 `Duration` 的百分比（即 `"0%"`，`"100%"`）。但是，`Cue` 的值不应超过指定的 `Duration`。

所有 `Animation` 对象应该至少包含一个具有目标属性和值的 `Setter`。

也可以通过在所需的 `KeyFrame` 上添加其他 `Setter` 对象来在单个动画中动画多个属性：

```xaml
<Animation Duration="0:0:1"> 
    <KeyFrame Cue="0%">
        <Setter Property="Opacity" Value="0.0"/>
        <Setter Property="RotateTransform.Angle" Value="0.0"/>
    </KeyFrame>
    <KeyFrame Cue="100%">
        <Setter Property="Opacity" Value="1.0"/>
        <Setter Property="RotateTransform.Angle" Value="90.0"/>
    </KeyFrame>
</Animation>
```

## 延迟 <a href="#delay" id="delay"></a>

您可以通过在`Animation`的`Delay`属性上定义所需的延迟时间来添加延迟：

```markup
<Animation Duration="0:0:1"
           Delay="0:0:1"> 
    ...
</Animation>
```

## 重复 <a href="#repeat" id="repeat"></a>

您可以在`Animation`的`IterationCount`属性上设置以下重复行为。

| 值          | 描述      |
| ---------- | ------- |
| `0` 到 N    | 播放 N 次。 |
| `INFINITE` | 无限重复。   |

## 播放方向 <a href="#playback-direction" id="playback-direction"></a>

`PlaybackDirection`属性定义动画如何播放，包括重复。

以下表格描述了可能的行为：

| 值                  | 描述              |
| ------------------ | --------------- |
| `Normal`           | 正常播放动画。         |
| `Reverse`          | 反向播放动画。         |
| `Alternate`        | 先正向播放动画，然后反向播放。 |
| `AlternateReverse` | 先反向播放动画，然后正向播放。 |

## 值填充模式 <a href="#value-fill-modes" id="value-fill-modes"></a>

`FillMode`属性定义在运行动画和动画之间的延迟时，动画的第一个或最后一个插值值是否保留。

以下表格描述了可能的行为：

| 值          | 描述                         |
| ---------- | -------------------------- |
| `None`     | 值不会在动画之后保留，动画延迟时也不会应用第一个值。 |
| `Forward`  | 最后一个插值值将保留到目标属性。           |
| `Backward` | 第一个插值值将在动画延迟时显示。           |
| `Both`     | 将应用`Forward`和`Backward`行为。 |

## 缓动 <a href="#easings" id="easings"></a>

可以通过将所需函数的名称设置为`Animation`的`Easing`属性来设置缓动函数：

```markup
<Animation Duration="0:0:1"
           Delay="0:0:1"
           Easing="BounceEaseIn"> 
    ...
</Animation>
```

您还可以像这样添加自定义缓动函数类：

```markup
<Animation Duration="0:0:1"
           Delay="0:0:1">
    <Animation.Easing>
        <local:YourCustomEasingClassHere/>
    </Animation.Easing> 
    ...
</Animation>
```

以下列表包含内置缓动函数。

* LinearEasing（默认）
* BackEaseIn
* BackEaseInOut
* BackEaseOut
* BounceEaseIn
* BounceEaseInOut
* BounceEaseOut
* CircularEaseIn
* CircularEaseInOut
* CircularEaseOut
* CubicEaseIn
* CubicEaseInOut
* CubicEaseOut
* ElasticEaseIn
* ElasticEaseInOut
* ElasticEaseOut
* ExponentialEaseIn
* ExponentialEaseInOut
* ExponentialEaseOut
* QuadraticEaseIn
* Quadr


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://pwangs-organization.gitbook.io/avaloniachinese/docs/animations/keyframe-animations.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.