學習動畫總結——視覺效果


圓角
CALayer有一個叫做conrnerRadius的屬性控制着圖層角的曲率。它是一個浮點數,默認為0(為0的時候就是直角),但是你可以把它設置成任意值。默認情況下,這個曲率值只影響背景顏色而不影響背景圖片或是子圖層。不過,如果把masksToBounds設置成YES的話,圖層里面的所有東西都會被截取。
當設置view 或者 layer的圓角的時候是相互不會影響的。

    UIView *temp = [[UIView alloc]initWithFrame:CGRectMake(50, 100, 200, 200)];
[self.view addSubview:temp];
temp.backgroundColor = [UIColor blueColor];

CALayer * layer = [CALayer layer];
layer.frame = CGRectMake(50, 50 , 100, 100);
layer.backgroundColor = [UIColor yellowColor].CGColor;
[temp.layer addSublayer:layer];
layer.cornerRadius = 20.0f;

UIView *temp2 = [[UIView alloc]initWithFrame:CGRectMake(50, 400, 200, 200)];
[self.view addSubview:temp2];
temp2.backgroundColor = [UIColor blueColor];
temp2.layer.cornerRadius = 20.f;

CALayer * layer2 = [CALayer layer];
layer2.frame = CGRectMake(50, 50 , 100, 100);
layer2.backgroundColor = [UIColor yellowColor].CGColor;
[temp2.layer addSublayer:layer2];

這里寫圖片描述

當將兩個view的layer層的位置改成 -50 ,-50 時候,此時的layer就在view的外邊。
這里寫圖片描述
當不想要外邊的時候可以設置masksToBounds 屬性為yes。我將temp2的masksToBounds設置為yes樂。就變成了如下效果。
這里寫圖片描述

圖層邊框
CALayer另外兩個非常有用屬性就是borderWidth和borderColor。二者共同定義了圖層邊的繪制樣式。這條線(也被稱作stroke)沿着圖層的bounds繪制,同時也包含圖層的角。
borderWidth是以點為單位的定義邊框粗細的浮點數,默認為0.borderColor定義了邊框的顏色,默認為黑色。
borderColor是CGColorRef類型,而不是UIColor,所以它不是Cocoa的內置對象。不過呢,你肯定也清楚圖層引用了borderColor,雖然屬性聲明並不能證明這一點。CGColorRef在引用/釋放時候的行為表現得與NSObject極其相似。但是Objective-C語法並不支持這一做法,所以CGColorRef屬性即便是強引用也只能通過assign關鍵字來聲明。

我將temp的邊框設置下看下效果。

    temp.layer.borderWidth = 10.0f;

這里寫圖片描述

temp的變化時加上了邊框,但是邊框並不會把寄宿圖或子圖層的形狀計算進來,如果圖層的子圖層超過了邊界,或者是寄宿圖在透明區域有一個透明蒙板,邊框仍然會沿着圖層的邊界繪制出來

