react-timeline-editor是基于react开发的,用于快速搭建时间线编辑能力的组件。 主要可用于构建动画编辑器、视频编辑器等。 ✨ 特性 🛠 支持拖拽、缩放模式,并提供方便的控制钩子。 🔗 提供网格吸附能力、辅助线吸附等交互能力。 🏷 自动识别动作长度,并无限滚动。
react-timeline-editor是基于react开发的,用于快速搭建时间线编辑能力的组件。 主要可用于构建动画编辑器、视频编辑器等。 ✨ 特性 🛠 支持拖拽、缩放模式,并提供方便的控制钩子。 🔗 提供网格吸附能力、辅助线吸附等交互能力。 🏷 自动识别动作长度,并无限滚动。
你可以通过定义每个TimelineEffect中的运行能力(音频播放、动画播放等等),来实现你自己的运行体系。 🛠 提供设置时间、设置运行速率等能力 ⚙️ 可独立使用 示例 你可以在以下两种场景中使用运行器: 编辑时运行 编辑器内置了一个运行器,提供了TimelineState用于更便捷的操控运行器。 我们不提供默认的运行器样式,你...
actions行的动作列表TimelineAction[](必选) rowHeight自定义行高(默认由props中的rowHeight决定)number-- selected行是否选中booleanfalse classNames行的扩展类名string[]-- TimelineAction 编辑器数据:动作数据结构 属性名描述类型默认值 id动作idstring(必选) ...
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:...
npm install timeline-editor-react Example Seesrc/example.js importReactfrom"react";importReactDOMfrom"react-dom";importTimelinefrom"./index";varlayers=[{id:"3d1df1b4-4d9d-45a4-bf14-cb580ee74675",name:"Left"},{id:"7d8c4210-0cfa-4a10-8b21-01e6601e00bf",name:"Top"},{id:"65079f30...
npm install react-video-editor-timeline or yarn add react-video-editor-timeline Usage Here is a basic example of how to use theVideoEditorTimelinecomponent in your React project. src/App.js importReactfrom'react';importVideoEditorTimelinefrom'react-video-editor-timeline';import{Menu,message}from'...
scaleSplitCount: 单个刻度细分单元数(>0整数) scaleWidth: 单个刻度的显示宽度(>0, 单位:px) startLeft: 刻度开始距离左侧的距离(>=0, 单位:px) scale: scaleSplitCount: scaleWidth: startLeft: 0 5 10 15 20 25 自定义刻度样式 0:00 0:10 ...