Original Work

This repo is forked from the original author repo @xzdarcy/react-timeline-editor and modified with custom requirements.

React Timeline Editor

React Timeline Editor is a react component used to quickly build a timeline animation editor.

Getting Started

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} />;
};

Documention

Checkout the Docs for a demonstration of some basic and advanced features.