Skip to main content

时间线使用

🌐 Timeline Usage

组件集成​

🌐 Component Integration

在你的 React 应用中导入并使用时间线组件。

🌐 Import and use the timeline components in your React application.

为了获得最佳性能和正确功能，请按如下方式构建你的组件：

🌐 For optimal performance and proper functionality, structure your components like this:

import type {PlayerRef} from '@remotion/player';
import {Timeline, TimelineContainer} from './timeline/remotion-timeline/components/timeline';
import {TimelineProvider} from './timeline/remotion-timeline/context/provider';
import {TimelineSizeProvider} from './timeline/remotion-timeline/context/timeline-size-provider';
import {TimelineZoomProvider} from './timeline/remotion-timeline/context/timeline-zoom-provider';
import {PreviewContainer} from './layout';

export const App = () => {
  const playerRef = useRef<PlayerRef>(null);
  const timelineContainerRef = useRef<HTMLDivElement>(null);
  const timelineContainerSize = useElementSize(timelineContainerRef);
  const timelineContainerWidth = timelineContainerSize?.width;

  return (
    <TimelineProvider
      onChange={(newState) => {
        console.log('New timeline state:', newState);
      }}
      initialState={initialState}
    >
      <TimelineZoomProvider initialZoom={1}>
        <PreviewContainer>
          <VideoPreview loop playerRef={playerRef} />
          <ActionRow playerRef={playerRef} />
        </PreviewContainer>

        <TimelineContainer timelineContainerRef={timelineContainerRef}>
          {timelineContainerWidth ? (
            <TimelineSizeProvider containerWidth={timelineContainerWidth}>
              <Timeline playerRef={playerRef} />
            </TimelineSizeProvider>
          ) : null}
        </TimelineContainer>
      </TimelineZoomProvider>
    </TimelineProvider>
  );
};

此结构确保：

🌐 This structure ensures:

  • 通过 TimelineProvider 进行时间线状态管理
  • 带有 TimelineZoomProvider 的缩放功能
  • 使用 TimelineSizeProvider 进行适当的尺寸计算
  • 带有 TimelineContainer 的响应式时间线容器

默认状态结构​

🌐 Default state structure

该项目包括时间轴轨道和项目的预定义状态结构。你可以查看 TimelineProvider 组件 了解状态结构。

🌐 The project includes a predefined state structure for timeline tracks and items. You can check TimelineProvider component for the state structure.

视频预览​

🌐 Video Preview

该项目包括一个 CanvasComposition，这是一个 Remotion 组合，它在 Remotion 播放器中呈现时间线状态。

🌐 This project includes a CanvasComposition, a Remotion composition that renders the timeline state in the Remotion Player.

你可以：

🌐 You can:

  • 使用提供的作品原样进行快速原型制作
  • 根据你的需要调整它
  • 在保持时间轴功能的同时，用你自己的作品替换它

查看 video-preview.tsx 和 App.tsx 的实现示例。

🌐 Check video-preview.tsx and App.tsx for implementation examples.

状态持久性​

🌐 State Persistence

TimelineProvider 包含一个 onChange 回调，每当时间线状态发生变化（添加/移除轨道、移动项目等）时触发。使用它将编辑器状态保存到你的后端：

🌐 The TimelineProvider includes an onChange callback that fires whenever the timeline state changes (adding/removing tracks, moving items, etc.). Use this to save the editor state to your backend:

function VideoEditor() {
  const saveToServer = async (state: TimelineState) => {
    try {
      await fetch('/api/save-timeline', {
        method: 'POST',
        body: JSON.stringify(state),
      });
    } catch (error) {
      console.error('Failed to save timeline state:', error);
    }
  };

  return (
    <TimelineProvider onChange={saveToServer} initialState={initialState}>
      <div className="video-editor">
        <VideoPreview playerRef={playerRef} />
        <ActionRow playerRef={playerRef} />
        <TimelineRoot playerRef={playerRef} />
      </div>
    </TimelineProvider>
  );
}

示例项目结构​

🌐 Example Project Structure

在 App.tsx 中，你可以看到时间线组件的完整实现。

🌐 In App.tsx, you can see the complete implementation of the timeline component.

示例项目演示了：

🌐 The example project demonstrates:

  • 导入时间轴组件
  • 使用 ActionRow 组件进行时间线缩放和添加剪辑
  • 使用 TimelineRoot 组件渲染时间线
Last updated on