一. Core Animation類簡介
-
Core Animation
,譯為核心動畫,是蘋果提供的非常強大的動畫處理API
-
Core Animation
的動畫執(zhí)行過程都是在后臺操作的,不會阻塞主線程宴倍。 -
Core Animation
是作用于CALayer上
的動畫张症,每一個繼承與UIView
的子類都有一個layer屬性,可以通過這個layer來為更改相應(yīng)view的形式啊楚,或者做動畫吠冤。 -
Core Animation
框架是基于OpenGL與CoreGraphics圖像處理框架的一個跨平臺的動畫框架。將圖像讀取成位圖恭理,通過硬件的處理拯辙,實現(xiàn)動畫效果
1. CoreAnimation與UIKit框架的關(guān)系
2. Core Animation類的繼承關(guān)系圖
在CoreAnimation中,大部分的動畫效果都是通過Layer層來實現(xiàn)的,通過CALayer涯保,我們可以組織復(fù)雜的層級結(jié)構(gòu)诉濒。Layer層并不決定視圖的展現(xiàn),它只是存儲了視圖的幾何屬性狀態(tài)
3. 錨點對幾何屬性的影響
@property CGPoint anchorPoint;
@property CGPoint position;
-
position
:它是用來設(shè)置當(dāng)前的layer在父控件當(dāng)中的位置的.
所以它的坐標(biāo)原點.以父控件的左上角為(0.0)點. -
anchorPoint
: "錨點"夕春,取值范圍都是0~1未荒,默認值為(0.5, 0.5)。決定著CALayer身上的哪個點會在position屬性所指的位置
position與anchorPoint關(guān)系
二. CABasicAnimation
CAAnimation
//動畫速度
@property(nullable, strong) CAMediaTimingFunction *timingFunction;
kCAMediaTimingFunctionLinear 線性及志,勻速
kCAMediaTimingFunctionEaseIn 漸進片排,逐漸進入,然后加速完成
kCAMediaTimingFunctionEaseOut 漸出速侈,動畫全速進入率寡,然后緩慢完成
kCAMediaTimingFunctionEaseInEaseOut 漸進漸出
//默認為YES,代表動畫執(zhí)行完畢后就從圖層上移除倚搬,圖形會恢復(fù)到動畫執(zhí)行前的狀態(tài)冶共。
//如果想讓圖層保持顯示動畫執(zhí)行后的狀態(tài),那就設(shè)置為NO每界,不過還要設(shè)置fillMode
@property(getter=isRemovedOnCompletion) BOOL
CAMediaTiming
CAMediaTiming
是CAAnimation
遵守的協(xié)議
beginTime 動畫的開始時間(如果超過的duration捅僵,那么動畫不會開始)
duration 動畫的持續(xù)時間
speed 動畫的速度
repeatCount 重復(fù)次數(shù),默認為0眨层,無限重復(fù)可以設(shè)置為HUGE_VALF或者MAXFLOAT
repeatDuration 動畫重復(fù)時間庙楚,默認為0
fillMode 決定當(dāng)前對象在非active時間段的行為。(要想fillMode有效谐岁,最好設(shè)置removedOnCompletion = NO)
fillMode類型:
kCAFillModeRemoved 這個是默認值醋奠,也就是說當(dāng)動畫開始前和動畫結(jié)束后,動畫對layer都沒有影響伊佃,動畫結(jié)束后窜司,layer會恢復(fù)到之前的狀態(tài)
kCAFillModeForwards 當(dāng)動畫結(jié)束后,layer會一直保持著動畫最后的狀態(tài)
kCAFillModeBackwards 在動畫開始前航揉,只需要將動畫加入了一個layer塞祈,layer便立即進入動畫的初始狀態(tài)并等待動畫開始。
kCAFillModeBoth 這個其實就是上面兩個的合成,動畫加入后開始之前帅涂,layer便處于動畫初始狀態(tài)议薪,動畫結(jié)束后layer保持動畫最后的狀態(tài)
CAAnimationDelegate 代理
// 動畫開始的時候調(diào)用
- (void)animationDidStart:(CAAnimation *)anim;
// 動畫停止的時候調(diào)用
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;
CABasicAnimation
1.創(chuàng)建動畫
2.設(shè)置相關(guān)屬性
3.將動畫添加到某個layer
// 創(chuàng)建動畫 Layer的屬性作為關(guān)鍵路徑進行注冊。
+ (instancetype)animationWithKeyPath:(nullable NSString *)path;
// 添加動畫
- (void)addAnimation:(CAAnimation *)anim forKey:(nullable NSString *)key;
// 移除動畫
- (void)removeAnimationForKey:(NSString *)key;
- (void)removeAllAnimations;
keyPath
為CALayer的屬性值媳友,并對它的值進行修改斯议,以達到對應(yīng)的動畫效果,需要注意的是部分屬性值是不支持動畫效果的醇锚。
transform.scale (比例轉(zhuǎn)換)哼御、
transform.scale.x
transform.scale.y
transform.rotation.z
transform.rotation (旋轉(zhuǎn))
transform.rotation.x (繞x軸旋轉(zhuǎn))
transform.rotation.y (繞y軸旋轉(zhuǎn))
transform.rotation.z (繞z軸旋轉(zhuǎn))
opacity (透明度)
margin 布局
backgroundColor (背景色)
cornerRadius (圓角)
borderWidth (邊框?qū)?
bounds (大小)
frame (大小位置)
hidden (顯示隱藏)
contents (內(nèi)容)
contentsRect (內(nèi)容大小)
cornerRadius (大小)
mask
masksToBounds
shadowColor(陰影色)坯临、
shadowOffset
shadowOpacity
shadowOpacity
動畫的起始與結(jié)束位置
// 指定屬性(keyPath)開始的值
@property(nullable, strong) id fromValue;
// 指定屬性結(jié)束時的值
@property(nullable, strong) id toValue;
// 在原有的值上改變
@property(nullable, strong) id byValue;
fromValue
和toValue
不為空:動畫的值由fromValue變化到toValuefromValue
和byValue
不為空:動畫的值由fromValue變化到fromValue+byValue
byValue
和toValue
不為空:動畫的值由toValue-byValue
變化到toValue只有fromValue
不為空:動畫的值由fromValue
變化到layer的當(dāng)前
狀態(tài)值只有toValue
不為空:動畫的值由layer當(dāng)前
的值變化到toValue
只有byValue
不為空:動畫的值由layer當(dāng)前
的值變化到layer當(dāng)前的值+byValue
CABasicAnimation可以設(shè)定keyPath的起點,終點的值恋昼,動畫會沿著設(shè)定點進行移動看靠,CABasicAnimation可以看成是只有兩個關(guān)鍵點的特殊的CAKeyFrameAnimation。
演示
- (void)position {
CABasicAnimation * ani = [CABasicAnimation animationWithKeyPath:@"position"];
ani.toValue = [NSValue valueWithCGPoint:self.centerShow.center];
ani.removedOnCompletion = NO;
ani.fillMode = kCAFillModeForwards;
ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[self.cartCenter.layer addAnimation:ani forKey:@"PostionAni"];
}
CAAnimationGroup 組動畫
CAAnimationGroup
可以保存一組動畫對象(比如可以把前面的2中動畫結(jié)合起來)液肌,將CAAnimationGroup
對象加入層后挟炬,組中所有動畫對象可以同時并發(fā)運行
。也可以讓動畫按照時間依次串行
/// 依次串行
-(void)animationGroup3{
CFTimeInterval currentTime = CACurrentMediaTime();
//位移動畫
CABasicAnimation *anima1 = [CABasicAnimation animationWithKeyPath:@"position"];
anima1.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, SCREEN_HEIGHT/2-75)];
anima1.toValue = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/2, SCREEN_HEIGHT/2-75)];
anima1.beginTime = currentTime;
anima1.duration = 1.0f;
anima1.fillMode = kCAFillModeForwards;
anima1.removedOnCompletion = NO;
[_animationLayer addAnimation:anima1 forKey:@"aa"];
//縮放動畫
CABasicAnimation *anima2 = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
anima2.fromValue = [NSNumber numberWithFloat:0.8f];
anima2.toValue = [NSNumber numberWithFloat:2.0f];
anima2.beginTime = currentTime+1.0f;
anima2.duration = 1.0f;
anima2.fillMode = kCAFillModeForwards;
anima2.removedOnCompletion = NO;
[_animationLayer addAnimation:anima2 forKey:@"bb"];
//旋轉(zhuǎn)動畫
CABasicAnimation *anima3 = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
anima3.toValue = [NSNumber numberWithFloat:M_PI*4];
anima3.beginTime = currentTime+2.0f;
anima3.duration = 1.0f;
anima3.fillMode = kCAFillModeForwards;
anima3.removedOnCompletion = NO;
[_animationLayer addAnimation:anima3 forKey:@"cc"];
}
CAKeyframeAnimation 關(guān)鍵幀動畫
與CABasicAnimation
不同的是CAKeyframeAnimation
會使用一個NSArray
保存一組關(guān)鍵幀嗦哆,而且通過繪圖來指定路徑谤祖。而CABasicAnimation
只能從一個數(shù)值(fromValue
)變換成另一個數(shù)值(toValue
)
-(void)keyFrameAnimation{
CAKeyframeAnimation *anima = [CAKeyframeAnimation animationWithKeyPath:@"position"];
NSValue *value0 = [NSValue valueWithCGPoint:CGPointMake(0, SCREEN_HEIGHT/2-50)];
NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/3, SCREEN_HEIGHT/2-50)];
NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/3, SCREEN_HEIGHT/2+50)];
NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH*2/3, SCREEN_HEIGHT/2+50)];
NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH*2/3, SCREEN_HEIGHT/2-50)];
NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-50)];
anima.values = [NSArray arrayWithObjects:value0,value1,value2,value3,value4,value5, nil];
anima.duration = 2.0f;
anima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];//設(shè)置動畫的節(jié)奏
anima.delegate = self;//設(shè)置代理,可以檢測動畫的開始和結(jié)束
[_demoView.layer addAnimation:anima forKey:@"keyFrameAnimation"];
}