react timeline editor

react-timeline-editor 是基于react开发的,用于快速搭建时间线编辑能力的组件。

主要可用于构建动画编辑器、视频编辑器等。

timeline

✨ 特性

  • 🛠 支持拖拽、缩放模式,并提供方便的控制钩子。
  • 🔗 提供网格吸附能力、辅助线吸附等交互能力。
  • 🏷 自动识别动作长度,并无限滚动。
  • 🎨 可快速便捷定制样式。
  • 📡 提供强解藕的运行器能力,可脱离编辑器独立运行。

快速上手

npm install @xzdarcy/react-timeline-editor
import React from 'react';
import { Timeline } from '@xzdarcy/react-timeline-editor';
export const TimelineEditor = () => {
return (
<Timeline
editorData={[]}
effects={{}}
/>
)
}

Props

属性名描述类型默认值
scrollTop编辑区域距离顶部滚动距离 (请使用ref.setScrollTop代替) @deprecatednumber--
onScroll编辑区域滚动回调 (用于控制与编辑行滚动同步)(params: OnScrollParams) => void--
autoScroll拖拽时是否启动自动滚动booleanfalse
style自定义timeline样式CSSProperties--
autoReRender是否自动重新渲染(当数据改变或光标时间改变时update tick)booleantrue
onChange数据改变回调,会在操作动作end改变数据后触发(返回false会阻止自动engine同步,用于减少性能开销)(editorData: TimelineRow[]) => boolean | void--
editorData时间轴编辑数据TimelineRow[](必选)
effects时间轴动作效果mapRecord<string, TimelineEffect>(必选)
scale单个刻度标记范畴(>0)number1
minScaleCount最少刻度个数(>=1)number20
maxScaleCount最大刻度个数(>=minScaleCount)numberInfinity
scaleSplitCount单个刻度细分单元数(>0整数)number10
scaleWidth单个刻度的显示宽度(>0, 单位:px)number160
startLeft刻度开始距离左侧的距离(>=0, 单位:px)number20
rowHeight每个编辑行默认高度(>0, 单位:px)number32
gridSnap是否启动网格移动吸附booleanfalse
dragLine启动拖拽辅助线吸附booleanfalse
hideCursor是否隐藏光标booleanfalse
disableDrag禁止全部动作区域拖动booleanfalse
enginetimeline运行器,不传则使用内置运行器ITimelineEngine--
getActionRender自定义action区域渲染(action: TimelineAction, row: TimelineRow) => ReactNode--
getScaleRender自定义scale渲染(scale: number) => ReactNode--
onActionMoveStart开始移动回调(params: { action: TimelineAction; row: TimelineRow; }) => void--
onActionMoving移动回调(return false可阻止移动)(params: { action: TimelineAction; row: TimelineRow; start: number; end: number; }) => boolean | void--
onActionMoveEnd移动结束回调(return false可阻止onChange触发)(params: { action: TimelineAction; row: TimelineRow; start: number; end: number; }) => void--
onActionResizeStart开始改变大小回调(params: { action: TimelineAction; row: TimelineRow; dir: "right" | "left"; }) => void--
onActionResizing开始大小回调(return false可阻止改变)(params: { action: TimelineAction; row: TimelineRow; start: number; end: number; dir: "right" | "left"; }) => boolean | void--
onActionResizeEnd改变大小结束回调(return false可阻止onChange触发)(params: { action: TimelineAction; row: TimelineRow; start: number; end: number; dir: "right" | "left"; }) => void--
onClickRow点击行回调(e: MouseEvent<HTMLElement, MouseEvent>, param: { row: TimelineRow; time: number; }) => void--
onClickAction点击动作回调(e: MouseEvent<HTMLElement, MouseEvent>, param: { action: TimelineAction; row: TimelineRow; time: number; }) => void--
onClickActionOnly点击动作回调(触发drag时不执行)(e: MouseEvent<HTMLElement, MouseEvent>, param: { action: TimelineAction; row: TimelineRow; time: number; }) => void--
onDoubleClickRow双击行回调(e: MouseEvent<HTMLElement, MouseEvent>, param: { row: TimelineRow; time: number; }) => void--
onDoubleClickAction双击动作回调(e: MouseEvent<HTMLElement, MouseEvent>, param: { action: TimelineAction; row: TimelineRow; time: number; }) => void--
onContextMenuRow右键行回调(e: MouseEvent<HTMLElement, MouseEvent>, param: { row: TimelineRow; time: number; }) => void--
onContextMenuAction右键动作回调(e: MouseEvent<HTMLElement, MouseEvent>, param: { action: TimelineAction; row: TimelineRow; time: number; }) => void--
getAssistDragLineActionIds获取要提示辅助线的action id列表,在move/resize start 时进行计算,默认获取除当前移动action的全部(params: { action: TimelineAction; editorData: TimelineRow[]; row: TimelineRow; }) => string[]--
onCursorDragStartcursor开始拖拽事件(time: number) => void--
onCursorDragEndcursor结束拖拽事件(time: number) => void--
onCursorDragcursor拖拽事件(time: number) => void--
onClickTimeArea点击时间区域事件, 返回false时阻止设置时间(time: number, e: MouseEvent<HTMLDivElement, MouseEvent>) => boolean--
ref--Ref<TimelineState>--
key--Key--