エフェクトを段階的にする

これまで、ページやアイコンにいろいろエフェクトをかけてきました。
既存エフェクトの中には、「アイコンが集まって」→「グルグル回って」→「アイコンが切り替わって」→「定位置に戻る」というものがあります。
これまで紹介したやり方では、完結しないエフェクトです。
これは、エフェクトの開始から終了までをいくつかの段階に分け、それぞれでエフェクトを作り込んでいます。

ここでは、幾つかの段階に分けて、違うエフェクトを組合わせてみます。

考え方

当サイトのサンプルは、開始から終了までのタイミングを、percentで管理しています。
ですので、このpercentを上手く利用して、段階的なエフェクトを与えることを考えます。

では、どのようにpercentを分ければ良いのでしょうか。
簡単な方法は、if文を使う方法です。
例えば・・・
１：percentが0.3未満なら回転させる
２：percentが0.5未満なら回転を止める
３：そうでなければ縮小して消える

こんな感じでやれば、何とかできそうですね。

サンプル

とりあえず、先ほどの例をプログラミングしてみました。

おそらくバグだらけなのでしょうけど、１つ１つ解説します。


if( percent < 0.3 ) then page:rotate( -angle )

percentが0.3未満のときは、ページを回転させます。


elseif( percent < 0.5 ) then

elseがありますので、「percentが0.3以上0.5未満のとき」という条件になります。


page:rotate( -0.3*math.pi*2 )

回転を止めるような指定はありませんので、回転している途中の状態をキープするやり方になります。
今回は、0.3まで回して止めるので、0.3のときの固定角度を指定します。


else

この場合は、「percentが0.5以上のとき」という条件になります。


page:scale( 1-percent )

最後は消えるだけですので、拡大率が０で終わるように、1-percentを指定します。

では、実際に動作させてみましょう。

エフェクトが３段階になっていることはお分かり頂けると思います。
ただ、いくつか気になるところがありますので、以下にまとめます。
・２ページ目がいきなり入ってくる
・２ページ目がずっと表示されている
・縮小がいきなり始まる

少しずつ、修正していきます。

修正１

とりあえず、２ページ目がジャマですので、１ページ目の修正が終わるまで、消えててもらいましょう。
そのために、以下を追加します。

if( percent < 0 ) then page:alpha(0)

２ページ目は、offsetが負数ですので、percentも負数です。
offsetの値で判断しても問題ないのですが、当サイトではpercentでの管理に統一します。

そして、１ページ目の最大の問題は、percentが0.5になってからの縮小です。
傾いていたはずのページが消え、傾いていない小さなページが縮小されていくのです。
これは、percentが0.5前後で全く違う動作となっているため、きちんと動いていると言えばそうなのですが、求める動きではありません。
では、傾いたページがそのまま縮小されるようにするには、どうすれば良いのでしょうか？

ここで、１つ気をつけることがあります
それは、「動作は意図的に継続させなければならない」ということです。
percentが0.3で切り替わる時も同様なのですが、0.3のときの回転角度を指定することで回転を止めましたよね。
実は、回転角度の指定を止めたら、回転が止まるのではなく、回転自体が解除されるので、止めておきたい回転角度を指定しておいたのです。
これが、「意図的に・・・」ということで、縮小時も傾きを意図的に保つ必要があったのです。
そこで、0.5以降に、以下の１行を追加します。

page:rotate( -0.3*math.pi*2 )

これで、傾いたままのページを維持することができます。

とりあえず、ここまでの修正を確認します。

修正箇所が分かるように、追加や修正部分を赤くしておきました。

２ページ目が消えて、確認しやすくなりました。
縮小時も傾きが維持されています。

修正２

ここでは、縮小部分を修正します。
縮小が急に始まってしまう問題ですね。

どうして急に始まるのか、原因を探るために、切り替わりの前後で、拡大率を確認しましょう。
切り替わるタイミングは、percentが0.5の時です。
それまでは、拡大率を指定していませんので、デフォルトの１となります。
拡大が始まる瞬間の拡大率は、1-percentで表されていますので、0.5となります。
1-percentで拡大されるのは、percentが0.5〜1の時ですので、拡大率は0.5〜0となります。
縮小して消えてもらいたいので、拡大率が0で終わるのは思惑通りです。
しかし、0.5から始まるため、急に縮小されてしまったんですね。

ここでも、気をつけることがありました。
それは、「動作の切り替えはスムーズに繋げる」ということです。
拡大率が1から0.5になったので、「急に」としか受け取りようがないのです。
工夫をして、拡大率を１から始まるようにしなければなりませんね。

percentの変化は、0.5〜1です。
この変化に伴って、1〜0になるようにしたいと思います。
何とか、計算式で表現したいですね。
単純に２倍すると、1〜2となり、スタートはスムーズになりますが、縮小してくれません。
ここで、１つの考え方を導入します。
percentが0〜1であれば、1-percentで表現できます。
percentが0.5〜1でも、0〜1になるように変換したいので、以下のようなイメージで考えます。

0.5を0にするために、percentから0.5を引きます。
そして、percentの範囲である0.5で割ります。
したがって、修正する計算式は以下の通りです。

1 - (percent-0.5)/0.5

これで、0〜1の範囲になります。

では、修正を確認します。

動作も確認しましょう。

拡大率が1〜0になったので、動作の切り替えがスムーズになりました。

修正３

１ページ目の修正が完了しましたので、２ページ目に取り掛かりましょう。
といっても、センスがないので、エフェクトのアイデアが浮かびません・・・
１ページ目が縮小して消えていったので、単純に、２ページ目も縮小して登場してもらいましょう。
登場に関しては、「ページ拡大のいろいろ」で紹介した拡大を流用します。

修正箇所は、消えてもらっていた部分で、ここを拡大指定にします。
具体的には、以下の通りです。

page:scale(1+percent^2*20)

これで、見えなくなる程の拡大から縮小されて登場してくれるはずです。

では、今回の修正を確認します。

動作も確認しましょう。

すべてが繋がりましたね。

まとめ

タイミングでエフェクトを切り替えることができますが、注意することもありました。
この先、教訓になるほどの注意事項かと思いますので、ここでもう一度確認しておきます。

１：動作は意図的に継続させなければならない
２：動作の切り替えはスムーズに繋げる