React Timeline Editor is a react component used to quickly build a timeline animation editor.
npm install @xzdarcy/react-timeline-editorimport { Timeline, TimelineEffect, TimelineRow } from '@xzdarcy/react-timeline-editor';
import React from 'react';
const mockData: TimelineRow[] = [{
id: "0",
actions: [
{
id: "action00",
start: 0,
end: 2,
effectId: "effect0",
},
],
},
{
id: "1",
actions: [
{
id: "action10",
start: 1.5,
end: 5,
effectId: "effect1",
}
],
}]
const mockEffect: Record<string, TimelineEffect> = {
effect0: {
id: "effect0",
name: "效果0",
},
effect1: {
id: "effect1",
name: "效果1",
},
};
const TimelineEditor = () => {
return (
<Timeline
editorData={mockData}
effects={mockEffect}
/>
);
};Checkout the Docs for a demonstration of some basic and advanced features.