2022/09/13
こんにちは。影織です。
今回は、image-motionβ版の完成回です！早速触ってみよう
こちらがimg-motionβ版です！早速見ていきましょう。 キャラクターをブラウザで動かす専用のAdobe Premere風ツールです。 img-motion 素材をパーツ分けして、データを入れたものがこちらです（某料理番組風に）。 リンク先右上の"Download ZIP"から落としてきて、img-motionで開いてみてくださいね。 ※こちらのデータは、個人の楽しむ範囲でご自由にお使いいただけますが、著作権は放棄していません。 モーションだけでなく、画像もbase64で入っているテキストデータなので、とても軽量です。使い方
ホーム
まず、左上の家のマークがTopページに遷移するボタンです。アップロード
その右隣、画像マークがアップロードのページです。 プラスボタンから、画像を追加していきます。 追加した画像を、階層構造で追加していきます。例えば、胴体に腕がくっついている場合、 胴体の下に腕の階層を入れ子にしていくということです。 一緒に動く部分はどこだろう？と考えながら登録すると、 わかりやすいかなと思います。
また、各パーツにフォーカスを当てることで、画像の回転の中心点を決めることができます。 プラスボタンをドラッグします。
アニメーション
人のマークをクリックすると、アニメーションのページが開きます。 タイムラインが出てくるので、 ここで各パーツにアニメーションのキーフレームを加えていきます。 durationは、1ループの秒数を指定できます。 countはinfiniteにしておくと、無限ループで再生してくれるようになります。 ※ラジオ内で触れられている、timingとdirectionは、現在のバージョンでは削除されています。ラジオの段階では、このページで回転と位置と変形の 設定ができるようになっていると説明していますが、 現在のバージョンでは、音なども設定できるようになっています。 これはまた別の回でお話しますね。
まとめ
ということで、めちゃくちゃすごすぎないですか...？ これさえあれば、ブラウザで動かすアニメーションを、かなり柔軟に作ることができます。 とはいえ、最初ツールに慣れるまでは少しハードルがあるかもしれません。 ですので、後日パーツ分けなどを含めた使い方を細かく説明した動画を作成する予定です！ ゆるりとお待ちくださいね。
