React 时间线编辑器
React 时间线编辑器 是一个用于快速构建时间线动画编辑器的 React 组件。
快速开始
npm install @xzdarcy/react-timeline-editor
import { 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}
/>
);
};
文档
查看文档以了解一些基本和高级功能的演示。