One waypoint of an animation — the property values the animated element should have at a single moment in the timeline.
Declarative element:
<sk-keyframe>
Not on the sk.* global — construct via the declarative element or a module import.
A keyframe belongs to the SkenraAnimatable animation family as a child of an
sk-animation: the animation interpolates between its keyframes to drive the
host's properties. Each keyframe pins one instant of the timeline.
Key attributes. offset places the keyframe in the timeline as a fraction from
0 (start) to 1 (end). Every other attribute is a value for one animatable property
of the animation's host at that offset — and that set is open: a keyframe can carry
any animatable property (x, base-color, quaternion, …), which is why it has no
fixed list of named properties. The host determines what is animatable — node
transforms on a node, colors on a material.
Related. Keyframes live inside an sk-animation; a lone keyframe at
offset="1" makes a "to" animation from the host's current value. The properties a
keyframe may set are the animatable properties of whatever SkenraAnimatablehosts the animation.
constructor()No properties.
| Method | Description | Declared by |
|---|---|---|
setKeyframeProperty(name: string, value: unknown): void |
Sets a keyframe property value. | SkenraKeyframe |
getKeyframeProperty(name: string): unknown |
Gets a keyframe property value. | SkenraKeyframe |
const kf = document.createElement('sk-keyframe') as SkenraKeyframe;
kf.setKeyframeProperty('offset', 0);
kf.setKeyframeProperty('x', 5);
kf.setKeyframeProperty('baseColor', '#ff0000');Used in guides: Scene basics