Skip to content

Commit 4373acc

Browse files
MikeCodesDotNETMikeCodesDotNET
committed
Create v0.10.x version
1 parent 4ff2c19 commit 4373acc

File tree

193 files changed

+16936
-2
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

193 files changed

+16936
-2
lines changed

‎docusaurus.config.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@ const config = {
2929
// Please change this to your repo.
3030
// Remove this to remove the "edit this page" links.
3131
editUrl: 'https://github.com/AvaloniaUI/Docs',
32-
// includeCurrentVersion: false,
33-
// lastVersion: '0.10.x',
32+
includeCurrentVersion: false,
33+
lastVersion: '0.10.x',
3434
},
3535

3636
theme: {

‎versioned_docs/version-0.10.x/animations/index.md

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Animations
2+
3+
There are two types of animations in Avalonia:
4+
5+
* [Keyframe animations](keyframe-animations.md) animate any number of properties on a control, using any number of keyframes to define the states that each property must pass through. Keyframe animations are the more versatile type of animation.
6+
* [Transitions](transitions.md) are used to animate a single property change.
7+
8+
## In This Section <a href="#in-this-section" id="in-this-section"></a>
9+
10+
* [Keyframe Animations](keyframe-animations)
11+
* [Transitions](transitions)

‎versioned_docs/version-0.10.x/animations/keyframe-animations.md

+169
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
---
2+
id: keyframe-animations
3+
title: Keyframe Animations
4+
---
5+
6+
Keyframe animations in Avalonia are heavily inspired by CSS Animations. They can be used to animate any number of properties on a control, using any number of keyframes to define the states that each property must pass through. Keyframe animations can run any number of times, in either direction.
7+
8+
## Defining A Keyframe Animation <a id="defining-a-keyframe-animation"></a>
9+
10+
Keyframe animations are applied using styles. They can be defined on any style by adding an `Animation` object to the `Style.Animation` property:
11+
12+
```markup
13+
<Window xmlns="https://github.com/avaloniaui">
14+
<Window.Styles>
15+
<Style Selector="Rectangle.red">
16+
<Setter Property="Height" Value="100"/>
17+
<Setter Property="Width" Value="100"/>
18+
<Setter Property="Fill" Value="Red"/>
19+
<Style.Animations>
20+
<Animation Duration="0:0:1">
21+
<KeyFrame Cue="0%">
22+
<Setter Property="Opacity" Value="0.0"/>
23+
</KeyFrame>
24+
<KeyFrame Cue="100%">
25+
<Setter Property="Opacity" Value="1.0"/>
26+
</KeyFrame>
27+
</Animation>
28+
</Style.Animations>
29+
</Style>
30+
</Window.Styles>
31+
32+
<Rectangle Classes="red"/>
33+
</Window>
34+
```
35+
36+
The example above animates the target `Control` as defined by its [selector](https://docs.avaloniaui.net/docs/styling/selectors). It will be run immediately when the control is loaded.
37+
38+
## Triggering Animations <a id="triggering-animations"></a>
39+
40+
Unlike WPF's `Triggers`, Animations defined in XAML rely on [selectors](https://docs.avaloniaui.net/docs/styling/selectors) for their triggering behavior. Selectors can always apply to a control, or they can conditionally apply \(for example if the control has a style class appled\).
41+
42+
If the selector isn't conditional then the animation will be triggered when a matching `Control` is spawned into the visual tree. Otherwise, the animations will run whenever its selector is activated. When the selector no longer matches, the currently running animation will be canceled.
43+
44+
## `KeyFrames` <a id="keyframes"></a>
45+
46+
The `KeyFrame` objects defines when the target `Setter` objects should be applied on the target `Control`, with value interpolation in-between.
47+
48+
The `Cue` property of an `KeyFrame` object is based on the `Duration` of the parent animation and is a percent of the animation's `Duration` \(i.e., `"0%"`, `"100%"`\).
49+
50+
All `Animation` objects should contain at least one `KeyFrame`, with a `Setter` that has target property and value.
51+
52+
Multiple properties can be also animated in a single Animation by adding additional `Setter` objects on the desired `KeyFrame`:
53+
54+
```markup
55+
<Animation Duration="0:0:1">
56+
<KeyFrame Cue="0%">
57+
<Setter Property="Opacity" Value="0.0"/>
58+
<Setter Property="RotateTransform.Angle" Value="0.0"/>
59+
</KeyFrame>
60+
<KeyFrame Cue="100%">
61+
<Setter Property="Opacity" Value="1.0"/>
62+
<Setter Property="RotateTransform.Angle" Value="90.0"/>
63+
</KeyFrame>
64+
</Animation>
65+
```
66+
67+
## Delay <a id="delay"></a>
68+
69+
You can add a delay in a `Animation` by defining the desired delay time on its `Delay` property:
70+
71+
```markup
72+
<Animation Duration="0:0:1"
73+
Delay="0:0:1">
74+
...
75+
</Animation>
76+
```
77+
78+
## Repeat <a id="repeat"></a>
79+
80+
You can set the following repeat behaviors on `IterationCount` property of an `Animation`.
81+
82+
| Value | Description |
83+
| :--- | :--- |
84+
| `0` to N | Play N times. |
85+
| `INFINITE` | Repeat Indefinitely |
86+
87+
## Playback Direction <a id="playback-direction"></a>
88+
89+
The `PlaybackDirection` property defines how should the animation be played, including repeats.
90+
91+
The following table describes the possible behaviors:
92+
93+
| Value | Description |
94+
| :--- | :--- |
95+
| `Normal` | The animation is played normally. |
96+
| `Reverse` | The animation is played in reverse direction. |
97+
| `Alternate` | The animation is played forwards first, then backwards. |
98+
| `AlternateReverse` | The animation is played backwards first, then forwards. |
99+
100+
## Value fill modes <a id="value-fill-modes"></a>
101+
102+
The `FillMode` property defines whether the first or last interpolated value of an animation persist before or after running an animation and on delays in-between runs.
103+
104+
The following table describes the possible behaviors:
105+
106+
| Value | Description |
107+
| :--- | :--- |
108+
| `None` | Value will not persist after animation nor the first value will be applied when the animation is delayed. |
109+
| `Forward` | The last interpolated value will be persisted to the target property. |
110+
| `Backward` | The first interpolated value will be displayed on animation delay. |
111+
| `Both` | Both `Forward` and `Backward` behaviors will be applied. |
112+
113+
## Easings <a id="easings"></a>
114+
115+
Easing functions can be set by setting the name of the desired function to the `Animation`'s `Easing` property:
116+
117+
```markup
118+
<Animation Duration="0:0:1"
119+
Delay="0:0:1"
120+
Easing="BounceEaseIn">
121+
...
122+
</Animation>
123+
```
124+
125+
You can also add your custom easing function class like this:
126+
127+
```markup
128+
<Animation Duration="0:0:1"
129+
Delay="0:0:1">
130+
<Animation.Easing>
131+
<local:YourCustomEasingClassHere/>
132+
</Animation.Easing>
133+
...
134+
</Animation>
135+
```
136+
137+
The following list contains the built-in easing functions.
138+
139+
* LinearEasing \(Default\)
140+
* BackEaseIn
141+
* BackEaseInOut
142+
* BackEaseOut
143+
* BounceEaseIn
144+
* BounceEaseInOut
145+
* BounceEaseOut
146+
* CircularEaseIn
147+
* CircularEaseInOut
148+
* CircularEaseOut
149+
* CubicEaseIn
150+
* CubicEaseInOut
151+
* CubicEaseOut
152+
* ElasticEaseIn
153+
* ElasticEaseInOut
154+
* ElasticEaseOut
155+
* ExponentialEaseIn
156+
* ExponentialEaseInOut
157+
* ExponentialEaseOut
158+
* QuadraticEaseIn
159+
* QuadraticEaseInOut
160+
* QuadraticEaseOut
161+
* QuarticEaseIn
162+
* QuarticEaseInOut
163+
* QuarticEaseOut
164+
* QuinticEaseIn
165+
* QuinticEaseInOut
166+
* QuinticEaseOut
167+
* SineEaseIn
168+
* SineEaseInOut
169+
* SineEaseOut

0 commit comments

Comments
 (0)