---
title: DiveAndGlide
description: 最初の注目点へ急接近し、その後は経路に沿って移動します。
noindex: true
---

**Preview**

<CameraPreview demo="DiveAndGlide" />

**Code**

```tsx
import { useMemo } from 'react'
import { useVideoConfig } from 'remotion'
import { SceneLayer, SceneStage, secondsToFrameRange } from 'framoo/core'
import { diveAndGlide } from 'framoo/camera/moves'

export const DiveAndGlidePreview = () => {
  const { fps } = useVideoConfig()
  const camera = useMemo(
    () => ({
      moves: [
        diveAndGlide({
          ...secondsToFrameRange(0, 4.5, fps),
          path: [
            { x: 0.68, y: 0.34 },
            { x: 0.7, y: 0.65 },
            { x: 0.34, y: 0.66 },
            { x: 0.3, y: 0.36 },
          ],
          zoom: 1.65,
        }),
      ],
    }),
    [fps],
  )

  return (
    <SceneStage camera={camera}>
      <SceneLayer followsCamera>
        {null /* 背景画像など、カメラと一緒に動かすレイヤーを置く */}
      </SceneLayer>
    </SceneStage>
  )
}
```

## API Reference

| Prop                   | Type                     | Default                             | Description                                        |
| ---------------------- | ------------------------ | ----------------------------------- | -------------------------------------------------- |
| `from`                 | `number`                 | —                                   | 開始フレーム。                                     |
| `durationInFrames`     | `number`                 | —                                   | 動きの長さをフレーム数で指定。                     |
| `path`                 | `readonly CameraPoint[]` | —                                   | 最初の要素をDive先、その後を移動経路として使う。   |
| `zoom`                 | `number`                 | —                                   | Dive時に到達するズーム倍率。                       |
| `diveDurationInFrames` | `number`                 | 省略時は長さの20%（最大24フレーム） | 最初の焦点へ急接近する長さ。全体の半分を超えない。 |
| `overshoot`            | `number`                 | `0.05`                              | Dive時に目標ズームを通り越す割合。                 |