陰影
陰影往往可以達到圖層深度暗示的效果。也能夠用來強調正在顯示的圖層和優先級(比如說一個在其他視圖之前的彈出框),不過有時候他們只是單純的裝飾目的。
給shadowOpacity屬性一個大於默認值(也就是0)的值,陰影就可以顯示在任意圖層之下。shadowOpacity是一個必須在0.0(不可見)和1.0(完全不透明)之間的浮點數。如果設置為1.0,將會顯示一個有輕微模糊的黑色陰影稍微在圖層之上。若要改動陰影的表現,你可以使用CALayer的另外三個屬性:shadowColor,shadowOffset和shadowRadius。
顯而易見,shadowColor屬性控制着陰影的顏色,和borderColor和backgroundColor一樣,它的類型也是CGColorRef。陰影默認是黑色,大多數時候你需要的陰影也是黑色的。
shadowOffset屬性控制着陰影的方向和距離。它是一個CGSize的值,寬度控制這陰影橫向的位移,高度控制着縱向的位移。shadowOffset的默認值是 {0, -3},意即陰影相對於Y軸有3個點的向上位移。
為什么要默認向上的陰影呢?盡管Core Animation是從圖層套裝演變而來(可以認為是為iOS創建的私有動畫框架),但是呢,它卻是在Mac OS上面世的,前面有提到,二者的Y軸是顛倒的。這就導致了默認的3個點位移的陰影是向上的。在Mac上,shadowOffset的默認值是陰影向下的,這樣你就能理解為什么iOS上的陰影方向是向上的了。
shadowRadius屬性控制着陰影的模糊度,當它的值是0的時候,陰影就和視圖一樣有一個非常確定的邊界線(黑乎乎的,和之前的邊框很相似)。當值越來越大的時候,邊界線看上去就會越來越模糊和自然。蘋果自家的應用設計更偏向於自然的陰影,所以一個非零值再合適不過了。
再設置陰影的時候一定要設置shadowOpacity,我一開始就沒設置顯示不出來(。。。。)。
我將temp2和layer2 都設置陰影了。對於temp寄宿圖石油透明的話,通過陰影剪裁會計算出陰影形狀,通過這些來完美搭配圖層形狀從而創建一個陰影,效果如下圖。

    temp.layer.contents = (__bridge id _Nullable)(im.CGImage);
temp.layer.shadowOpacity = 5.0f;
temp.layer.shadowOffset = CGSizeMake(2, 5);
temp.layer.shadowRadius = 10.0f;

layer2.shadowOpacity = 5.f;
layer2.shadowOffset = CGSizeMake(- 5 , 9);
layer2.shadowRadius = 10.0f;
temp2.layer.shadowOpacity = 5.f;
temp2.layer.shadowOffset = CGSizeMake(-5, 9);
temp2.layer.shadowRadius = 10.0f;

這里寫圖片描述

shadowPath
shadowPath屬性指定任意陰影形狀,shadowPath是一個CGPathRef類型(一個指向CGPath的指針)。CGPath是一個Core Graphics對象,用來指定任意的一個矢量圖形。我們可以通過這個屬性單獨於圖層形狀之外指定陰影的形狀。

    CGMutablePathRef squarePath = CGPathCreateMutable();
CGPathAddEllipseInRect(squarePath, NULL, temp.bounds);
temp.layer.shadowPath = squarePath;

這里寫圖片描述
如果是一個矩形或者是圓,用CGPath會相當簡單明了。但是如果是更加復雜一點的圖形,UIBezierPath類會更合適,它是一個由UIKit提供的在CGPath基礎上的Objective-C包裝類。
圖層蒙板(這個地方理解不深)
CALayer有一個屬性叫做mask可以解決這個問題。這個屬性本身就是個CALayer類型,有和其他圖層一樣的繪制和布局屬性。它類似於一個子圖層,相對於父圖層(即擁有該屬性的圖層)布局,但是它卻不是一個普通的子圖層。不同於那些繪制在父圖層中的子圖層,mask圖層定義了父圖層的部分可見區域。
mask圖層的Color屬性是無關緊要的,真正重要的是圖層的輪廓。mask屬性就像是一個餅干切割機,mask圖層實心的部分會被保留下來,其他的則會被拋棄。如果mask圖層比父圖層要小,只有在mask圖層里面的內容才是它關心的,除此以外的一切都會被隱藏起來。(這個mask后續補充)

    UIImageView *ima = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"10.pic_hd"]];
ima.frame = CGRectMake(0, 0, 150, 150);
[temp addSubview:ima];
//遮罩
CALayer *maskLayer = [CALayer layer];
maskLayer.frame = ima.bounds;
UIImage *maskIamge = [UIImage imageNamed:@"1"];
maskLayer.contents = (__bridge id _Nullable)(maskIamge.CGImage);

temp.layer.mask = maskLayer;

上面圖就是


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com