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.
<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.
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 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"/>
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.
Temporarily changes the value of a property while its containing trigger is active. To permanently change a value, use the Set animator.
Open / looping animators
- Fuse.Animations 1.8.0-rc2
Interface of Animator
How to mix this animator when there are multiple conflicting animators affecting the target.