Skip to content
This repository was archived by the owner on Jul 11, 2023. It is now read-only.

Commit 92063b2

Browse files
zdpcdtzdpcdt
authored
未翻译的文档先用英文版过渡 (#11)
* feat: add data-binding * feat: add styling * feat: add controls * feat: add templates * feat: add authoring-controls * feat: add input * feat: add animations * feat: add layout * feat: add distribution-publishing
1 parent 8f8e5ca commit 92063b2

File tree

94 files changed

+8732
-5
lines changed

Some content is hidden

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

94 files changed

+8732
-5
lines changed

Diff for: ‎SUMMARY.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
* [在控件模板中实现绑定](docs/data-binding/binding-in-a-control-template.md)
3333
* [绑定 Classes 伪类](docs/data-binding/binding-classes.md)
3434
* [创建和绑定到附加属性](docs/data-binding/creating-and-binding-attached-properties.md)
35+
* [Data Validation](docs/data-binding/data-validation.md)
3536
* [🎨 样式](docs/styling/README.md)
3637
* [样式](docs/styling/styles.md)
3738
* [选择器](docs/styling/selectors.md)
@@ -174,4 +175,4 @@
174175
* [👪 社区](misc/community.md)
175176
* [🖥 WPF 开发者建议](misc/wpf.md)
176177
* [📋 正在使用 Avalonia 的项目](misc/projects-that-are-using-avalonia.md)
177-
* [❔ 常见问题](misc/faq.md)
178+
* [❔ 常见问题](misc/faq.md)

Diff for: ‎docs/animations/README.md

+9
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,11 @@
11
# 🔑 动画
22

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.md)
11+
* [Transitions](transitions.md)

Diff for: ‎docs/animations/keyframe-animations.md

+165
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,167 @@
11
# 关键帧动画
22

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

0 commit comments

Comments
 (0)