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

Open / looping animators

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

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