核心動畫:
在iOS中核心動畫分爲幾類:基礎動畫(CABasicAnimation)、關鍵幀動畫(CAKeyframeAnimation)、動畫組(CAAnimationGroup)、轉場動畫(CATransition)
相關知識點以及概念:
CAAnimation: 核心動畫的基礎類,不能直接使用,負責動畫運行時間、速度的控制,本身實現了CAMediaTiming協議。
CAPropertyAnimation:屬性動畫也是基類(通過屬性進行動畫設置,注意是動畫屬性),不能直接使用。
CABasicAnimation:基礎動畫,通過屬性修改進行動畫參數控制,只有初始狀態和結束狀態。
CAKeyframeAnimation:關鍵幀動畫,同樣是通過屬性進行動畫參數控制,但是同基礎動畫不同的是它可以有多個狀態控制。
CAAnimationGroup:動畫組,動畫組是一種組合模式設計,可以通過動畫組來進行所有動畫行爲的統一控制,組中所有動畫效果可以併發執行。
CATransition:轉場動畫,主要通過濾鏡進行動畫效果設置。
基礎動畫、關鍵幀動畫都屬於屬性動畫,就是通過修改屬性值產生動畫效果,開發人員只需要設置初始值和結束值,中間的過程動畫(又叫“補間動畫”)由系統自動計算產生。和基礎動畫不同的是關鍵幀動畫可以設置多個屬性值,每兩個屬性中間的補間動畫由系統自動完成,因此從這個角度而言基礎動畫又可以看成是有兩個關鍵幀的關鍵幀動畫
創建基礎動畫 需要通過fromValue 和toValue 屬性來指定一個開始值和結束值 當添加基礎動畫到圖層中的時候 它纔會開始變化
autoreverses: 當設定這個屬性爲 YES 時,在它到達目的地之後,會以動畫的方式返回到開始的值
duration 設定開始值到結束值花費的時間 期間會被速度得屬性影響
speed 默認的值爲 1.0.這意味着動畫播放按照默認的速度。如果你改變這個值爲 2.0,動畫會用 2 倍的速度播放。 這樣的影響就是使持續時間減半。如果你指定的持續時間爲 6 秒,速度爲 2.0,動畫就會播放 3 秒鐘---一半的 持續時間
把速度設置成0 就可以暫停動畫
repeatCount 默認的是 0,意味着動畫只會播放一次 這個不應該和 repeatDration 屬性一塊使用。(負數不是無限循環)
repeatDuration 這個屬性指定了動畫應該被重複多久。動畫會一直重複,直到設定的時間流逝完。它不應該和 repeatCount 一起使用
timingFunction 速度控制函數,控制動畫運行的節奏
timingFunction 屬性值:
kCAMediaTimingFunctionLinear(線性):勻速,給你一個相對靜態的感覺
kCAMediaTimingFunctionEaseIn(漸進):動畫緩慢進入,然後加速離開
kCAMediaTimingFunctionEaseOut(漸出):動畫全速進入,然後減速的到達目的地
kCAMediaTimingFunctionEaseInEaseOut(漸進漸出):動畫緩慢的進入,中間加速,然後減速的到達目的地。這個是默認的動畫行爲。
removedOnCompletion 默認爲YES,代表動畫執行完畢後就從圖層上移除,圖形會恢復到動畫執行前的狀態。如果想讓圖層保持顯示動畫執行後的狀態,那就設置爲NO,⭐️⭐️⭐️⭐️⭐️不過還要設置fillMode爲kCAFillModeForwards
fillMode 設置當前對象在非活動時間段的行爲 比如動畫開始之前或者動畫結束之後
fillMode屬性值(上面提到過 要想fillMode有效,需要設置removedOnCompletion = NO)
kCAFillModeRemoved 這個是默認值,也就是說當動畫開始前和動畫結束後,動畫對layer都沒有影響,動畫結束後,layer會恢復到之前的狀態
kCAFillModeForwards 當動畫結束後,layer會一直保持着動畫最後的狀態
kCAFillModeBackwards 在動畫開始前,只需要將動畫加入了一個layer,layer便立即進入動畫的初始狀態並等待動畫開始。
kCAFillModeBoth 這個其實就是上面兩個的合成.動畫加入後開始之前,layer便處於動畫初始狀態,動畫結束後layer保持動畫最後的狀態
CAPropertyAnimation
可以通過改變animationWithKeyPath來改變動畫的屬性:
transform.scale = 比例轉換
transform.scale.x
transform.scale.y
transform.rotation.z
opacity = 透明度
zPosition
backgroundColor 背景顏色
cornerRadius 圓角
borderWidth
bounds
contents
contentsRect
cornerRadius
frame
hidden
mask
masksToBounds
opacity
position
shadowColor
shadowOffset
shadowOpacity
shadowRadius
相關舉例代碼:
改變position位置
-(void)animiation1
{
CABasicAnimation 屬於屬性動畫 需要告訴它 咱們要改變的屬性是哪個 (把 屬性 當做 字符串傳遞)
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
toValue 設置動畫 要到哪個位置
animation.toValue = [NSValue valueWithCGPoint:CGPointMake(400, showLayer.position.y)];
animation.duration = 3;
animation.autoreverses = YES; //以動畫的形式回到當前位置
animation.fillMode = kCAFillModeBoth;//⭐️⭐️⭐️⭐️⭐️如果使用這個 必須要把removedOnCompletion設置爲NO
animation.removedOnCompletion = NO;
// 設置動畫慢進慢出
/*
CA_EXTERN NSString * const kCAMediaTimingFunctionLinear
__OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);
CA_EXTERN NSString * const kCAMediaTimingFunctionEaseIn
__OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);
CA_EXTERN NSString * const kCAMediaTimingFunctionEaseOut
__OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);
CA_EXTERN NSString * const kCAMediaTimingFunctionEaseInEaseOut
__OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);
CA_EXTERN NSString * const kCAMediaTimingFunctionDefault
__OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_3_0);
*/
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
添加動畫到圖層layer上
[showLayer addAnimation:animation forKey:@"標誌"];
}
改變bounds
-(void)animiation2
{
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"bounds"];
⭐️⭐️⭐️⭐️⭐️ valueWithCGRect 改變什麼屬性 就要有相對應的設置
UIImage *image = [UIImage imageNamed:@"2345"];
animation.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, image.size.width/3, image.size.height/3)];
animation.duration = 0.5;
animation.autoreverses = YES;
animation.repeatCount = HUGE; //HUGE 無窮大
// ⭐️⭐️⭐️⭐️⭐️ repeatCount = -1 在這兒不是無限循環
[showLayer addAnimation:animation forKey:@"標誌"];
}
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
[self animation3];
}
抖動
-(void)animation3
{
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@“transform.rotation.z"];
showLayer.anchorPoint = CGPointMake(1, 1);
animation.fromValue = @(-0.1);
animation.toValue = @(0.1);
animation.duration = 0.05;
animation.repeatCount = 2;
// 是否允許它以動畫的效果回去
animation.autoreverses = YES;
[showLayer addAnimation:animation forKey:@"抖動"];
}