关键帧动画
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.
Defining A Keyframe Animation
Keyframe animations are applied using styles. They can be defined on any style by adding an Animation
object to the Style.Animation
property:
The example above animates the target Control
as defined by its selector. It will be run immediately when the control is loaded.
Triggering Animations
Unlike WPF's Triggers
, Animations defined in XAML rely on 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).
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.
KeyFrames
KeyFrames
The KeyFrame
objects defines when the target Setter
objects should be applied on the target Control
, with value interpolation in-between.
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.
All Animation
objects should contain at least one KeyFrame
, with a Setter
that has target property and value.
Multiple properties can be also animated in a single Animation by adding additional Setter
objects on the desired KeyFrame
:
Delay
You can add a delay in a Animation
by defining the desired delay time on its Delay
property:
Repeat
You can set the following repeat behaviors on IterationCount
property of an Animation
.
Playback Direction
The PlaybackDirection
property defines how should the animation be played, including repeats.
The following table describes the possible behaviors:
Value fill modes
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.
The following table describes the possible behaviors:
Easings
Easing functions can be set by setting the name of the desired function to the Animation
's Easing
property:
You can also add your custom easing function class like this:
The following list contains the built-in easing functions.
LinearEasing (Default)
BackEaseIn
BackEaseInOut
BackEaseOut
BounceEaseIn
BounceEaseInOut
BounceEaseOut
CircularEaseIn
CircularEaseInOut
CircularEaseOut
CubicEaseIn
CubicEaseInOut
CubicEaseOut
ElasticEaseIn
ElasticEaseInOut
ElasticEaseOut
ExponentialEaseIn
ExponentialEaseInOut
ExponentialEaseOut
QuadraticEaseIn
QuadraticEaseInOut
QuadraticEaseOut
QuarticEaseIn
QuarticEaseInOut
QuarticEaseOut
QuinticEaseIn
QuinticEaseInOut
QuinticEaseOut
SineEaseIn
SineEaseInOut
SineEaseOut
最后更新于