横列を特定する

縦列を特定しましたので、続いて横列も特定しましょう。


3段目のみ回転させる

アイコン番号は横方向の通し番号です。
横列を特定するにも、工夫が必要です。

では、アイコン番号の並び方を確認します。

このように横方向に増えていきますが、この横列を特定しようとしているのです。

前回紹介した縦列の特定では、最大横数で割った余りを求めましたが、横列の特定は、最大横数で割った商を求めれば良さそうですね。

では、3段目の横列を特定したアイコンにエフェクトを掛けたサンプルを紹介します。

return ( page, offset, screen_width, screen_height)
 local percent = offset/page.width
 local angle = percent*math.pi*2

 for i, icon in subviews(page) do
  if( math.floor(i/page.max_columns) == 3 ) then
   icon:rotate(-angle) end
 end
end

effect12_1

汎用的にするために、page.max_columnsで割っています。
割ったままでは都合が悪いので、小数点以下を切り捨てるために、math.floorを使っています。


今回も、回転エフェクトを掛けました。

3段目のアイコンを特定した回転エフェクト

右端だけズレていますね・・・

では、さっそく原因を探りましょう。
と言っても、もうピンと来ているのではないでしょうか?
1から始まるアイコン番号を割ってしまったために、1つズレてしまったのです。
ここは単純に、iをi-1に置き換えて、0から始まるものとして処理しましょう。

return ( page, offset, screen_width, screen_height)
 local percent = offset/page.width
 local angle = percent*math.pi*2

 for i, icon in subviews(page) do
  if( math.floor((i-1)/page.max_columns) == 3 ) then
   icon:rotate(-angle) end
 end
end

effect12_1_2

今回も、(i-1)と括弧を付けました。

段を揃えた回転エフェクト

きちんと1段揃って回転していますね。

しかし・・・
これ4段目ですね・・・

ここにも、都合の悪い「1スタート」がありましたね。
プログラム上では「0スタート」が都合良いので、段数も「0スタート」にしなければならなかったんですね。
という訳で、画面上の3段目にエフェクトを掛けたければ、プログラム上では2段目とすれば良い訳です。

return ( page, offset, screen_width, screen_height)
 local percent = offset/page.width
 local angle = percent*math.pi*2

 for i, icon in subviews(page) do
  if( math.floor((i-1)/page.max_columns) == 2 ) then
   icon:rotate(-angle) end
 end
end

effect12_1_3

これで完成ですね。

3段目のアイコンを特定した回転エフェクト

アイコンの段数も0段から数えなければならなかったんですね。
プログラム上では、何でもかんでも「0スタート」にしておけば良さそうですね。

上下に分けて移動させる

縦列と同様に、横列の特定でも2つに分けてみます。
今回は、中央から上半分と下半分でエフェクトをかけてみます。

では、ここでもアイコン番号の並び方を確認します。

今回から、アイコン番号を「0スタート」にしてみました。
段数の算出に「最大横数」を使いますし、中央段の算出に「最大段数」を使います。
縦列の特定より、使うものが多くなっていますね。

では、サンプルを紹介します。

return ( page, offset, screen_width, screen_height)
 local dance
 local center = (page.max_rows-1) / 2

 for i, icon in subviews(page) do
  dance = math.floor((i-1)/page.max_columns)
  if( dance < center ) then
   icon:translate(0, -offset)
  else
   icon:translate(0, offset)
  end
 end
end

effect12_2

「0スタート仕様」です。
条件式が長くなるので、変数を用意しました。
centerは中央段の算出用で、danceは段数です。

上半分は上へ、下半分は下へ移動するエフェクトです。

上下に移動させたエフェクト

交差してますね・・・

交差もエフェクトの味と思えば、これはこれでいいかと思います。
交差させないようにするには、以下のようにします。

return ( page, offset, screen_width, screen_height)
 local dance
 local center = (page.max_rows-1) / 2

 for i, icon in subviews(page) do
  dance = math.floor((i-1)/page.max_columns)
  if( dance < center ) then
   icon:translate(0, -math.abs(offset))
  else
   icon:translate(0, math.abs(offset))
  end
 end
end

effect12_2_2

絶対値を使えば交差しなくて済むんですね。

交差させない上下移動エフェクト

まぁこんなもんですね。

段を交互に上下移動させる

引き出しが少ないので、紹介するネタも「交互」のみとなってしまいました。

では、ここでもアイコン番号の並び方を確認します。

0スタートのアイコン番号を最大横数で割った商が何段目かになりますが、その商が偶数か奇数かで判断できます。

では、段数が偶数か奇数か判断してエフェクトを掛けたサンプルを紹介します。

return ( page, offset, screen_width, screen_height)
 local dance

 for i, icon in subviews(page) do
  dance = math.floor((i-1)/page.max_columns)
  if ( dance % 2 == 0 ) then
   icon:translate(0, offset)
  else
   icon:translate(0, -offset)
  end
 end
end

effect12_3

変化を加えるために、偶数と奇数の移動方向を逆にしてみました。

交互の列で上下移動させたエフェクト

横列縛りは、もうこれくらいで良いかな?



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


保存する

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

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

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