07d-CoreAnim-Jump

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行,CGPathCreateMutableCGPath內,

CGPathCreateMutable產生指向CGPathMutable的pointer--CGMutablePathRef

56行,CGPathMoveToPointsCGPath內,

CGPathMoveToPoints,有四個parameter:

CGMutablePathRef path, //是個path

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

CGFloat x, //新位置 x coordinate

CGFloat y //新位置 y coordinate

57行,CGPathAddQuadCurveToToPointsCGPath內,

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。