こんにちは 大学院生です。前回の続きになります。
さて、前回 MUSEではこのように並んでいた正方形が、
Webだと、
このように離れて配置されたのを確認したと思います。今回はどこにどの値を入れると希望通りにweb上で配置できるかを説明します。
①計算式
実は簡単な計算式に当てはめれば、すぐにweb上での配置がわかります。まずは紹介します。
上方向
MUSEで設定したyの値 + (キーの値 × モーション値) − キーの値 ＝ web上のy
下方向
MUSEで設定したyの値 - (キーの値 × モーション値) - キーの値 ＝ web上のy
左方向
MUSEで設定したxの値 + (キーの値 × モーション値) ＝ web上のx
右方向
MUSEで設定したxの値 - (キーの値 × モーション値) ＝ web上のx
②例
それぞれ、例を見てみましょう。
縦横200pxのオレンジ色正方形はMUSE上でx600,y600の位置に配置してあります。
スクロール効果ですが、上方向は0、左方向は2、キーの位置は300で設定してあります。
これをwebで見るとこうなります。
と移動しています。
先ほどの計算式に入れてみましょう。
上方向
600(MUSEで設定したyの値) + (300(キーの値) × 0(モーション値)) − 300(キーの値) ＝ 300(web上のy)
左方向
600(MUSEで設定したxの値) + (300(キーの値) × 1.5(モーション値)) ＝ 1050(web上のx)
となります。
今度は
縦横200pxのオレンジ色正方形はMUSE上でx600,y600の位置に配置してあります。
スクロール効果ですが、下方向は0.5、右方向は1、キーの位置は300で設定してあります。
これをwebで見るとこうなります。
と移動しています。
先ほどの計算式に入れてみましょう。
下方向
600(MUSEで設定したyの値) - (300(キーの値) × 0.5(モーション値)) - 300(キーの値) ＝ 150(web上のy)
右方向
600(MUSEで設定したxの値) - (300(キーの値) × 1(モーション値)) ＝ 300(web上のx)
となります。
どちらも、キーの値までスクロールすると、MUSE上の配置と同じになります。
次回は最終モーションと透明度に関して説明します。
余談ですが、これを理解するのに3時間くらいかかりましたw
