モーショングラフィックス: 無料モーショングラフィックス ブラウザ対応 | Morph

モーショングラフィックス はブラウザ上のモーショングラフィックスです:コンポジション内でレイヤーを重ね、各プロパティ(位置、スケール、回転、不透明度)をタイムライン上のキーフレームでアニメーション化し、ベジェ曲線でイージングを設定し、コンポジションをネストして使用します。再生は Morph の独自モーションエンジンでリアルタイムに動作します。プロジェクトはお使いのデバイスから読み書きされ、何もアップロードされません。

四つのパネル

キーフレーム

プロパティの隣にあるストップウォッチをクリックしてアニメーションを有効にします。再生ヘッドを移動し、値を変更するとキーフレームが記録されます。デフォルトのイージングはキュービックベジェのイージングインアウトで、各キーフレームは線形、イージングイン、イージングアウト、バウンス、バック、カスタムハンドルに設定できます。

コンポジション

必要に応じて無制限に作成できます。各コンポジションには独自の幅、高さ、フレームレート、持続時間があります。他のコンポジション内にプリコンポジションとしてネストすると、使用されている場所すべてで更新されます。

.aepx互換性

モーショングラフィックス は .aepx を読み込みます。これはモーショングラフィックスアプリが保存できる XML プロジェクト形式です(アプリで「ファイル→コピーを保存」→XML)。レイヤー、変換、キーフレームがそのまま持ち込まれるため、既存プロジェクトをブラウザで継続できます。

使い方

  1. モーショングラフィックスを開く — morph.cool/motion-graphics へアクセス。エディタがブラウザで読み込まれます。アカウント登録やインストールは不要です。
  2. コンポジションを作成 — 幅、高さ、フレームレート、持続時間を設定。プロジェクトパネルに画像、動画、テキストレイヤーをドロップします。ファイルはお使いのデバイスから読み込まれます。
  3. プロパティをアニメーション化 — レイヤーを選択し、位置、スケール、回転、不透明度の隣にあるストップウォッチをクリック。再生ヘッドを移動し、値を変更します。キーフレームが自動的に記録されます。
  4. モーションを調整 — 各キーフレームのイージングを設定 — デフォルトはイージングインアウト、または線形、バウンス、バック、カスタムベジェハンドル。繰り返し要素をプリコンポジションとしてネストします。
  5. プレビューと書き出し — スペースキーで再生します。コンポジションをビデオファイルとして書き出し、お使いのマシンでレンダリングします。

よくある質問

モーショングラフィックスは無料ですか?

はい。アカウントなしで開き、アニメーションを作成できます。Morph Pro はすべてのプロプログラムの無制限版を追加します。

.aepxプロジェクトを開けますか?

モーショングラフィックス は .aepx(モーショングラフィックスアプリが保存できる XML プロジェクト形式)を読み込みます。レイヤー、変換、キーフレームがインポートされます。

アセットはアップロードされますか?

いいえ。アセット、プロジェクト、レンダリングすべてがブラウザ上でお使いのデバイスに残ります。

キーボードショートカットは?

スペースキーで再生/一時停止、Home/Endキーで先頭/末尾へジャンプ、V が選択ツール、H がハンドツール、Delete で選択レイヤーを削除します。

コンポジションをネストできますか?

はい。他のコンポジション内に配置したコンポジションはプリコンポジションとなり、使用されている場所すべてで更新されます。

関連ツール

モーショングラフィックス: 無料モーショングラフィックス ブラウザ対応 | Morphを開く →