> ## Documentation Index
> Fetch the complete documentation index at: /docs/llms.txt
> Use this file to discover all available pages before exploring further.

# 初めてのアニメーション

> アカウントなしで形状を描画し、動きを追加し、最初のアニメーションをエクスポートします。

## アニメーションを作成する

[Lottie Libre](https://libre.velrabe.space/studio) を開き、**New animation** を選択します。

何も選択していない状態で、右側の \*\*Animation \*\* パネルで \*\*Seconds \*\* を **2** に設定します。ツールのショートカットを使用する前に、フィールドの編集を終了し、キャンバスをクリックしてください。

## 形を描く

長方形の場合は `R` を押し、楕円の場合は `O` を押して、キャンバス上でドラッグします。左側付近の形状を維持し、右側に移動する余地を残します。

`V` を押して選択します。

## 動きを記録する

再生ヘッドは編集中の時間をマークします。キーフレームは、その時点のプロパティの値を記録します。

1. タイムラインの再生ヘッドを **0 秒** に移動します。
2. 形状を選択した状態で、右側の \*\*Properties \*\* パネルの **Position** の横にあるひし形をクリックします。これにより開始位置が記録されます。
3. 再生ヘッドを **1 秒** に移動します。
4. 形状をキャンバス内に保ったまま、右にドラッグします。位置はすでにアニメーション化されているため、Libre は 2 番目のキーフレームを自動的に記録します。

![キーフレームを追加すると、位置ダイヤモンドが中空から塗りつぶしに変わります。](https://mintcdn.com/velrabe-studio/-a_hqUidmW-_gr6J/images/keyframes-guide.png?fit=max\&auto=format\&n=-a_hqUidmW-_gr6J\&q=85\&s=612cea322f673f1a18bf3151c505a585)

塗りつぶされたひし形は、現在の時刻のキーフレームを確認します。

## 結果をプレビューする

`Space` を押して再生または一時停止します。シェイプは最初の 1 秒間に 2 番目の位置に移動し、アニメーションが終了するまでそこに留まります。

再生ヘッドを前後にドラッグして動きを調べます。シェイプが全体を通して静止したままの場合は、Position に 2 つの異なる時点で異なる値のキーがあることを確認します。

## 編集可能なコピーを保持する

ゲストの下書きは、このデバイスのこのブラウザに保存されます。ローカル保存の確認を待ちます。ブラウザの外部でバックアップを保存するには、アニメーション名の横にある \*\*Document actions \*\* を開き、**Download source** を選択します。ファイルは `.libre.json` で終わります。

別のデバイスからのアクセスの場合は、[下書きをアカウントに保存します](/docs/docs/ja/get-started/account-and-signing-in#save-guest-work-to-your-account)。保存エラーについては、[自動保存と復元](/docs/docs/ja/save/autosave-and-restore) を参照してください。

## Lottie アニメーションをダウンロードする

\*\*Export \*\* を選択し、Lottie プレビューを再生して、エディターのリファレンスと比較します。 **Download Lottie JSON** を選択して、再生用に `.json` アニメーションを保存します。

将来の編集のために `.libre.json` ソースを保存しておいてください。プレーヤーで Lottie `.json` を使用します。

## アニメーションを続行します

* [タイムライン](/docs/docs/ja/animation/timeline): ペースを変えるか、形状を開始位置に戻します。
* [キーフレーム](/docs/docs/ja/animation/keyframes): フェードを追加するか、既存のキーを編集します。
* [アニメーションのエクスポート](/docs/docs/ja/export/export-lottie): dotLottie、ビデオ、または Telegram TGS を使用します。
* [アニメーションの共有](/docs/docs/ja/export/share-an-animation): 保存されたバージョンを検査してエクスポートできるようにします。


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.