平行移動のエフェクトいろいろ

前回は、エフェクト作り基本から、各軸の平行移動まで紹介しました。
ここでは、平行移動のエフェクトをもう少し紹介しようと思います。

逆向き移動

offsetは、符号によって「向き」も含まれますので、演算によっては、本来の逆向きに動作させることも可能です。

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

return ( page, offset, screen_width, screen_height)
 page:translate(offset*2)
end

effect2_1

移動中のページにoffsetを付加すると、移動量が打ち消しあって止まって見えますが、さらにoffsetを付加すると、逆向きに移動するようになります。
したがって、スクリプト上では、offsetを2倍にしています。
「offsetマジック」を上手く使ったエフェクトの1つだと思います。

逆向き

地味に慣れるのが大変です。

倍速移動

移動中のページの向きと、offsetの向きは逆になりますので、offsetを移動中のページ方向にすると、移動スピードが倍になります。

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

return ( page, offset, screen_width, screen_height)
 page:translate(-offset)
end

effect2_2

offsetにマイナスを付加することで、移動中のページと同じ向きになります。
動きの基本を理解していないと、このサンプルこそが動きを止めると勘違いしてしまいそうですね。

これも、「offsetマジック」を上手く使ったエフェクトの1つだと思います。

倍速移動

サンプルはゆっくり動かしてしまったので、分かりにくいかもしれませんが、1ページ目と2ページ目の距離を確認すると、分かるかと思います。
使ってみると意外と良い感じです。

縦移動

前回の基本を知るでは、translateで3軸の指定ができることを紹介しました。
その時は、ページ移動に縦方向を付加することで、エスカレータ風としましたが、今回はページ移動を止めることで、縦方向のみの移動を紹介します。

以下は、縦移動エフェクトのサンプルです。

return ( page, offset, screen_width, screen_height)
 page:translate(offset, offset, 0)
end

effect2_3

横方向にoffsetを付加することで、ページの移動が止まります。
その上でさらに縦方向にoffsetを付加しているので、縦移動だけのページ移動になるのです。
このサンプルは、以下のように記述しても同じ動きをします。

return ( page, offset, screen_width, screen_height)
 page:translate(offset, 0, 0)
 page:translate(0, offset, 0)
end

effect2_3_2

縦方向は下向きがプラスですので、ページを左に移動させようとすると、下へ移動します。

縦移動

ページ同士が重なってしまっていますね・・・
offsetはページ移動量ですので、最大値は画面横幅になります。
テレビやパソコンと違って、iPhoneは縦長ですので、offsetの値は画面縦幅に届きません。
仕様ですので、仕方ないですね・・・

先ほどの「逆向き移動」で、2倍のoffset値を指定しました。
offsetを2倍にすれば、画面の縦幅を越えることができるので、縦移動も倍速にしてみましょう。

以下が、倍速縦移動エフェクトのサンプルです。

return ( page, offset, screen_width, screen_height)
 page:translate(offset, offset*2, 0)
end

effect2_3_3

横方向にoffsetを指定することで動きを止め、縦方向に2倍のoffsetを指定することで、アイコンの重なりを回避しています。

縦移動2

決して悪くないサンプルになったかと思います。

奥行き移動

前回の基本を知るにおいて、translateで3軸の指定ができることを紹介しました。
最後の奥行き方向の移動では、途中で止まってしまいました。
これは、先ほどの縦移動と同様に、offsetの最大値が足らないのでは?ということで、奥行きに関しても2倍のoffsetを指定してみました。
今回は、ページ移動を止めていますので、完全なズーム効果が期待できます。

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

return ( page, offset, screen_width, screen_height)
 page:translate(offset, 0, offset*2)
end

effect2_4

前回の奥行き移動よりも速く動くので、途中で終わってしまうという違和感はなくなりました。

奥行き移動

次のページも、offsetの符号により縮小状態からの出現で良い感じなのですが、スタートで見切れてしまっています。
offset*2.5とし、拡大率を上げてみると・・・

奥行き移動2

仕上がったものの、ページ移動を止めて手前に移動するので、てっきり完全なズームをイメージしていたのですが、ちょっぴり残念です。
結果的には、シンプルな3Dエフェクトになったかと思います。



当サイトの更新状況を、アラートで表示するかどうかの設定をします。


保存する

その機能で月額1500円もするのですか??
その機能なら年額1500円で手に入りますよ!

当サイトもこちらのレンタルサーバーを利用しています。

Copyright (C) 2007 Bokechans.net All Rights Reserved.