iOS Core Animation之CALayer心得

  使用CALayer的mask實現注水動畫效果

Core Animation一直是iOS比較有意思的一個主題，使用Core Animation能夠實現很是平滑的炫酷動畫。Core animtion的API是較高級的封裝，使用便捷，使得咱們免於本身使用OpenGL實現動畫。本文主要介紹如何使用CALayer的mask實現一個雙向注水動畫（姑且這麼叫吧）。



瞭解CALayer的mask

以上是CALayer的頭文件關於mask的說明，mask實際上layer內容的一個遮罩。
若是咱們把mask是透明的，實際看到的layer是徹底透明的，也就是說只有mask的內容不透明的部分和layer疊加的部分纔會顯示出來，效果以下：



設計的思路參考[《基於Core Animation的KTV歌詞視圖的平滑實現》](http://www.iwangke.me/2014/10/06/how-to-implement-a-core-animation-based-60-fps-ktv-lyrics-view/)，[Facebook Shimmer](https://github.com/facebook/Shimmer)。

在`View`上重疊放置兩個`UIImageView`: `grayHead`&`greenHead`，默認`greenHead`會遮擋住`grayHead`。爲`greenHead`設置一個`mask`，這個mask不是普通的`mask`，它由兩個`subLayer`:`maskLayerUp``maskLayerDown`組成。默認狀況下，`subLayer`都顯示在`mask`內容以外，此時`mask`實際上透明的，由此`greenHead`也是透明的。如今咱們但願`greenHead`從左上角和右下角慢慢顯示內容，那麼咱們只須要從兩個方向爲`greenHead`填充內容就能夠了。

[完整代碼](https://github.com/wuwen1030/CALayerAnimationDemo)

   小結

CALayer提供另一種操做UI的手段，雖然它提供的API比UIView較底層，但它能提供更加豐富的功能和更高的性能(CALayer的動畫是在專門的線程渲染的)。涉及到複雜且性能要求高的UI界面，CALayer的做用就比較明顯了，好比AsyncDisplayKit。經過本片文章，咱們其實也能看出CALayer的一個用處，一般咱們處理圓角時會直接去修改CALayer的cornerRadius，但這種作法性能比較差，尤爲是放在列表裏的時候，如今咱們有了mask，這樣咱們能夠直接改變layer的mask，而不會影響到圖形渲染的性能。