0202-animation
図形をアニメーションさせることを目標に、ブラウザで動作する、動画編集?アプリケーションを作ります。 技術スタック(予定)
フロントエンド
状態管理
UIライブラリ
テスト
バックエンド(ほとんど書きません)
Next.js
アプリケーションそのものはオフライン(PWA)で動作することを目指します。 アプリケーションの配信や、プロジェクトの保存がオンラインというだけです
全体の構成は現在、以下のようになっています。
https://scrapbox.io/files/64100c8e8eb21e001ceced16.svg
画像を別タブで開いて大きく表示できます
このアプリケーションが提供するUIは、以下の機能を持ちます。
現在フレームにおけるエンティティの階層構造を表示する
現在フレームにおけるエンティティのプロパティ補間値を表示する
特定フレームにおけるプロパティの補間値は、後述するEntityInstance.interpolatingMethodで指定されたスクリプトが計算します。
これは、WebAssembly ファイルであり、プラグインがロードされたタイミングでブラウザに読み込まれます。
エンティティを追加する
https://scrapbox.io/files/6410110c13f346001cf34508.svg
追加できるエンティティは、図の NamespaceObject から検索します。
NamespaceObject.entityTypesが、そのプラグインから提供されているEntityTypeObjectのリストです。
Editor は、エンティティ名とプロパティ値のマップオブジェクトを、EntityInstanceとしてEntityInstanceListに追加します。
エンティティにプロパティを追加する
エンティティに追加できるプロパティは、図のEntityTypeObjectから検索します。
EntityTypeObject.acceptablePropertyTypesが、エンティティに追加できる PropertyTypeObject のリストです。
エンティティには様々なプロパティがあります。
音声ファイルを設定するプロパティ
実際には、フレームの状態を計算するタイミングで、このプロパティの補間値がEntityInstance.soundingMethodで指定されたスクリプトに渡されます。
位置を設定するプロパティ
フレームの状態を計算するタイミングで、プロパティの補間値が EntityInstance.renderingMethodで指定されたスクリプトに渡されます。
エンティティに設定されたキーフレームのリストを表示する
キーフレームは、フレーム数と、そのフレームにおけるプロパティ値を持ち、プロパティごとに設定できます。
エンティティに設定された
※
EntityInstance.xxxMethodは、すべてスクリプトの実体ではなく、スクリプトが存在するネームスペース名とスクリプト名のオブジェクトです。