ページ拡大のいろいろ

ここまでは、ページ全体の移動と回転に関していろいろ紹介しました。
ここでは、ページ全体の大きさで遊んでみます。
記述方法は以下のように、３つあります。
scale(size)
scale(x, y)
scale(x, y, z)

scaleの()内に数値を指定するのですが、その数値は「倍率」です。
１を指定すれば、何も変化しませんし、０を指定すると消えてしまいます。

それぞれの拡大について紹介します。

scale(size)

ページ全体を拡大するのですが、その中心はページ中央です。
「平行移動」の奥行き移動で期待していた「完全ズーム」がここにありましたね。

以下は、拡大エフェクトのサンプルです。

このサンプルは、ページ固定を基本としています。
percentは０〜１で動くのですが、単純にpercentを指定すると、１以下だと縮小になってしまうので、１を加えて１〜２の値を取るようにしました。
終了時に２倍の大きさになるわけですね。
これも「offsetマジック」が有効ですので、２ページ目のpercentは −１〜０の値を取ります。
実は、負の数を指定すると反転してしまいますので、１を加えることで、それも回避できるのです。

１ページ目は最大でも２倍までしか拡大されないので、まだ画面に残ったまま急に消えることになります。
２ページ目は、理想的でイメージした通りの登場をしてくれています。

出て行くページは、もっと大きくしないといけないので、percentを５倍にしてみましょう。

単純に、percentに５を掛けました。
これで、最大で６倍になります。
「offsetマジック」が有効ですので、２ページ目は −４〜１の値を取りますが、今回に限り、２ページ目の動きは気にしないことにします。

６倍でも、拡大が全然足りないですね。
もっともっと大きくする必要があることが分かりました。
これまでは１ページ目の動きだけを考えてきました。
それでも、２ページ目が良い感じで動作してくれたので、助かっていました。
「offsetマジック」がだんだん効かなくなってきましたね。
逆に、１ページ目と２ページ目で、異なる動きを作り込む良い機会かと思います。

では、if文を使って、条件制御してみましょう。
「if」で条件を記述し、「then」で条件を満たした時の処理を記述します。
if( 条件式 ) then 処理 end
条件式のカッコ（）がなくてもエラーにはなりませんが、当サイトではカッコ付きでサンプル作成していきます。
今回のサンプルでは、１ページ目だけをもっと大きくしたいので、それをプログラミングしていきます。
どれくらい大きくすれば良いのか、いろいろ数値を変えて試してみたのですが、20倍でやっと画面から出て行ってくれました。

この20倍を踏まえて作ったサンプルです。

拡大率の指定は、1+percentに戻しましたので、２ページ目の動きも戻ったことになります。
そして、今回の目玉であるif文の紹介をします。
if文の条件である「１ページ目」ですが、percentの符号で判断しました。
percentが０よりも大きければ、１ページ目であるということです。
では、「１ページ目だったらどうする」の部分ですが、percent = percent * 20 としました。
ここにある「＝」は、両者が等しいことを示す等号ではなく、右辺を左辺に代入することを示します。
percentを20倍したものをpercentに代入するのですが、プログラミングでは当たり前の記述方法ですので、「こういうもの」として覚えておく必要がありますね。

１ページ目は、20倍の拡大で良い感じに消えてくれるようになりました。
２ページ目は、最初のサンプルと同様に、何もないところからの出現に戻りました。
サンプルファイルでは、percent *= 20 としていますが、単純に20倍するならこの記述の方が楽チンですし、直感的にも分かりやすいかと思います。

これで完成かと思ったのですが、しばらく使ってみると、動き始めのスピードが気になってきました。
最初だけ速いのです。
しかし、開始時の倍率は等倍の１でなければなりませんし、終了時の倍率は20倍に決めたばかりなので、変更すべきは、その変化です。
直線的な変化を曲線的にできれば良いのですが・・・

イメージはバッチリですね。
プログラミングと数学は密接な関係にありますので、ここに数学の知識を盛り込んでみます。
いろいろ考えましたが、単純に１次式を２次式にするだけで落ち着きました。

以下は、percentを２次式にしたサンプルです。

サンプルのように、累乗は「^」を使います。
演算の優先順位は「*」よりも「^」の方が高いので、括弧の必要はありません。

サンプルでは、あえてゆっくり動かしたのですが、消えて行くページと出現するページが、しばらく同じスピードで大きくなるのがお分かりいただけますでしょうか。

個人的に満足出来るサンプルになりました。

scale(x, y)

先ほどのページ全体の拡大に対し、横方向と縦方向を個別で指定できます。
こちらも、回転中心はページ中央です。
以下は、横方向拡大エフェクトのサンプルです。

横方向のみの拡大ですので、縦方向の倍率は１にしてあります。

機能的には必要かもしれませんが、サンプルとしては面白くないですね。

このまま縦方向も紹介します。

縦方向のみの拡大ですので、横方向の倍率は１にしてあります。

機能的には必要かもしれませんが、こちらもサンプルとしては面白くないですね。

scale(x, y, z)

最後に、３軸指定を紹介します。
こちらも回転中心は、ページ中央ですが、あまり気が乗りません。

以下は、横方向拡大エフェクトのサンプルです。

３軸指定できるのですが、横方向のみ倍率指定しています。

やはり、同じ動きですね・・・

続きまして、縦方向の拡大です・・・

３軸指定できるのですが、縦方向のみ倍率指定しています。

やはり、同じ動きですね・・・

続きまして、奥行き方向の拡大です・・・

３軸指定できるのですが、奥行き方向のみ倍率指定しています。

おや？？？
移動なしと同じですね・・・

ということは、奥行き方向の指定はできないということですね。
結果的に、３軸指定は必要ないことになってしまいました。