react-timeline-editor
是基于react开发的,用于快速搭建时间线编辑能力的组件。
主要可用于构建动画编辑器、视频编辑器等。
npm install @xzdarcy/react-timeline-editor
import React from 'react';import { Timeline } from '@xzdarcy/react-timeline-editor';export const TimelineEditor = () => {return (<TimelineeditorData={[]}effects={{}}/>)}
属性名 | 描述 | 类型 | 默认值 |
---|---|---|---|
scrollTop | 编辑区域距离顶部滚动距离 (请使用ref.setScrollTop代替) @deprecated | number | -- |
onScroll | 编辑区域滚动回调 (用于控制与编辑行滚动同步) | (params: OnScrollParams) => void | -- |
autoScroll | 拖拽时是否启动自动滚动 | boolean | false |
style | 自定义timeline样式 | CSSProperties | -- |
autoReRender | 是否自动重新渲染(当数据改变或光标时间改变时update tick) | boolean | true |
onChange | 数据改变回调,会在操作动作end改变数据后触发(返回false会阻止自动engine同步,用于减少性能开销) | (editorData: TimelineRow[]) => boolean | void | -- |
editorData | 时间轴编辑数据 | TimelineRow[] | (必选) |
effects | 时间轴动作效果map | Record<string, TimelineEffect> | (必选) |
scale | 单个刻度标记范畴(>0) | number | 1 |
minScaleCount | 最少刻度个数(>=1) | number | 20 |
maxScaleCount | 最大刻度个数(>=minScaleCount) | number | Infinity |
scaleSplitCount | 单个刻度细分单元数(>0整数) | number | 10 |
scaleWidth | 单个刻度的显示宽度(>0, 单位:px) | number | 160 |
startLeft | 刻度开始距离左侧的距离(>=0, 单位:px) | number | 20 |
rowHeight | 每个编辑行默认高度(>0, 单位:px) | number | 32 |
gridSnap | 是否启动网格移动吸附 | boolean | false |
dragLine | 启动拖拽辅助线吸附 | boolean | false |
hideCursor | 是否隐藏光标 | boolean | false |
disableDrag | 禁止全部动作区域拖动 | boolean | false |
engine | timeline运行器,不传则使用内置运行器 | 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[] | -- |
onCursorDragStart | cursor开始拖拽事件 | (time: number) => void | -- |
onCursorDragEnd | cursor结束拖拽事件 | (time: number) => void | -- |
onCursorDrag | cursor拖拽事件 | (time: number) => void | -- |
onClickTimeArea | 点击时间区域事件, 返回false时阻止设置时间 | (time: number, e: MouseEvent<HTMLDivElement, MouseEvent>) => boolean | -- |
ref | -- | Ref<TimelineState> | -- |
key | -- | Key | -- |