iTunes的CoverFlow照片倒影效果很酷，因為它使一幅簡單的照片在界面上看起來很真實。

那麼如何用Core Animation的CALayer做出這種效果，以便增加動畫的處理，這就是下文要研究的課題。

在這個例子裡，我們做了三個CALayer，分別叫做imgLayer，用於顯示圖片；reflectionLayer，用於顯示倒影和shadowLayer，做為倒影的遮罩。這個例子假設您會使用Photoshop進行簡單的圖片處理。

 

 

 

假定我們已經創建了一個根層(root layer)叫做mainLayer。我們下面的所有層都做為mainLayer的子層出現。

一個照片的倒影效果由兩個部分組成，一部分是照片，當然另一部分是倒影。照片的顯示很簡單，我們只需要用任何方法把照片讀取成CGImageRef（可以參閱本站另一篇關於圖片數據類型轉換的文章），就可以做為contents提供給CALayer。代碼看起來是這樣的：

NSImage *img=[[NSImageimageNamed:@"cover2"] retain];

imgLayer.contents=(id)[selfnsImageToCGImageRef:img];

其中nsImageToCGImageRef:方法是我們用來將NSImage*轉化為CGImageRef的方法。這樣，imgLayer這個Core Animation層就會包含一個叫做cover2的圖片。將這個層添加到mainLayer中，這幅圖片就會顯示在屏幕上。以下是代碼：

 

[mainLayer addSublayer:imgLayer];

 

這樣，圖片就顯示出來了。那麼如何處理倒影呢？我們知道，CALayer是可以進行三維坐標轉換的，那麼我們要做的，就是復制一個imgLayer的內容（也就是我們要顯示的圖片），將它的y坐標進行倒轉，就會顯示出來。

 

reflectionLayer.contents=imgLayer.contents;

reflectionLayer.opacity = 0.5;

reflectionLayer.frame=CGRectOffset(imgLayer.frame, 0.5, -(imgLayer.bounds.size.height) + 0.5);

reflectionLayer.transform = CATransform3DMakeScale(1.0, -1.0, 1.0);

 

注意最後一行：我們使用了CATransform3DMakeScale這個方法，將reflectionLayer層的y坐標進行了轉換。但是問題來了，這樣一來，圖片顯示的有點太多了。一個圖片加一個倒置的圖片顯然還不是我們想要的效果。我們應該縮短這副倒影圖片，使它看起來融入了畫面中一樣，這樣才會比較像。

 

我們注意到，CALayer有一個屬性叫做.mask，可以將一個層做為當前層的遮罩。這正是我們需要的。要增加這個遮罩，我們有兩種方法去實現：1 Leopard中提供了一個叫做NSGradient的類，可以用來方便地制作漸變；2 我們自己畫一個需要的漸變模板。 這兩種方法都很簡單。這裡我們選擇第二種方法：做一個遮罩圖。用photoshop來實現：

 

 

創建一個空文檔，將背景設置為完全透明。在photoshop中選擇漸變，按照上圖的樣子畫一個漸變。注意前景色可以是任何顏色，背景色必須是透明。CALayer的mask屬性只會使用遮罩層的alpha通道，這個漸變是什麼顏色是沒關系的。

 

接下來的工作就很簡單了。我們創建一個shadowLayer層，把剛剛畫出來的遮罩圖讀進來，做為模板蒙在reflectionLayer上。bing! 工作完成。

 

 

shadowLayer.frame=reflectionLayer.bounds;

reflectionLayer.mask=shadowLayer;

 

需要注意的是，需要把shadowLayer的frame屬性設置為reflectionLayer的bounds，這樣才會在適當的地方設置模板。

 

全部的代碼在下面，有了這段簡單的代碼，你就可以對這個帶倒影的層設置任何你想要的動畫效果了。

 

 

 

imgLayer=[[CALayerlayer] retain];

imgLayer.bounds=CGRectMake(0, 0, 140, 120);

imgLayer.position=CGPointMake(mainLayer.bounds.size.width/2,