motion-canvas - 複雑なアイデアをプログラムで視覚化する
(Visualize Complex Ideas Programmatically)
Created at: 2022-08-04 00:30:14
Language: TypeScript
License: MIT
モーションキャンバス
モーションキャンバスは2つのことです:
- ジェネレーターを使用してアニメーションをプログラムする TypeScript ライブラリ。
- 上記のアニメーションのリアルタイムプレビューを提供するエディター。
これは、有益なベクターアニメーションを作成するために設計された特殊なツールです。 それらをナレーションと同期させます。
プレビューを提供する以外に、エディターでは特定の側面を編集できます そうでなければ退屈になる可能性のあるアニメーションの。
モーションキャンバスの使用
モーションキャンバスの使い方を学ぶためのスタートガイドをご覧ください。
モーションキャンバスをローカルで開発する
プロジェクトは、次のパッケージを含む 1 つのモノリポジトリとして維持されます。
| 名前 | 形容 |
|---|---|
core |
アニメーションの実行とレンダリングに関連するすべてのロジック。 |
2d |
2D モーショングラフィックスのデフォルトレンダラー |
create |
新しいプロジェクトをブートストラップするためのパッケージ。 |
docs |
当社のドキュメント Web サイト。 |
e2e |
エンドツーエンドのテスト。 |
examples |
ドキュメントで使用されるアニメーションの例。 |
player |
ブラウザーでアニメーションを表示するためのカスタム要素。 |
template |
開発者の便宜のために含まれているテンプレートプロジェクト。 |
ui |
編集に使用するユーザー インターフェイス。 |
vite-plugin |
アニメーションの開発とバンドルに使用されるVite用のプラグイン。 |
リポジトリを複製した後、プロジェクトのルートで実行してインストールします 必要なすべての依存関係。次に、実行してすべての パッケージ。
npm install
npx lerna run build
コアと2Dの開発
コアを開発するときは、と の両方を起動します。
core:watch
template:serve
これにより、コアパッケージに加えた変更が自動的に取得されます プロジェクトをリビルドし、ページを更新します。
template
同様に、2D パッケージを開発する場合は、 と を起動します。
2d:watch
template:serve
UI の開発
UI を開発する場合は、まず以下を実行してテンプレート プロジェクトをビルドします。次に、を起動します。
template:build
ui:serve
育成中の選手
UIと同様に、プレーヤーを開発するには、最初にテンプレートを作成します。 次に、を起動します。
template:build
player:serve
貢献
貢献ガイドを読んで、その方法を学びましょう モーションキャンバスをより良くするのに役立ちます。
