一.CALayer
1.概念:
在iOS中,能看見的基本上都是UIView. 在創建UIView時UIView會自動創建一個圖層(即CALayer對象),通過UIView的layer屬性可以訪問這個圖層.
當UIView需要顯示到屏幕上時,會調用drawRect方法進行繪圖.并且會將所有內容繪制在自己的圖層上.繪圖完畢后,系統會將圖層拷貝到屏幕上.于是就完成了UIView的顯示.
2.基本使用:
通過操作CALayer對象,可以很方便地調整UIView的一些外觀屬性,比如:
陰影
圓角大小
邊框寬度和顏色
- (void)viewLayer
{
// 設置陰影透明度
_redView.layer.shadowOpacity = 1;
// 設置陰影顏色
_redView.layer.shadowColor = [UIColor yellowColor].CGColor;
// 設置陰影圓角半徑
_redView.layer.shadowRadius = 10;
// 設置圓角半徑
_redView.layer.cornerRadius = 50;
// 設置邊框半徑
_redView.layer.borderColor = [UIColor whiteColor].CGColor;
// 設置邊框半徑
_redView.layer.borderWidth = 2;
}
效果圖:
還有一些別的
// 旋轉
_imageView.layer.transform = CATransform3DMakeRotation(M_PI, 1, 1, 0);
// 平移
_imageView.layer.transform = CATransform3DMakeTranslation(200, 200, 0);
// 縮放
_imageView.layer.transform = CATransform3DMakeScale(1, 0.5, 1);
// 利用KVC改變形變
NSValue *rotation = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI, 1, 1, 0)];
[_imageView.layer setValue:rotation forKeyPath:@"transform"];
注意:
CALayer是定義在QuartzCore框架中的[Core Animation]
CGImageRef, CGColorRef 兩種數據類型是定義在CoreGraphics框架中的.
UIColor, UIImage是定義在UIKit框架中.
QuartzCore框架和CoreGraphics框架是可以跨平臺使用的,在iOS和Mac OS X上都能使用.
但是UIKit只能在iOS中使用.
所以,為了保證可移植性, QuartzCore不能使用UIImage, UIColor, 只能使用CGImageRef, CGColorRef.
3.position和anchorPoint
/* The position in the superlayer that the anchor point of the layer's
* bounds rect is aligned to. Defaults to the zero point. Animatable. */
@property CGPoint position;
// 用來設置CALayer在父層中的位置.
// 以父層的左上角為原點(0, 0).
/* Defines the anchor point of the layer's bounds rect, as a point in
* normalized layer coordinates - '(0, 0)' is the bottom left corner of
* the bounds rect, '(1, 1)' is the top right corner. Defaults to
* '(0.5, 0.5)', i.e. the center of the bounds rect. Animatable. */
@property CGPoint anchorPoint;
// 定位點
// 決定著CALayer的哪個點會在position屬性所指的位置.
// 以自己的左上角為原點(0, 0)
// 她的(x, y)取值范圍都是0 ~ 1, 默認是(0.5, 0.5) 也就是中點.
二.隱式動畫
每個UIView內部都默認關聯著一個CALayer.除了該CALayer以外,也就是手動創建的CALayer,都存在著隱式動畫.
對手動創建的CALayer的部分屬性做修改時,默認會自動產生一些動畫效果.而且蘋果API的注釋里也寫得很清楚.
ps:取消動畫效果的話:
// 開啟事務
[CATransaction begin];
// 取消隱世動畫
[CATransaction setDisableActions:YES];
_layer.position = CGPointMake(100, 100);
// 提交事務
[CATransaction commit];
三.核心動畫
CAAnimation繼承結構:
CAAnimation的CAMediaTimingFunction的屬性
kCAMediaTimingFunctionLinear（線性）：勻速，給你一個相對靜態的感覺
kCAMediaTimingFunctionEaseIn（漸進）：動畫緩慢進入，然后加速離開
kCAMediaTimingFunctionEaseOut（漸出）：動畫全速進入，然后減速的到達目的地
kCAMediaTimingFunctionEaseInEaseOut（漸進漸出）：動畫緩慢的進入，中間加速，然后減速的到達目的地。
1.CABasicAnimation
改變位置:
- (void)position {
// 創建動畫對象
CABasicAnimation *anime = [CABasicAnimation animation];
// 設置動畫的屬性(layer的屬性)
anime.keyPath = @"position";
// 設置屬性改變的值
anime.toValue = [NSValue valueWithCGPoint:CGPointMake(200, 200)];
// 設置動畫時長
anime.duration = 2;
// 取消反彈
// 動畫執行完畢之后不要把動畫移除
anime.removedOnCompletion = NO;
// 保持最新的位置
anime.fillMode = kCAFillModeForwards;
// 給圖層添加了動畫
[_layer addAnimation:anime forKey:nil];
}
2. CAKeyframeAnimation
- (void)value {
CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
// 設置動畫屬性
anim.keyPath = @"position";
NSValue *v1 = [NSValue valueWithCGPoint:CGPointZero];
NSValue *v2 = [NSValue valueWithCGPoint:CGPointMake(160, 160)];
NSValue *v3 = [NSValue valueWithCGPoint:CGPointMake(270, 0)];
anim.values = @[v1,v2,v3];
anim.duration = 2;
[_redView.layer addAnimation:anim forKey:nil];
}
3.CATransition(不是CATransaction) 主要!!!!
-(void)imageChange {
_index++;
if (_index == 4) {
_index = 1;
}
NSString *fileName = [NSString stringWithFormat:@"%d",_index];
_imageView.image = [UIImage imageNamed:fileName];
CATransition *anim = [CATransition animation];
anim.type = @"pageCurl";
anim.subtype = kCATransitionFromLeft;
// anim.startProgress = 0.5;
anim.duration = 2;
[_imageView.layer addAnimation:anim forKey:nil];
}
4. CAAnimationGroup
- (void)groupAnime {
CABasicAnimation *rotation = [CABasicAnimation animation];
rotation.keyPath = @"transform.rotation";
rotation.toValue = @M_PI_2;
CABasicAnimation *position = [CABasicAnimation animation];
position.keyPath = @"position";
position.toValue = [NSValue valueWithCGPoint:CGPointMake(100, 250)];
CABasicAnimation *scale = [CABasicAnimation animation];
scale.keyPath = @"transform.scale";
scale.toValue = @0.5;
CAAnimationGroup *group = [CAAnimationGroup animation];
group.animations = @[rotation,position,scale];
group.duration = 2;
// 取消反彈
group.removedOnCompletion = NO;
group.fillMode = kCAFillModeForwards;
[_redView.layer addAnimation:group forKey:nil];
}
另外需要注意:
核心動畫都是假象，不能改變layer的真實屬性的值
展示的位置和實際的位置不同。實際位置永遠在最開始位置
最好是將核心動畫 用在NavigationController的push或者一系列的切換動畫中.或者一些點擊效果.
