Allows you to specify several steps for an animation.

Examples

The following 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.

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

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.

Note: Despite being a PropertyObject the properties in this class are not reactive.

Location

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

Interface of Keyframe

Time : double ux

The time at which this value is reached, specified in seconds since the start of the timeline.

TimeDelta : double ux

The time at which this value is reached, specified in seconds since the last Keyframe.

Inherited from PropertyObject

Inherited from object

Attached UX Attributes

GlobalKey (attached by Resource) : string ux

The ux:Global attribute creates a global resource that is accessible everywhere in UX markup.