CoreAnimation 視覺效果

CoreAnimation 視覺效果

---

    CoreAnimation 目錄

    博客園MakeDown支持不佳,若有須要請進GitHub

    iPhone手機的視覺效果是十分優秀的,所以做爲iOS工程師必定要對其視覺效果的處理有必定的瞭解.本編博客主要內容以下.

• 圓角
• 圖層邊框
• 陰影
• 圖層蒙板

    首先咱們先在主視圖上添加兩個普通的視圖,稍後對其進行相應的視覺效果處理.

圖片一

圓角

    圓角是iOS的獨特之處,其讓咱們感受咱們所看到的一切並非那麼的生硬.我將讓綠色視圖產生一個合適的圓角.

圖片二

    綠色視圖的圓角讓咱們以爲很舒服,並且實現起來也十分簡單,只須要下面的一行代碼.

self.customView.layer.cornerRadius = 20;

    綠色視圖達到了咱們想要的效果,可是上面的小視圖遮住了綠色視圖的圓角,於此同時咱們也不但願將小時圖remove所以咱們可能須要 masksToBounds,咱們將其設置爲 YES就可已獲得如下的效果.

圖片三

    這樣看起來很舒服,與此同時小視圖的效果咱們也保存了下來.

圖層邊框

    在某些場景咱們可能會用到相似於相框同樣效果的邊框,那樣可讓視圖看起來更加豐滿一些,就像下圖同樣.

圖片四

    圖片四與圖片三相比,更能夠突出邊框所包括的視圖內容,想要達到此效果很簡單.

// 邊框顏色
self.customView.layer.borderColor = [UIColor blueColor].CGColor;
// 邊框寬度
self.customView.layer.borderWidth = 2;

陰影

    以上兩個視圖效果屬性是很經常使用也是很簡單的,接下來即是一個很經常使用可是稍有複雜的屬性-陰影.先看一下簡單的效果(爲了便於觀察,我將此圖片放大一點.).

圖片五

    能夠發現綠色視圖的四邊有着藍色的陰影,看起來綠色視圖非常顯眼,陰影的效果也正是如此,讓有陰影存在的視圖更加凸顯.實現圖片五的效果咱們須要添加如下代碼.

[self.topView removeFromSuperview];// 刪除小視圖 避免影響陰影的展現
self.customView.layer.shadowOpacity = 1;// (0.0:不可見 ~ 1.0:徹底不透明)
self.customView.layer.shadowColor = [UIColor blueColor].CGColor;
self.customView.layer.shadowOffset = CGSizeZero;
self.customView.layer.shadowRadius = 5;// 模糊度(半徑) 度數值越大越模糊

• shadowOpacity:該屬性是控制陰影的可見度的,正如備註,若是設置爲0陰影將不會展現.
• shadowColor:該屬性是設置陰影的顏色.
• shadowOffset:該屬性是設置陰影的偏移量,是CGSize類型.例如(0,2)水平不偏移,垂直向下偏移2.
• shadowRadius:該屬性字面理解爲陰影的半徑,實際效果是設置的值越大,模糊區域越寬,模糊的效果也就越明顯.

    以上是陰影的正常效果,可是當我設置 masksToBounds 爲 YES的時候陰影將會消失.由於masksToBounds的效果就是將圖層意外的效果剪裁掉.

圖片六

    但是實際情況下咱們徹底是存在陰影效果與masksToBounds同時使用的,那麼咱們就須要作一些其餘的操做.

1) 首先咱們對主圖層進行陰影,圓角屬性的設置.

self.customView.layer.shadowOpacity = 1;// (0.0:不可見 ~ 1.0:徹底不透明)
    self.customView.layer.shadowColor = [UIColor blueColor].CGColor;
    self.customView.layer.shadowOffset = CGSizeMake(0, 10);
    self.customView.layer.shadowRadius = 5;// 模糊度(半徑) 度數值越大越模糊

2) 構建一個新的圖層,此圖層設置圓角以及設置masksToBounds.

UIView * tempLayerTwo = [[UIView alloc]init];
tempLayerTwo.frame = self.customView.bounds;
tempLayerTwo.backgroundColor = [UIColor greenColor];
tempLayerTwo.layer.cornerRadius = 20;
tempLayerTwo.layer.masksToBounds = YES;

3) 將新構建的圖層add到主圖層上,運行查看效果.

[self.customView addSubview:tempLayerTwo];

圖片七

    到此爲止陰影的基本操做以及使用技巧已經介紹的大部分了,接着有一個較爲實用的屬性是:shadowPath.其能夠根據path繪製出相應的陰影.

CGMutablePathRef squarePath = CGPathCreateMutable();
CGPathAddRect(squarePath, NULL, self.customView.bounds);
self.customView.layer.shadowPath = squarePath;
CGPathRelease(squarePath);

圖片八

圖層蒙板

    圖層蒙板聽起來有一點點陌生,可是理解起來仍是十分容易的,舉個栗子.我如今有兩個圖層一個圖層是五角星的形狀可是顏色是紫色的,咱們偉大祖國的五角星是黃色的,湊巧的是個人另外一個圖層是黃色的,那麼這個時候我就能夠利用黃色圖層的mask屬性來簡單的構造一個黃色的五角星.這裏作了一個不知道是什麼形狀的圖片.

圖片九

    我經過添加下面的代碼就能夠將其顏色改變爲綠色.

CALayer * makeLayer = [[CALayer alloc]init];
makeLayer.frame = self.customView.bounds;
UIImage * makeImage = [UIImage imageNamed:@"black"];
makeLayer.contents = (__bridge id)makeImage.CGImage;

self.customView.layer.mask = makeLayer;

圖片十