ページ全体を透過させる

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

alphaで透過させる

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

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

return ( page, offset, screen_width, screen_height)
 local percent = offset / page.width

 page.alpha = 1 - percent
end

effect6_1

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

ページ全体の透過

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

1を超えるalpha値

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

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

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

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

if文を使う

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

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

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

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

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

return ( page, offset, screen_width, screen_height)
 local percent = offset / page.width

 if( 0 < percent ) then
  page.alpha = 1 - percent
 else
  page.alpha = 1 + percent
 end
end

effect6_2

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

ページ全体の透過(改良版)

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

if文を使わない

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

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

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

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

return ( page, offset, screen_width, screen_height)
 local percent = offset / page.width

 page.alpha = 1 - math.abs(percent)
end

effect6_3

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

ページ全体の透過(再改良版)

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

エフェクトらしく

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

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

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

return ( page, offset, screen_width, screen_height)
 local percent = offset / page.width

 page.alpha = 1 - math.abs(percent*3)
end

effect6_4

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

シュシュッと参上〜

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



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


保存する

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

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

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