1,496
回編集
差分
ナビゲーションに移動
検索に移動
本ツールは、ブラウザ上で立ち絵のアニメーションを作成し、APNGとしてエクスポートできるシングルページアプリケーション（SPA）です。本ツール（Breath Studio／ブレススタジオ）は、ブラウザ上で立ち絵のアニメーションを作成し、APNGとしてエクスポートできるシングルページアプリケーション（SPA）です。
===A. レイヤー固定を利用した連動アニメーション===
*指定した座標を基準に、他のレイヤーに追従
**例：「上半身が縮小すると顔も連動して上下移動する」
#キャンバス上での操作（移動・拡大・回転）
編集の要約なし
===概要===
ユーザーは画像をキャンバスにドラッグ＆ドロップしてレイヤーとして追加し、階層管理やアニメーション設定を行えます。
*レイヤー管理UI（キャンバスとは別に表示）
**追加した画像をレイヤーとして登録
**追加した最新の画像はUI上部に追加され、画像は上部にあるものほど手前に表示される
**レイヤーの 名前は画像ファイル名（拡張子は省略）、名前は変更可能
**レイヤーの 階層管理（上・下移動）
**レイヤーの 削除
**レイヤーごとに アニメーション設定
**レイヤーの 親レイヤー指定
*キャンバス上での操作
**クリック＆ドラッグで画像の移動（レイヤー固定時の挙動あり）**拡大・縮小・回転（マウスホイール・スライダー）クリック＆ドラッグで画像の移動
==2. レイヤー固定機能（親子関係）レイヤー親レイヤー指定==*固定を設定すると、親レイヤーに対して子レイヤーが追従親レイヤーを設定すると、親レイヤーのアニメーション時、変形に合わせて子レイヤーの座標が追従*親レイヤーを移動すると、子レイヤーも同じ動きをする親レイヤー指定はレイヤー管理UIでセレクトボックスから設定*子レイヤー単体では移動できない*自身を親レイヤーに設定することは出来ない*固定の解除はレイヤー管理UIで行う*例：呼吸アニメーション時、親レイヤーの拡大縮小（5px）に合わせて子レイヤーの座標が上下移動
==3. アニメーション機能==
各レイヤーに以下のアニメーションを設定可能：
===A. 揺れアニメーション===*レイヤーの下半分、もしくは上半分を数ピクセル分左右に歪ませるループアニメーション**例：レイヤーの下半分を左右に揺らし、髪の揺らめきを表現する ===B. 振動・揺れアニメーション呼吸アニメーション===*指定の高さ以上 or 以下の範囲で、指定 px ぶん 横 or 縦に揺れるレイヤーの上半分、もしくは下半分が数ピクセル分左右に拡大・縮小するループアニメーション**例：「呼吸時に体がわずかに上下する」例：レイヤー（身体）の上半分を拡大縮小し、呼吸を表現する
===C. スプライトアニメーション（パラパラ漫画）===
=実装の流れ=
#画像管理の実装（レイヤー追加・削除・階層管理）
#レイヤー固定機能の実装（親子関係の動作制御）
#アニメーション機能の実装（固定・振動・スプライトアニメ）
