A Timeline object can hold multiple properties with keyframes. ex. position, rotation, color, etc., and makes it easy to group things together. In my own projects, I create multiple Timeline objects, one for each graphical object.
It builds on top of keyframes, but does not expose Keyframes library to user - user only needs to provide a minimum amount of necessary data. ex. { time, value, ... }
In development, and breaking changes are expected in the future.
npm i @daeinc/timeline
Then,
import Timeline from "@daeinc/timeline";Pass a timeline name and a single property object ({name, keyframes}) or an array of property objects ([{name, keyframes}, {name, keyframes}]):
const tl = new Timeline("my-timeline", {
name: "position",
keyframes: [
{ time: 0, value: 5 },
{ time: 1, value: 10 },
],
});
const v1 = tl.value("position", 0.5); // returns 7.5Pass a custom interpolator function:
JS:
const easeInQuad = (a, b, t) => {
return lerp(a.value, b.value, t * t);
};
const v2 = tl.value("position", 0.5, easeInQuad);
console.log(v2); // 6.25TS:
import type { Keyframe } from "@daeinc/timeline";
const easeInQuad = (a: Keyframe, b: Keyframe, t: number) => {
return lerp(a.value, b.value, t * t);
};
const v2 = tl.value("position", 0.5, easeInQuad);
console.log(v2); // 6.25constructor(propOrProps?: InputProp | InputProp[]);
propExists(propName: string): boolean;
addKeyframe(propName: string, newKey: Keyframe): void;
addKeyframes(propName: string, ...newKeys: Keyframe[]): void;
getKeyframe(propName: string, timeStamp: number): Keyframe;
getKeyframes(propName: string): Keyframe[];
getName(): string;
getPropertyNames(): string[];
value(propName: string, timeStamp: number, interpolator?: Interpolator): any;
addProperty(propName: string, ...newKeys: Keyframe[]): void;
removeKeyframes(propName: string, index: number, howmany: number): void;
nearest(propName: string, timeStamp: number, radius?: number): Keyframe;
nearestIndex(propName: string, timeStamp: number, radius?: number): number;
next(propName: string, timeStamp: number): Keyframe;
previous(propName: string, timeStamp: number): Keyframe;
static fromJSON(file: string): Promise<void | Timeline>;
static from(data: {
name: string;
properties: InputProp[];
}): Timeline;
toJSON(): string;- add more examples
- how to add keyframes
- how to import and export
- implement the rest of the methods from
keyframespackage - add a separate
.d.tsforkeyframesJS package, or, create a TS version of the keyframes package as aclass. - throw errors or return null or guard against them?
MIT