react timeline editor

React時間軸編輯器

React Timeline編輯器是用於快速構建時間軸動畫編輯器的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 }
      / >
  ) ;
} ; 

文件

查看文檔以演示一些基本和高級功能。