ページを回転させる

前回までは、エフェクト作り基本から、各軸の平行移動と簡単な応用まで紹介しました。
ここからは、新しい動きとして「回転」を紹介します。

とにかく回転させてみる

ページを移動させることで、リアルタイムな移動量をoffsetで取得できることを知り、translateでいろいろ移動させてきました。
今回のテーマは「回転」ですので、「rotate」を使います。

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

移動の基本サンプルにおいて、translateをrotateにしただけのサンプルです。

どえりゃーことになってまったでかんわ・・・

回転の指定方法

とにかく回転させてみたら大変なことになってしまいましたね。
どうしてこんなことになってしまったのでしょうか。

そもそもoffsetが何だったか思い出してみましょう。
単純に「ページ移動量」で十分に正解なのですが、ここで注目すべきは、その単位です。
offsetは、移動量なので、単位は「ピクセル」です。
回転は角度で決まりますので、移動量（ピクセル）指定しても、土俵が違うということになります。
さらに、角度は、日常使う「度（°）」ではなく、ラジアンで指定しますので、１周の角度は2πで考えなければなりません。
2πは6.28318・・・ですので、そこにoffsetを指定したので、１ページ移動しようとすると、170回転以上してしまうのです。
先ほどのサンプルで大変なことになってしまった理由がお分かり頂けましたでしょうか？

そんな訳ですので、１ページの移動に対し、１回転するようにoffsetを工夫する必要が出てきました。

offsetを割合で考える

ページが完全に移動した時、つまり、ページ移動量が最大値になった時、ページが１回転することを考えます。
しかし、移動量の最大値は、デバイスによって違うため、悩ましいところではございます。
そこで出てくるのが、return function()にあった引数です。
４つある内の１つに、screen_widthがあります。
このscreen_widthがデバイスの画面幅であり、移動量の最大値でもあります。
つまり、screen_widthを使えば、デバイスの画面幅を考えなくても済むようになるのです。

offsetが最大になるとき、つまり、screen_widthと同値になるときを100%と考えると、デバイスに関係なく、「１ページ」を取り扱うことができます。
そこで、ページ移動を割合で考えるための「rate」を導入します。
rate = offset / screen_width
こうすることで、画面幅に関係なく、ページ移動を０〜１の数値で取り扱うことができるのです。

しかし、実際のサンプルは、多少違います。
ここで紹介するサンプルも、Cylinder既存エフェクトも、offsetの割合を以下のようにしています。
percent = offset / page.width
percentは、100倍しないとその意味を成さないと思うのですが、感覚として捉えるにはpercentの方がわかりやすいと思います。
page.width と screen_width にさほど違いはありません。
対象となるのが「移動中のページ」ですので、pageから取得するのが筋かと思います。
入力文字数も少なく済むので、その意味でもpageから取得しましょう。
今後は、このpercentを軸に進めていくことになります。

offsetの割合を角度に反映させる

offsetを割合で考えて、percentで表現するところまでできましたので、あとは角度に反映させるだけですね。

percentのとる値は、０〜１であり、回転する範囲（角度）は、０〜２πですので、２πをpercentに掛けるだけで完了します。
ただ、その記述方法が日常にはないので、以下のように角度（angle）記述します。
angle = percent * math.pi * 2
冒頭のサンプルでoffsetを指定してしまったrotateですが、このangleを指定すれば解決してくれそうですね。

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

percentとangleは、こちらが勝手に定義した変数ですので、「local」を付加しています。
このように記述するものとして、覚えておいてください。

１ページの移動で１回転するようになりましたね。

逆回転

offsetを割合で考え、角度に反映させることで、きちんと１回転するエフェクトができました。
しかし、思っていた回転とは逆だった方も少なくないと思います。
私もその一人なのですが、やはり左に移動するときは左に回転してほしいものです。
ですので、先ほどとは逆に回転させてみます。

以下は、逆回転エフェクトのサンプルです。

その方法は単純で、angleにマイナス（ー）を付加しただけです。

これで、思った通りの回転になりました。

半回転

思った通りの左回転になったものの、１回転は回りすぎのような気がしてなりません。
せっかく角度の計算をしたので、ここでは、左向き半回転だとどんな感じになるか試してみます。

以下は、左向き半回転エフェクトのサンプルです。

角度（angle）の算出に、１回転の２πを掛けましたので、半回転にするには、πを掛ければＯKです。

個人的には、半回転の方がしっくりきますが、いかがでしょうか？

１／４回転

半回転でしっくりきましたが、せっかくなので、もう半分の1/4回転を試してみます。

以下は、左向き1/4回転エフェクトのサンプルです。

角度（angle）の算出に、今度は、π/2を掛ければＯKです。

回転中心がページ中央ですので、幅と高さのバランスが仇になってしまいましたね。
1/4回転の場合、回転中心がホームボタン辺りならちょうど良いかもしれません。