mirror of
https://github.com/affaan-m/everything-claude-code.git
synced 2026-06-14 12:11:27 +08:00
Claude
174e31b3fc
Translated 85 skill sub-reference files to achieve full parity with the English source: - skills/angular-developer/references/ — 35 files (all references) - skills/remotion-video-creation/rules/ — 28 files (all rules) - skills/tinystruct-patterns/references/ — 5 files - skills/openclaw-persona-forge/references/ — 6 files - skills/skill-comply/prompts/ — 3 files - skills/lead-intelligence/agents/ — 4 files - skills/brand-voice/references/ — 1 file - skills/frontend-slides/ — 2 files - hooks/memory-persistence/README.md — 1 file English source parity: 0 missing files (excluding rules/zh/, internal docs, and experimental examples absent from zh-CN)
107 lines
2.7 KiB
Markdown
107 lines
2.7 KiB
Markdown
---
|
|
name: sequencing
|
|
description: Remotionのシーケンスパターン - アイテムの遅延、トリム、長さの制限
|
|
metadata:
|
|
tags: sequence, series, timing, delay, trim
|
|
---
|
|
|
|
`<Sequence>` を使用して、タイムライン上で要素が表示されるタイミングを遅らせます。
|
|
|
|
```tsx
|
|
import { Sequence } from "remotion";
|
|
|
|
const {fps} = useVideoConfig();
|
|
|
|
<Sequence from={1 * fps} durationInFrames={2 * fps} premountFor={1 * fps}>
|
|
<Title />
|
|
</Sequence>
|
|
<Sequence from={2 * fps} durationInFrames={2 * fps} premountFor={1 * fps}>
|
|
<Subtitle />
|
|
</Sequence>
|
|
```
|
|
|
|
デフォルトでは、コンポーネントをabsolute fillの要素でラップします。
|
|
アイテムをラップしない場合は `layout` プロパティを使用します：
|
|
|
|
```tsx
|
|
<Sequence layout="none">
|
|
<Title />
|
|
</Sequence>
|
|
```
|
|
|
|
## プリマウント
|
|
|
|
これはコンポーネントが実際に再生される前にタイムラインに読み込みます。
|
|
`<Sequence>` には必ずプリマウントを設定してください！
|
|
|
|
```tsx
|
|
<Sequence premountFor={1 * fps}>
|
|
<Title />
|
|
</Sequence>
|
|
```
|
|
|
|
## Series
|
|
|
|
要素が重複なく順番に再生される場合は `<Series>` を使用します。
|
|
|
|
```tsx
|
|
import {Series} from 'remotion';
|
|
|
|
<Series>
|
|
<Series.Sequence durationInFrames={45}>
|
|
<Intro />
|
|
</Series.Sequence>
|
|
<Series.Sequence durationInFrames={60}>
|
|
<MainContent />
|
|
</Series.Sequence>
|
|
<Series.Sequence durationInFrames={30}>
|
|
<Outro />
|
|
</Series.Sequence>
|
|
</Series>;
|
|
```
|
|
|
|
`<Sequence>` と同様に、`layout` プロパティが `none` に設定されていない限り、`<Series.Sequence>` 使用時にアイテムはデフォルトでabsolute fill要素でラップされます。
|
|
|
|
### オーバーラップありのSeries
|
|
|
|
シーケンスを重ねるには負のオフセットを使用します：
|
|
|
|
```tsx
|
|
<Series>
|
|
<Series.Sequence durationInFrames={60}>
|
|
<SceneA />
|
|
</Series.Sequence>
|
|
<Series.Sequence offset={-15} durationInFrames={60}>
|
|
{/* SceneAが終わる15フレーム前に開始 */}
|
|
<SceneB />
|
|
</Series.Sequence>
|
|
</Series>
|
|
```
|
|
|
|
## Sequence内のフレーム参照
|
|
|
|
Sequence内では、`useCurrentFrame()` はローカルフレーム（0から開始）を返します：
|
|
|
|
```tsx
|
|
<Sequence from={60} durationInFrames={30}>
|
|
<MyComponent />
|
|
{/* MyComponent内では、useCurrentFrame()は60-89ではなく0-29を返す */}
|
|
</Sequence>
|
|
```
|
|
|
|
## ネストされたSequence
|
|
|
|
複雑なタイミングのためにSequenceをネストできます：
|
|
|
|
```tsx
|
|
<Sequence from={0} durationInFrames={120}>
|
|
<Background />
|
|
<Sequence from={15} durationInFrames={90} layout="none">
|
|
<Title />
|
|
</Sequence>
|
|
<Sequence from={45} durationInFrames={60} layout="none">
|
|
<Subtitle />
|
|
</Sequence>
|
|
</Sequence>
|
|
```
|