Keyframe Class
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
Interface of Keyframe
DegreesXY : float2 ux
DegreesY : float ux
DegreesZ : float ux
Keyframe Constructor uno
Creates a new Keyframe
ObjectValue : object ux
Tangent : float4 ux
Use the same value for both TangentIn and TangentOut
TangentIn : float4 ux
The direction and strength of the tangent leading into this point.
TangentOut : float4 ux
The direction and strength of the tangent leading out of this point.
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.