06b-Swap Anim

iPhone SDK開發範例大全第二章之八Swap Animation(8/14):2009年08月31b日星期一

iPhone SDK開發範例大全即iPhone Developer's CookBook的中文譯本,程式可由erica網站下載。第二章講View(視圖),程式共有十四個:

本文講第七個程式06b-Swap Anim:

(A)這個程式會先在iPhone螢幕上顯示數字1,click後1會以動畫方式逐漸消失、2會以動畫方式逐漸出現,每次click,交替出現1、2,見下圖。

(B)程式中ToggleView class為核心,若將其中的touchesBegan程式稍加修改,見下圖,57行圓圈處由0.5改為0.7及64行comment掉,可將隱藏在下的數字"1"顯現出來。這正是"數字2"在上方(frontView),"數字1"在下方的明確表現。toggleView class有initWithFrame及touchesBegan兩個重要程式,在下面(C)、(D)介紹。

(C)toggleView class的initWithFrame。

  1. 先看第3、4行的IMAGE_VIEW_1及IMAGEVIEW_2兩個constant,若有多個view,替每個view編號十分重要,如此即可叫出某特定view。
  2. 第5、6行BIGRECT及SMALLRECT定出view的boundary。注意,由左上角算起,BIGRECT由 (0,0) 展開 (320,435) 大的rectangle,SMALLRECT由 ( 130, 187 )展開 (60, 60) 大的rectangle。
  3. 弟9行的isOne表示1是否在2之上,YES表示1在2之上,NO表示1在2之下。
  4. 17~25行將one.jpg及two.jpg load進memory ,28~30行先addSubview two.png再addSubview one.png會讓one.png自動在上方。

(D)toggleView class的touchesBegan:

39~42行先把在上面的image放在big,下面的放在small。

45~48行將動畫參數設好。注意48行setAnimationDuration後的數字改成8.0(8秒),這是讓過程緩慢呈現,以便copy screen方便。 原來是1.0。

50~53行swap上、下圖的boundary。注意,51行的setAlpha為0.5,因big要到下面去了。

55行執行動畫。

58行,將big的動畫隱藏起來。

59行,將big放到frontView。這一行耐人尋味,明明big就已經在frontView(尤其是第一個畫面,28~29行,imgView1在front)了,為何還要再放front一次?原因十分簡單,現在的big,馬上要成為little了,如果不放在front,若想看就看不見。試著comment掉58行,這時1、2都會出現,這就是59行的作用。再試著comment掉58、59行,這時1是big時,看不見2,因為28~29行,imgView1永遠在front,小boundary的2就被蓋住了。2是big時,看得見1,因為28~29行,imgView1永遠在front。由此可知,bringSubviewFront很好用,一大frame一小frame時,只要將小frame bringSubviewFront,再加上setAlpha:0.5(或小於1),就會出現重疊效果。