ビギナーズラック　「iOS8」の棚　エフェクトを作る(ページ回転のいろいろ)

ページを回転させるところまで紹介しました。
回転も軸が３つありますので、ここで紹介します。
回転軸を指定するには、以下のように記述します。
rotate(angle, pitch, yaw, roll)
angleは角度で、ラジアンを指定します。
pitch, yaw, rollは回転軸で、回転させない場合は「０」、正回転させる場合は「１」、逆回転させる場合は「−１」を指定します。

それぞれの回転について紹介します。

roll回転

一般的な軸で言う所の「Z軸」の回転です。
角度指定のみの回転と同じですので、この「roll回転」から紹介します。
回転中心は、ページ中央です。

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

return ( page, offset, screen_width, screen_height)
　local percent = offset / page.width
　local angle = percent * math.pi * 2

　page:rotate(angle, 0, 0, 1)
end

effect4_1

逆回転させるには、これまでのように-angleとしても良いのですが、指定軸に「−１」とするだけで逆回転になります。
これも「offsetマジック」が有効です。

roll回転

やはり半回転の方が好きかなぁぁぁ？

yaw回転

一般的な軸で言う所の「Y軸」の回転です。
回転中心は、ページ中央です。
個人的な記憶ですが、三菱自動車の「アクティブヨーコントロール」を聞いた時、「ヨーって何だヨー」と言ってたことを思い出します・・・

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

return ( page, offset, screen_width, screen_height)
　local percent = offset / page.width
　local angle = percent * math.pi * 2

　page:rotate(angle, 0, 1, 0)
end

effect4_2

逆回転させるには、これまでのように-angleとしても良いのですが、指定軸に「−１」とするだけで逆回転になります。
これも「offsetマジック」が有効です。

この回転に関しては、１回転よりも半回転や1/4回転の方が、受け入れやすそうなので、３つまとめて紹介します。

yaw回転

yaw半回転

yaw 1/4回転

私は1/4回転がお気に入りです。

半回転のダウンロード　ー＞　effect4_2_2.zip
1/4回転のダウンロード　ー＞　effect4_2_3.zip

pitch回転

一般的な軸で言う所の「X軸」の回転です。
回転中心は、ページ中央です。

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

return ( page, offset, screen_width, screen_height)
　local percent = offset / page.width
　local angle = percent * math.pi * 2

　page:rotate(angle, 1, 0, 0)
end

effect4_3

逆回転させるには、これまでのように-angleとしても良いのですが、指定軸に「−１」とするだけで逆回転になります。
これも「offsetマジック」が有効です。

pitch回転

この回転は、あまり使いそうにないかな？

エフェクト一覧へ

サイトトップへ