Keyframing engine for JavaScript.
Nahara's Keyframe is consists of 3 modules:
@nahara/keyframe: The main module, which contains both types and implementations.@nahara/keyframe/types: The types module, which only contains the types. Useful if you want to write keyframe editor but don't want to be tied to default implementations.@nahara/keyframe/impl: The default implementations module, which contains the basic implementations. This is the module you probably want.
// Assuming you are using Deno + TypeScript
import * as keyframe from "jsr:@nahara/keyframe";
// Let's make a new timeline for our keyframes.
// We'll use our custom vector structure.
type vec2 = { x: number, y: number };
const timeline = new keyframe.BasicTimeline<vec2>({ x: 0, y: 0 }, keyframe.structInterpolatorOf());
// Let's place some keyframes in our timeline
// Additionlly, you can use timeline.add() to forcefully add a new keyframe without changing the existing one
timeline.set(0, { x: 0, y: 0 });
timeline.set(1000, { x: 100, y: 50 });
timeline.set(2000, { x: -500, y: 100 });
// Now we'll get the value at specified time
timeline.get(1000); // => { x: 100, y: 50 }
timeline.get(500); // => { x: 50, y: 25 }
// You can also move the keyframes around along its time axis
const keyframe = timeline.getKeyframeAt(1000);
keyframe.time += 500; // Move 2nd keyframe's time by +500
timeline.get(1500); // => { x: 100, y: 50 }
// Let's save our timeline...
const serializable = timeline.asSerializable;
const json = JSON.stringify(serializable);
// ...and now we load it
const newTimeline = new keyframe.BasicTimeline<vec2>({ x: 0, y: 0 }, keyframe.structInterpolatorOf());
newTimeline.loadFromSerializable(JSON.parse(json));- See Basic example for example on how to use this module.
- See Serialization example for example on how to save the timeline into serializable object.
MIT license.