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

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

逆向き移動

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

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

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

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

倍速移動

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

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

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

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

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

縦移動

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

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

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

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

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

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

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

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

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

奥行き移動

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

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

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

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

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