UP Deck | MorphとLoop

この記事ではアニメーションをより簡単に、直感的に作ることができる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個で、以下のような構造になっています。
数字はオブジェクト名の末尾2ケタです。そして5枚の帯状の画像を用意しました。
※animateを使うときはいつでもバウンディングボックスの種類を意識してください。

Loop(ループ)

loopコマンドを使用することで、ボタンアクションを指定回数繰り返すことができます。

ループ
loop
start=<開始の数値>
end=<終わりの数字>
step=<カウンターの増え方>
というパラメーターをとります。
ループを使用すると特別なカウント変数として( $@ )をコマンドの中で使うことができます。

実際のコマンド

まず、用意した帯画像を全てシーンに加えました。

帯画像の名前をobi1~obi5にしたのでMorphオブジェクトの末尾番号1~5Loopを利用して合わせて動かします。

まず、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不使用)
帯を中央に
animate
scene=Pics
item=obi1
queue=1
morphScene=MorphObjects
morph=14401
steps=40
interval=20
easing=EaseOut
delay=500

帯を中央に
animate
scene=Pics
item=obi2
queue=1
morphScene=MorphObjects
morph=14402
steps=40
interval=20
easing=EaseOut
delay=1000

帯を中央に
animate
scene=Pics
item=obi3
queue=1
morphScene=MorphObjects
morph=14403
steps=40
interval=20
easing=EaseOut
delay=1500

帯を中央に
animate
scene=Pics
item=obi4
queue=1
morphScene=MorphObjects
morph=14404
steps=40
interval=20
easing=EaseOut
delay=2000

帯を中央に
animate
scene=Pics
item=obi5
queue=1
morphScene=MorphObjects
morph=14405
steps=40
interval=20
easing=EaseOut
delay=2500

帯を右に
animate
scene=Pics
item=obi1
queue=1
morphScene=MorphObjects
morph=14421
steps=40
interval=20
easing=EaseOut
delay=2000

帯を右に
animate
scene=Pics
item=obi2
queue=1
morphScene=MorphObjects
morph=14422
steps=40
interval=20
easing=EaseOut
delay=2000

帯を右に
animate
scene=Pics
item=obi3
queue=1
morphScene=MorphObjects
morph=14423
steps=40
interval=20
easing=EaseOut
delay=2000

帯を中央に
animate
scene=Pics
item=obi4
queue=1
morphScene=MorphObjects
morph=14424
steps=40
interval=20
easing=EaseOut
delay=2000

帯を右に
animate
scene=Pics
item=obi5
queue=1
morphScene=MorphObjects
morph=14425
steps=40
interval=20
easing=EaseOut
delay=2000

この量が必要になります。Loopが使えそうなコマンドでは使わない手はないですね!

この記事で使用したコマンド

帯Morph左から右に
ループ
loop
start=1
end=5
step=1

帯を中央に
animate
scene=Pics
item=obi$@
queue=1
morphScene=MorphObjects
morph=1440$@
steps=40
interval=20
easing=EaseOut
delay=[$@ * 500]

帯を右に
animate
scene=Pics
item=obi$@
queue=1
morphScene=MorphObjects
morph=1442$@
steps=40
interval=20
easing=EaseOut
delay=2000

帯Morph右から左に
ループ
loop
start=1
end=5
step=1

帯を中央に
animate
scene=Pics
item=obi$@
queue=1
morphScene=MorphObjects
morph=1440$@
steps=40
interval=20
easing=EaseOut
delay=[$@ * 500]

帯を左に
animate
scene=Pics
item=obi$@
queue=1
morphScene=MorphObjects
morph=1441$@
steps=40
interval=20
easing=EaseOut
delay=2000

記事で使用したコマンドはコマンドアーカイブに追加していきます。コピペできると思うので利用してくださいね。

コマンドアーカイブ

シーンスイッチ | scene switching シーンをスイッチする switch trans=Fade scene=SceneName delay=0 trans : オプション delay : オプショ[…]

IMG
最新情報をチェックしよう!
配信中! 質問受け付けてます
現在オフライン