ページ全体を透過させる

ページ全体を変化させるシリーズが続きましたが、この透過が最後となります。
では早速、これまでのサンプルをベースに、透過サンプルを紹介します。

alphaで透過させる

透過させるには「alpha」を使います。
記述方法は以下の通りです。
page.alpha(透過率)
透過率を指定するので、その値は０〜１です。

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

percentの取る値が、０〜１ですので、そのまま透過率として指定できますが、だんだん消えていくようにしたいので、1-percentとすることで、その値が１〜０となるわけです。

あれれ？？？
１ページ目は、確かに消えていくのですが、２ページ目は、なんの変化もありませんね。
どういう事なのでしょうか？
これまで私が勝手に言ってきた「offsetマジック」が、全く効いていませんね・・・

1を超えるalpha値

今回不都合があるのは２ページ目です。
前回の「ページ拡大」で登場したif文を使って、２ページ目だけ操作することも可能ですが、今後のために、どうしてこのようになってしまったのかを解明しておきましょう。

１ページ目が消えていくようにするため、percentを加工して1-percentとしたのですが、これによって、２ページ目のalpha値がどのような値を取るかが問題だと思います。
２ページ目は、右から左へ移動しますので、offset値はマイナスの最大値から０まで変化します。
これをpercentにすると、-1〜0となります。
その結果、1-percentは、2〜1となるのです。

alphaには透過率を指定します。
そして、その透過率は0〜1であり、1が最大です。
しかし、alphaに1よりも大きな透過率を指定しても、エラーにはなりません。
2でも3でも、100でも1以上の数値は「1」として処理してくれるのです。
ですので、2〜1の間で変化する1-percentですが、alphaに指定しても、すべて「1」となるのです。

したがって、２ページ目に関しては、エラーも出ず、透過もされず移動するわけです。

if文を使う

では、if文で２ページ目の問題を解決していきます。

２ページ目の透過率ですが、消えた状態から徐々に見えてくるようにしたいので、0〜1を目標とします。
２ページ目のpercentは-1〜0ですので、単純に1を加えれば目標を達成できます。
もう少し苦労するかと思ったのですが、1+percentで解決です。

では、プログラミングの方で、もう一味加えましょう。
if文は、条件を満た時の処理を記述しますが、「条件を満たさなかったら・・・」という処理を記述する方法もあります。
１ページ目かどうかは、percentが正かどうかで判断できます。
２ページ目かどうかの判断で、percentが負かどうかではなく、「percentが正でなければ・・・」という判断にします。
if( 条件式 ) then 条件を満たした時の処理
else 条件を満たさなかった時の処理
end

ifとelseの組み合わせによって、処理を振り分けるのですね。
このようにすることで、条件の記述が一度で済み、処理の流れも分かりやすくなります。

以下は、改良版透過エフェクトのサンプルです。

記述量は増えましたが、流れは分かりやすいと思います。
もちろん、if文を並べても構いません。

目的の動きが実現できました。

if文を使わない

if文を使って解決したのに、if文を使わずにどうしろと言うのでしょう。
これは、if文の処理を眺めていて気付いたのですが、規則性が分かれば、if文で処理を分けなくても良いのではないかということなのです。

今回のサンプルでは、１ページ目なら1-percentを透過率とし、２ページ目なら1+percentを透過率として指定しています。
これって、符号が違うだけなんですよね。
２ページ目のpercentは、-1〜0の値を取るからこそ1+percentにしたのですが、このpercentの取る値が1〜0であれば、１ページ目と同じ1-percentでＯＫなのです。
これが解決できれば、if文を使わなくても良さそうですね。

では、どのように-1〜0を1〜0にすれば良いのでしょうか？
少し眺めていましたが、どうやら、符号がなければ何の問題も無さそうだということに気づきました。
数学で言う所の「絶対値」を取れば良さそうなのです。
絶対値でしたら、１ページ目に対する影響もありませんので、とても都合が良いですね。

絶対値を使うことで、if文を使わずに改良版透過エフェクトを作ってみました。

数学を使うと、こんなにコンパクトになるんですね。

書き方が変わっただけなので、動作に変わりはありませんね。

エフェクトらしく

これまで、ページ全体のエフェクトをいくつか紹介してきましたが、エフェクトとして普段使えるほどのものは紹介していませんでした。
今回で、ページ全体のエフェクトシリーズが終了することもありますので、最後にalphaを使ったエフェクトを紹介します。

そこで、エフェクトとして質の高いものを考えたのですが、もともとセンスのない人間ですので、知恵を絞っても「シュッと消えてシュッと出てくる」くらいしか思いつきませんでした。

以下は、考え抜いたエフェクトのサンプルです。

percentを３倍にしただけですね・・・

私のセンスでは、これが限界です。