この記事ではアニメーションをより簡単に、直感的に作ることができるMorph（モーフ）について解説していきます。
今回作るのは次の動画のようなアニメーションです。
Morph
一つ前の記事でアニメーションを作るときに面倒だと感じた方も多いと思います。
animateコマンドのなかでMorphを使用すると
x=<位置 x>
y=<位置 y>
w=<バウンディングボックスの幅(width)>
h=<バウンディングボックスの高さ(height)>
r=<回転>
cl=<クロップ左(crop left)>
cr=<クロップ右(crop right)>
ct=<クロップ上(crop top)>
cb=<クロップ下(crop bottom)>
このパラメーター群が
morph=<morphオブジェクト>
morphScene=<morphオブジェクトを持つシーン>
に代わります。
morphを使用すると任意のソースアイテム（オブジェクト）の位置、サイズ、傾き、クロップをMorphオブジェクトのものに写すことが事ができます。
Morphオブジェクトが変化させたいオブジェクトの導き手になるというイメージですね。
今回作ったアニメーションのために新しくMorphObjectsシーンを作成し、その中に色ソースでmorphオブジェクトをつくりました。
（※特別にMorphオブジェクトを作る必要はなく、どのオブジェクトでもmorphオブジェクトして利用することができます。）
今回作ったMorphオブジェクトは15個で、以下のような構造になっています。
数字はオブジェクト名の末尾２ケタです。そして5枚の帯状の画像を用意しました。
※animateを使うときはいつでもバウンディングボックスの種類を意識してください。
Loop（ループ）
loopコマンドを使用することで、ボタンアクションを指定回数繰り返すことができます。
ループ
loop
start=<開始の数値>
end=<終わりの数字>
step=<カウンターの増え方>
というパラメーターをとります。
ループを使用すると特別なカウント変数として( $@ )をコマンドの中で使うことができます。
実際のコマンド
まず、用意した帯画像を全てシーンに加えました。
帯画像の名前をobi1～obi5にしたのでMorphオブジェクトの末尾番号1～5とLoopを利用して合わせて動かします。
まず、Loopコマンドを追加します。今回は1から5まで1,2,3…とコマンドを繰り返していきます。
ループ
loop
start=1
end=5
step=1
次にobi1～5をMorphを利用して14401～14405（OBSの画面に映っている位置）に移動させていきます。変数($@)を使用することでコマンド1回目はitem=obi1, morph=14401, delay=[500]になっています。ディレイに回数を掛けることで帯が1つずつ、0.5秒毎に移動するようになっています。
帯を中央に
animate
scene=Pics
item=obi$@
queue=1
morphScene=MorphObjects
morph=1440$@
steps=40
interval=20
easing=EaseOut
delay=[$@ * 500]
そして帯がMorphオブジェクト14421～14425に移動するコマンドを追加します。このコマンドではディレイが一貫して2秒になっていますが、queue=1を使用しているのでそれぞれの帯が中央に止まってから2秒後に右に抜けるようになっています。
帯を右に
animate
scene=Pics
item=obi$@
queue=1
morphScene=MorphObjects
morph=1442$@
steps=40
interval=20
easing=EaseOut
delay=2000
これをトグルコマンドにて右から左に抜けるコマンドを追加したら動画のアニメーションが完成します。
まとめ
今回はMorphとLoopを紹介しました。どちらも利用することでコマンドを書く量が少なくなるので是非利用したいですね。
特にMorphは最初に少し手間がかかるかもしれないですが、MorphObjectsシーンにテンプレート的に色ソースをたくさん作ることでコマンドを作りやすくなります。
もし、Loopコマンドを使用せずに同じコマンドを作るとどうなるかを張っておきます。
この量が必要になります。Loopが使えそうなコマンドでは使わない手はないですね！
この記事で使用したコマンド
記事で使用したコマンドはコマンドアーカイブに追加していきます。コピペできると思うので利用してくださいね。
