Animators are used to specify which and how Elements are to be animated when a Trigger is triggered. There are three pairs of properties which are important for controlling the exact result of an animation.

Example

Examples of animator types are Change and Move, as used in this example:

<Panel ux:Name="panel1" Color="Blue">
    <WhilePressed>
        <Change panel1.Color="#0f0" Duration="1" />
        <Move X="100" Delay="1" Duration="1" />
    </WhilePressed>
</Panel>

When the WhilePressed trigger above is activated when a pointer is pressed on the panel, the animators are played according to their Delays and other properties.

Duration/DurationBack

Animators are used to animate elements and properties in response to triggers being activated. There are many animators to choose from, all with different purposes. Common animators include Move, Rotate, Scale and Change. While these animators animate forward on activation and backward on deactivation, some animators, such as Spin and Cycle create a continuous looping animation while active.

Delay/DelayBack

Setting the Delay property results in the actual animation being delayed by that amount of seconds. DelayBack is used to set a different delay on the backward animation. The total duration of the animation becomes the delay + the duration. The following Change animator has a total duration of 7 seconds. It waits 5 seconds after being activated and then animates its target element over 2 seconds.

<Change Delay="5" Duration="2" someElement.Height="100"/>

Easing/EasingBack

Fuse comes with a standard set of predefined easing curves. Easing curves are used to control how an animation progresses over time. The default easing is set to Linear. With linear easing, the animation progresses at the same speed over its entire duration. This usually appears quite unnatural and fake. To gain a more natural feel, we can change the easing to QuadraticInOut, like so:

<Change Easing="QuadraticInOut" Duration="2" someElement.Property="SomeValue"/>

This animator will progress slowly in the beginning, faster in the middle, and then slow again in the end.

Track animators

TrackAnimator classes have a Duration as well as a defined target value. Animation can be tweaked further using Easing curves, or custom Keyframes

Change<T> ux

Temporarily changes the value of a property while its containing trigger is active. To permanently change a value, use the Set animator.

Move ux

Animates the translation a visual element.

Nothing ux

Allows you to artificially extend the timeline

Rotate ux

Rotates the Visual. This does the same transform as Rotation.

Scale ux

Scales the element. Note that scale doesn't actually change the elements size. This means that the rest of the UI layout wont be affected and the animation is guaranteed to be fast.

Skew ux

Allows you to animate a skew transform on an element.

Open / looping animators

OpenAnimators classes have infinite duration, and typically loop or repeate forever while active.

Cycle<T> ux

Animates a repeating cycle between a high and low value using a given waveform.

Spin ux

Continuously rotates an element, given a Frequency measured in full rotations per second.

<Panel>
    <WhilePressed>
        <Spin Frequency="2" />
    </WhilePressed>
</Panel>

As with Cycle, you may also specify a Duration to control the length of the animation.

Location

Namespace
Fuse.Animations
Package
Fuse.Animations 2.9.1
Show Uno properties and methods

Interface of Animator

Delay : double ux

Seconds from the start of the trigger until this animator should play.

MixOp : MixOp ux

How to mix this animator when there are multiple conflicting animators affecting the target.

Inherited from PropertyObject

Inherited from object