相片翻轉動畫實作

  

在 iOS 中，有一動畫形式就是 View 與 View 之間切換的翻轉動畫，常見就是在 Utility 的 template 中，當我們按下 info button 就會翻轉到背後的設定頁面。除了利用 UIView animation 外，我們也可以利用 Core Animation 來達成同樣的效果，以下介紹如何讓兩張相片，利用翻轉來相互切換。

開啟 Xcode 專案，選擇 View-Based Template ，然後在 viewcontroller 中置入兩張相片的 CALayer 物件，這兩個 CALayer 物件能夠顯示這兩張圖片，不知如何將圖片置入 CALayer 中，請參考使用 CALayer 展示大小不同的影像。首先設定產生反轉的動畫物件，程式碼如下：

-(CAAnimation *)createFlipAnimationWithDuration:(NSTimeInterval)aDuration forLayerOnTop:(BOOL)isTopLayer{
//設定 CABasicAnimation 物件，設定動畫的 keypath 為以 Y 軸做旋轉
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];
//根據不同的 Layer 設定翻轉的起始與最後數值
CGFloat startValue = isTopLayer ? 0.0 : M_PI;
CGFloat endValue = isTopLayer ? -M_PI : 0.0;

animation.fromValue = [NSNumber numberWithDouble:startValue];
animation.toValue = [NSNumber numberWithDouble:endValue];
//設定當動畫結束後，該物件停留在最後位置，而不是回到開始位置
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;

animation.duration = aDuration;

return animation;
}


上述程式碼讓我們可以決定該 CALayer 當其 "畫面" 朝上時，與 "畫面" 朝下時，個別的起始值與最後位置的數值，也就是翻轉的角度。

當有了翻轉動畫的物件之後，再來就是要執行翻轉動畫，在以下的程式碼中，將針對兩張相片的 CALayer 進行翻轉動畫的執行。

-(void)performForwardFlipWithTopLayer:(CALayer*)upLayer andBottomLayer:(CALayer*)downLayer{
[CATransaction begin];
CATransform3D aTransform = CATransform3DIdentity;
aTransform.m34 = 1.0/-1800;

upLayer.transform = aTransform;
downLayer.transform = aTransform;

[upLayer addAnimation:[self createFlipAnimationWithDuration:1 forLayerOnTop:YES] forKey:@"flip"];
[downLayer addAnimation:[self createFlipAnimationWithDuration:1 forLayerOnTop:NO] forKey:@"flip"];
[CATransaction commit];
}


在這些動畫設定之前，還有一個關鍵設定就是必須將兩個 CALayer 的 doubleSided 屬性設定為 NO。若不設定，讀者可以試試看會看到怎樣的效果。Good luck！