【Ornamenter】アイテムのサイズと軌道パスの編集 – その2

Ornamenterでアイテムが移動するアニメーションを作成する場合、軌道パスで移動経路を設定します。今回は、前回に引き続きストーリーボード編集画面におけるアイテムの「サイズと軌道パス」の編集方法について解説します。

  1. 移動変化量
  2. 変化の方式
    1. 直線的に増加
    2. 直線的に増減
    3. 穏やかに増加
    4. 穏やかに増減
    5. 段階的に増加
    6. 段階的に増減
    7. 中盤ゆっくり
    8. 後半ゆっくり
    9. 前半ゆっくり
    10. バウンド
  3. 振幅変化量と周期変化量

移動変化量

起動パスでアイテムの移動する経路を設定しますが、移動する速さは移動変化量で設定します。変化の方法の初期値は、一定速度で位置を移動する設定(直線的に増加)になっています。

移動変化量の設定画面

移動変化量の設定画面のグラフは、横軸が時間、縦軸が位置を表します。今回の例だとストーリーボードの再生時間は、4秒(0秒から4秒)に設定しているので横軸は、0秒から4秒となります。縦軸は、0%から100%で位置を表します。0%は始点の位置になります。100%が終点の位置になります。

変化の方式

移動変化量は、「変化の方式」で具体的にどんな動作をするかを指定します。速度変化量の設定内容で実際はどの様な動きになるかはプレビューで確認出来ます。
変化の方式」は、「直線的に増加」、「直線的に増減」、「緩やかに増加」、「緩やかに増減」、「段階的に増加」、「段階的に増減」、「中盤ゆっくり」、「後半ゆっくり」、「前半ゆっくり」、「バウンド」の10種類あります。

直線的に増加

直線的に増加」では、一定の速度で位置を変化させます。

直線的に増加

直線的に増減

直線的に増減」は、中間地点で100%の位置(終点)に達し、その後0%の位置(始点)に戻る様に移動します。移動速度は一定です。

直線的に増減

穏やかに増加

穏やかに増加」は、開始直後と終了直前において移動速度はゆっくりで中盤は一定速度で移動します。

穏やかに増加

穏やかに増減

穏やかに増減」は、開始直後と中盤において移動速度はゆっくりです。中盤で一度100%(終点)の位置に達し、その後0%(始点)の位置に戻ります。

穏やかに増減

段階的に増加

段階的に増加」は、段数に合わせて位置を移動させます。初期値は1段です。一段の場合は、再生時間を2分割し、前半は0%(始点)の位置、後半は100%(終点)になります。2段の場合は、再生時間を3分割し、0%、50%、100%の位置に移動します。段数は20段まで指定出来ます。

段階的に増加

段階的に増減

段階的に増減」も、段数に合わせて位置を移動させます。初期値は1段です。一段の場合は、再生時間を4分割し、0%(始点)、100%(終点)、100%(終点)、0%(始点)の位置に移動します。2段の場合は、再生時間を6分割し、0%、50%、100%、100%、50%、0%の位置に移動します。段数は20段まで指定出来ます。

段階的に増減

中盤ゆっくり

中盤ゆっくり」は、開始直後と終了直前での移動速度が速くなります。中盤が少しゆっくり移動します。

中盤ゆっくり

後半ゆっくり

後半ゆっくり」は、前半で一気に80%ぐらいまで移動し、その後ゆっくりと終点(100%)まで移動します。

後半ゆっくり

前半ゆっくり

前半ゆっくり」は、前半でゆっくり80%ぐらいまで移動し、その後一気に終点(100%)まで移動します。

後半ゆっくり

バウンド

バウンド」は、ボールが床に落ちて3回跳ねる様な動きで移動します。

後半ゆっくり

振幅変化量と周期変化量

移動経路の揺れ幅とその周期を振幅変化量周期変化量で設定します。
振幅変化量と周期変化量は対になっていて相互作用します。振幅変化量の値が0px(変化の方式が「無し」)の場合、周期変化量を設定しても意味がありません。逆に、振幅変化量を設定していても周期変化量が0回では意味がありません。
振幅変化量で「最大の揺れ幅」を設定し、周期変化量で「どのくらいの周期」で揺らすかを設定します。
振幅変化量と周期変化量を設定していない場合、移動経路は軌道パス(青線)に一致します。振幅変化量と周期変化量を設定すると青線に重なる様に赤線が表示されます。実際にアイテムが移動する経路は青線ではなく赤線になります。

振幅100px、周期1回の移動経路
可変的な設定による移動経路


ゆらゆらと揺れながら移動する様なアニメーション幾つも作成するなら、軌道パスは直線で描いて、微妙な穏やかな揺れ具合を振幅変化量と周期変化量を使って表現する方が効率的かもしれません。
あくまでも移動経路の基準となるのは軌道パスです。アイテムの設定で「z軸回転変化量」の「移動方向に一致」をONにした場合、アイテムの回転の基準は軌道パス(青線)となります。

下記のオーブは、軌道パスを曲線で描き、加えて緩やかに振幅する様に設定した例です(猫の軌道は振幅させていません)。

オーブのアニメーションWebP

今回は以上です。Ornamenterは、アニメーションの動きの変化をグラフで可視化して設定するアプリです。ちょっとクセが強いですね。

詳しくはサイトで

close-alt close collapse comment ellipsis expand gallery heart lock menu next pinned previous reply search share star