愛瘋手機.tw / appholic.tw ：app程式 / app programming

iPhone SDK開發範例大全第二章之十二Core Animation-Jump(12/14)：2009年09月02日星期三

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

本文講第12個程式07d-CoreAnim-Jump，CookBook 中文譯本2-10-2、94頁：

(A)這個程式在會出現scale、fade、position三種Core Animation的效果，click右上DoIt，畫面即會scale、fade、position，因為position更有彈跳的效果，如下圖。

(B)主要的程式為doit：

(C) doit：

作一個reflectionLayer：

• 23行CALayer *reflectionLayer =[CALayer layer]; //回傳一個Core Animation Layer object ( CALayer ) reflectionLayer
• 24行，reflectionLayer用原UIImageView的contents.
• 25行，設透明度。
• 26行 reflectionLayer.frame = CGRectOffset([self.view layer].frame, 0.5, 416.0f + 0.5);
  • origin offet from [self.view layer].frame，成為[self.view layer].frame.x + 0.5， [self.view layer].frame.y + 416.0f + 0.5 。 可試試用 9.5及 416.0f +9.5。reflection layer會向右9.5 pixel。
• 27 行 reflectionLayer.transform = CATransform3DMakeScale (1.0, -1.0, 1.0); 想像一個4x4 matrix，mii表示某element，1.0是m11、-1.0是m22、1.0是m33、m44永遠為1，這就是CATransform3DMakeScale能做的，用一4x4 matrix來乘以4x1 vetor，產生新的4x1，以本例，若有一[x, y, z, w ]被這4x4 matrix乘完，產生[x, -y, z, w]。y成了-y，因而，flip y-axis。 試著用-1.0, 1.0, 1.0但不會flip x-axis。
• 28行，將其sublayer的Transform設為與自己相同。
• 29行，將refelcionLayer加入UIImageview的sublayer。若comment掉，就不會有reflection layer。

作一個shadowLayer：同reflectionLayer

38~39行，CATransition在此開始。

縮小：CABasicAnimation，

42行，CABasicAnimation *shrinkAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"]; //產生一個shrinkAnimation

CAPropertyAnimation中animationWithKeyPath:@"transform.scale"，transform.scale表示scale animation。

43行，設時間。見CAAnimation。

44行，設shrink to 的value ，0表示消失。可試試3.0，也可試試加入fromValue。

45行，加animation入UIImageView(self)。注意@"shrinkanimation"，表示這是shrinkanimation的名字。

逐漸消失：CABasicAnimation

49行，CABasicAnimation *fadeAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"]; //產生一個fadeAnimation

CAPropertyAnimation中animationWithKeyPath:@"opacity"，opacity表示fade animation。

跳躍：CABasicAnimation

54行，CABasicAnimation *positionAnimation = [CABasicAnimation animationWithKeyPath:@"position"]; //產生一個positionAnimation

CAPropertyAnimation中animationWithKeyPath:@"position"，position表示position animation。

55行，CGPathCreateMutable在 CGPath內，

CGPathCreateMutable產生指向CGPathMutable的pointer--CGMutablePathRef。

56行，CGPathMoveToPoints在CGPath內，

CGPathMoveToPoints，有四個parameter：

CGMutablePathRef path, //是個path

const CGAffineTransform *m;,// NULL表示無Affine transform

CGFloat x, //新位置 x coordinate

CGFloat y //新位置 y coordinate

57行，CGPathAddQuadCurveToToPoints在CGPath內，

CGPathAddQuadCurveToToPoints，加入quadratic curve to path，有六個parameter：

CGMutablePathRef path, //是個path

const CGAffineTransform *m;,// NULL表示無Affine transform

CGFloat cpx, //control point的x coordinate

CGFloat cpy //control point的y coordinate

CGFloat x, //end point的x coordinate

CGFloat y //end point的 y coordinate

58~59行，同56~57行。

(D)特別講一下上面的跳躍：CABasicAnimation，見下圖，這個圖是coordinate system，

CGPathAddQuadCurveToToPoints的用法如下，如下圖：

依此coordinate system先拉到control point (cpx, cpy), 再跌回end point(x, y)。source code中在原先59行 ( 最後一個CGPathAddQuadCurveToToPoints ) 後有一大段comment out的code。試著：

將42~59行全comment掉，並uncomment 59行後的那一段code。

第64行： CAKeydramAnimation ...， 第65行： CGMutablePathRef...， 第66行CGPathMoveToPoint ... ， 第67行 printf....，

第68行：

CGPathAddQuadCurveToPoint ( positionPath, NULL, [self.view layer].position.x + 600.0f , [self.view layer].position.y , [self.view layer].position.x , [self.view layer].position.y );

這一行表示先將圖移至control position -- ( [self.view layer].position.x + 600.0f , [self.view layer].position.y )，再放手讓其彈向 end position --- ( [self.view layer].position.x , [self.view layer].position.y )。而設定的control position及end position正好只是先向右600.0f 個位置，所以是平移後彈回。

若將其後的 CGPathAddQuadCurveToPoint 都去掉，可看到"慢動作"的第五行。

(E)loadView，見下圖：

76行，[[[UIBarButtonItem initWithTitle:@"DoIt" style:UIBarButtonItemStylePlain target:self action:@selector(doit)] autorelease];

會放個Bar Button DoIt，並給其action doit。