iOS核心動畫筆記3-視覺效果

視覺效果

1. 圓角

CALayer conrnerRadius屬性控制圖層角度的曲率. 浮點數, 默認是0, 這個曲率值只能影響背景顏色而不影響背景圖片或是子圖層.CALayer還有個maskToBounds屬性,設置爲YES時候,圖層裏面全部東西都會被截取.

2. 圖層邊框

CALayer另外兩個很是有用的屬性就是borderWidth,borderColor,這兩個屬性定義了圖層邊的繪製樣式,這條線沿着圖層的bounds繪製,同事也包含圖層的角.

邊框是繪製在圖層邊界裏面的,並且在全部子內容以前,也在子圖層以前.

3. 陰影

陰影相關的屬性:

shadowRadius; //陰影虛化半徑
shadowColor; //陰影顏色, 默認是黑色
shadowOffset; //陰影偏移
shadowOpacity; //陰影的不透明度
shadowPath; //陰影路徑,CGPath類型

• shadowOpacity: 表示不透明度,1:徹底不透明; 0, 徹底透明.
• shadowOffset: 控制陰影的方向和距離,是一個CGSiz的值,寬度控制橫向偏移,高度控制縱向偏移,默認值是{0, -3}, 相對y向上偏移3個點. 緣由是shadow最初是在mac OS上面世的, 而Mac OS上,y軸方向和iOS上y軸方向是顛倒的, 在Mac上shadowOffset默認值是向下偏移的,因此形成iOS上默認值向上偏移.
• shadowRadius: 一般, 越是須要讓視圖或者控件很是醒目獨立於背景以外, 就應該給shadowRadius設置一個稍大的值, 陰影月模糊, 圖層的深度看上去就會越明顯.

4. 陰影裁剪

圖層的邊框繼承自本圖層的邊框和cornerRadius,可是圖層的陰影繼承自內容的外形(包括子圖層), 而不是根據邊界和角半徑來肯定. 爲了計算出陰影的形狀,CoreAnimation會將寄宿圖(包括子視圖)考慮在內,而後經過這些來完美搭配圖層形狀從而建立一個陰影.

當陰影和裁剪扯上關係, 就會出現很麻煩的限制, 要裁剪的話, 在圖層邊框以外全部繪製都會被裁減掉, 包括陰影, 可是又須要陰影, 怎麼辦呢? 解決就是, 陰影圖層做爲容器圖層, 裁剪圖層做爲子圖層, 這樣能夠完美解決.

5. shadowPath屬性

從上上一節已經瞭解到, 陰影並不老是方的, 而是根據圖層以及子圖層的內容計算出來的. 可是有時候計算陰影也是給長消耗資源的, 尤爲是圖層中有不少子圖層時候.

若是咱們事先知道陰影形狀是什麼樣子的, 那麼能夠經過制定shadowPath來提升性能. 值是一個CGPathRef類型的. CGPath是 Core Graphics 對象, 能夠制定任意的矢量圖形. 咱們能夠經過這個屬性獨立於圖層以外製定陰影的外形.

複雜的形狀, 咱們能夠經過UIBezierPath來繪製.

6. 圖層蒙版

CALayer有個mask屬性, 這個屬性自己是一個CALayer類型, 有和其它圖層同樣的繪製和佈局屬性. 它相似於一個子圖層, mask圖層中被繪製或者有內容的區域是透明的, 能夠看到父圖層上的內容, 就像是ps上的蒙版效果. mask圖層定義了父圖層的可見部分.

mask圖層的color屬性是不關緊要的, 重要的圖層的輪廓, mask圖層實心的部分就是父圖層會被保留下來的部分.

示例代碼:

//測試mask屬性
    CALayer *bgLayer = [CALayer layer];
    bgLayer.backgroundColor = [UIColor redColor].CGColor;
    bgLayer.frame = CGRectMake(0, 0, 100, 50);
    [self.maskView.layer addSublayer:bgLayer];
    
    self.maskView.backgroundColor = [UIColor blueColor];
    CALayer *maskLayer = [CALayer layer];
    maskLayer.contentsGravity = kCAGravityCenter;
    maskLayer.contents = (__bridge id)image.CGImage;
    maskLayer.frame = self.layerView.bounds;
    self.maskView.layer.mask = maskLayer;
    /*
     看到這個屬性, 猜想這個屬性能夠實現的功能:
        1. 文本, 一個文字, 一半一個顏色.
        2. maskView上放個shapeLayer, 有背景色, mask是一個被填充滿的layer, 能夠經過控制shapeLayer來控制被填充的程度, 這個能夠實現不少功能, 好比 進度條, 好比按住開始錄音那個動畫效果, 等等等等.
     */

效果:

7. 拉伸過濾

這個還沒看懂....

8. 組透明

這個文章最後一小節:

http://wiki.jikexueyuan.com/project/ios-core-animation/visual-effect.html