1つのアイコンだけに・・・

今回から、個別のアイコンにエフェクトを掛けていきます。
アイコンを個別に指定するには、以下のように指定します。
page[アイコン番号]
アイコンを特定したら、ページ全体に掛けたエフェクトと同じことができます。
アイコン番号ですが、アイコンは「○列の□行目」という概念ではなく、単純に通し番号で管理されています。
左上から右へ順に番号が振られますが、奇数列や3行目などを特定しようとすると、逆に面倒になってしまいますね。

ここからは、アイコン番号を変えながら、いくつかサンプルを紹介します。

1つ目のアイコンを移動させる

1つ目のアイコンを特定するには、以下のように記述します。
page[1]
offsetを使って、translateで移動させます。

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

return ( page, offset, screen_width, screen_height)
 page[1]:translate(-offset)
end

effect9_1

アイコン番号1番目である左上のアイコンだけが倍速移動します。

個別移動エフェクト

これだけだと、まだ有り難みが分かりませんね。

4つ目のアイコンを回転させる

4つ目のアイコンを特定するには、以下のように記述します。
page[4]
angleを算出し、rotateで回転させます。

以下は、個別回転エフェクトのサンプルです。

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

 page[4]:rotate(angle)
end

effect9_2

右上のアイコンが回転移動します。

個別回転エフェクト

まだまだ有り難みが分かりませんね。

8つ目のアイコンを拡大させる

8つ目のアイコンを特定するには、以下のように記述します。
page[8]
percentを算出し、scaleで拡大させます。

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

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

 page[8]:scale(1+percent*5)
end

effect9_3

右の上から2番目のアイコンが拡大しながら移動します。
割合を5倍にしたので、大きくなる様を見ることができますね。

個別拡大エフェクト

何となく使えそうな気がしてきました。

10コ目のアイコンを透過させる

10コ目のアイコンを特定するには、以下のように記述します。
page[10]
percentを算出し、alphaで透過させます。

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

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

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

effect9_4

アイコン番号10番目のアイコンが透過しながら移動します。
サンプルでは、透過の割合を3倍にしています。

個別透過エフェクト

組み合わせれば使えそうですね。



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


保存する

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

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

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