Keyframes TrackAnimator.Keyframes Property

The list of keyframes for this animator.

If no keyframes are specified, the animator simply uses the Easing and Duration properties to determine interpolation between start and end values.

For the cases where we want to specify several steps for an animation, we can specify keyframes.

Example:

<Move RelativeTo="ParentSize">
    <Keyframe X="10" Time="0.5"/>
    <Keyframe X="15" Time="1"/>
    <Keyframe X="5" Time="2"/>
</Move>

This Move animator will first animate X to 10 over 0.5 second, then from 10 to 15 over 0.5 second. Finally, it will go from an X of 15 to 5 over 1 second. Here is an example of using Keyframes with a Change animator:

<Page>
    <SolidColor ux:Name="background" Color="#f00"/>
    <ActivatingAnimation>
        <Change Target="background.Color">
            <Keyframe Value="#0f0" TimeDelta="0.25"/>
            <Keyframe Value="#f00" TimeDelta="0.25"/>
            <Keyframe Value="#ff0" TimeDelta="0.25"/>
            <Keyframe Value="#0ff" TimeDelta="0.25"/>
        </Change>
    </ActivatingAnimation>
</Page>

This time we use TimeDelta instead of time. With TimeDelta we can specify time as a relative term instead of absolute. This means that the order of the Keyframes matter, but it lets us reason about the keyframes in terms of their duration instead of their absolute time on the timeline.

Location

Namespace

Fuse.Animations

Package

Fuse.Animations 2.9.1

Returns

IList<Keyframe>