CAAnimation 核心動(dòng)畫(huà)

概念

  • Core Animation可以用在 Mac OS X 和 iOS平臺(tái). Core Animation的動(dòng)畫(huà)執(zhí)行過(guò)程是在后臺(tái)操作的.不會(huì)阻塞主線程. 要注意的是, Core Animation是直接作用在CALayer上的.并非UIView记餐。

  • 使用步驟:
    1、創(chuàng)建一個(gè)CAAnimation對(duì)象
    2褂删、設(shè)置一些動(dòng)畫(huà)的相關(guān)屬性
    3、給CALayer添加動(dòng)畫(huà)(addAnimation:forKey: 方法)
    4苹熏、停止CALayer動(dòng)畫(huà)(removeAnimationForKey: 方法)

  • 注意: 如果當(dāng)動(dòng)畫(huà)正在執(zhí)行的時(shí)候, 將程序退出到后臺(tái), 那么當(dāng)程序再次進(jìn)入前臺(tái)的時(shí)候就不執(zhí)行了元暴。
    原因: 因?yàn)樵俅芜M(jìn)入前臺(tái)后動(dòng)畫(huà)已經(jīng)被刪除了。
    解決: anim.removedOnCompletion = NO;

CAAnimation繼承結(jié)構(gòu)

一院究、 CAAnimation

CAAnimation類是所有動(dòng)畫(huà)對(duì)象的父類耘戚,負(fù)責(zé)控制動(dòng)畫(huà)的持續(xù)時(shí)間和速度等嗡髓,是個(gè)抽象類,不能直接使用收津,應(yīng)該使用它具體的子類

屬性:
  1. duration:動(dòng)畫(huà)的持續(xù)時(shí)間饿这,默認(rèn)為0.25秒
  2. repeatCount:動(dòng)畫(huà)的重復(fù)次數(shù)
  3. repeatDuration:動(dòng)畫(huà)的重復(fù)時(shí)間
  4. removedOnCompletion:默認(rèn)為YES,代表動(dòng)畫(huà)執(zhí)行完畢后就從圖層上移除撞秋,圖形會(huì)恢復(fù)到動(dòng)畫(huà)執(zhí)行前的狀態(tài)长捧。如果想讓圖層保持顯示動(dòng)畫(huà)執(zhí)行后的狀態(tài),那就設(shè)置為NO吻贿,不過(guò)還要設(shè)置fillMode屬性為kCAFillModeForwards
  5. fillMode:決定當(dāng)前對(duì)象在非active時(shí)間段的行為.比如動(dòng)畫(huà)開(kāi)始之前,動(dòng)畫(huà)結(jié)束之后
  6. beginTime:可以用來(lái)設(shè)置動(dòng)畫(huà)延遲執(zhí)行時(shí)間串结,若想延遲2s,就設(shè)置為CACurrentMediaTime()+2,CACurrentMediaTime()為圖層的當(dāng)前時(shí)間
  7. timingFunction:速度控制函數(shù)肌割,控制動(dòng)畫(huà)運(yùn)行的節(jié)奏

枚舉參數(shù):
(1)kCAMediaTimingFunctionLinear 時(shí)間曲線函數(shù)卧蜓,勻速
(2)kCAMediaTimingFunctionEaseIn 時(shí)間曲線函數(shù),由慢到特別快
(3)kCAMediaTimingFunctionEaseOut 時(shí)間曲線函數(shù)把敞,由快到慢
(4)kCAMediaTimingFunctionEaseInEaseOut 時(shí)間曲線函數(shù)弥奸,由慢到快
(5)kCAMediaTimingFunctionDefault 系統(tǒng)默認(rèn)

  1. delegate:動(dòng)畫(huà)代理,一般設(shè)置隱式代理奋早,該代理是NSObject的分類盛霎,不需要遵守協(xié)議
    anim.delegate = self;
    (1)- (void)animationDidStart:(CAAnimation *)anim;核心動(dòng)畫(huà)開(kāi)始時(shí)執(zhí)行
    (2)- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;核心動(dòng)畫(huà)執(zhí)行結(jié)束后調(diào)用

二、 CAPropertyAnimation

是CAAnimation的子類耽装,也是個(gè)抽象類愤炸,要想創(chuàng)建動(dòng)畫(huà)對(duì)象,應(yīng)該使用它的兩個(gè)子類:CABasicAnimation和CAKeyframeAnimation

屬性:@property(nullable, copy) NSString *keyPath;
類方法:+ (instancetype)animationWithKeyPath:(nullableNSString *)path;

keyPath參數(shù):通過(guò)指定CALayer的一個(gè)屬性名做為keyPath里的參數(shù)(NSString類型)剂邮,并且對(duì)CALayer的這個(gè)屬性的值進(jìn)行修改摇幻,達(dá)到相應(yīng)的動(dòng)畫(huà)效果横侦。比如挥萌,指定@”position”為keyPath,就修改CALayer的position屬性的值枉侧,以達(dá)到平移的動(dòng)畫(huà)效果引瀑。
例子:

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position.y"];

可修改的keyPath參數(shù):


keyPath參數(shù)

三、CABasicAnimation(基本動(dòng)畫(huà))CAPropertyAnimation的子類

屬性:
  1. fromValue : keyPath相應(yīng)屬性的初始值
  2. toValue : keyPath相應(yīng)屬性的結(jié)束值榨馁,到某個(gè)固定的值(類似transform的make含義)
    注意:隨著動(dòng)畫(huà)的進(jìn)行,在長(zhǎng)度為duration的持續(xù)時(shí)間內(nèi),keyPath相應(yīng)屬性的值從fromValue漸漸地變?yōu)閠oValue.
    如果fillMode = kCAFillModeForwards和removedOnComletion = NO;那么在動(dòng)畫(huà)執(zhí)行完畢后,圖層會(huì)保持顯示動(dòng)畫(huà)執(zhí)行后的狀態(tài),但實(shí)質(zhì)上,圖層的屬性值還是動(dòng)畫(huà)執(zhí)行前的初始值,并沒(méi)有真正被改變.比如: CALayer的postion初始值為(0,0),CABasicAnimation的fromValue為(10,10),toValue為 (100,100),雖然動(dòng)畫(huà)執(zhí)行完畢后圖層保持在(100,100) 這個(gè)位置,實(shí)質(zhì)上圖層的position還是為(0,0);
  3. byValue:不斷進(jìn)行累加的數(shù)值(類似transform非make方法的含義)
    例子:
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
animation.byValue = @(M_PI * 2);

四憨栽、 CAKeyframeAnimation(關(guān)鍵幀動(dòng)畫(huà))CAPropertyAnimation的子類

和CABasicAnimation的區(qū)別:CABasicAnimation只能從一個(gè)數(shù)值(fromValue)變到另一個(gè)數(shù)值(toValue),而CAKeyframeAnimation會(huì)使用一個(gè)NSArray(values)保存這些數(shù)值翼虫,實(shí)現(xiàn)多個(gè)點(diǎn)間的動(dòng)畫(huà)效果屑柔,CABasicAnimation可看做是最多只有2個(gè)關(guān)鍵幀的CAKeyframeAnimation

屬性:
  1. values:NSArray對(duì)象,里面的元素稱為”關(guān)鍵幀”(NSValue類型)珍剑,動(dòng)畫(huà)對(duì)象會(huì)在指定的時(shí)間(duration)內(nèi)掸宛,依次顯示values數(shù)組中的每一個(gè)關(guān)鍵幀( NSValue)
    例子:
//設(shè)置動(dòng)畫(huà)屬性
NSValue *p1 = [NSValue valueWithCGPoint:CGPointMake(50, 150)];
NSValue *p2 = [NSValue valueWithCGPoint:CGPointMake(250, 150)];
NSValue *p3 = [NSValue valueWithCGPoint:CGPointMake(50, 550)];
NSValue *p4 = [NSValue valueWithCGPoint:CGPointMake(250, 550)];
animKey.values = @[p1, p2, p3, p4];
  1. path:可以設(shè)置一個(gè)CGPathRef\CGMutablePathRef,讓層跟著路徑移動(dòng),path只對(duì)CALayer的anchorPoint和position起作用招拙,如果設(shè)置了path唧瘾,那么values將被忽略。
    例子:
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 100, 250, 100)];
animKey.path = path.CGPath;
  1. keyTimes:可以為對(duì)應(yīng)的關(guān)鍵幀指定對(duì)應(yīng)的時(shí)間點(diǎn),其取值范圍為0到1.0,keyTimes中的每一個(gè)時(shí)間值都對(duì)應(yīng)values中的每一幀别凤,當(dāng)keyTimes沒(méi)有設(shè)置的時(shí)候,各個(gè)關(guān)鍵幀的時(shí)間是平分的
  2. rotationMode:旋轉(zhuǎn)模式
    (1)如果為nil或不設(shè)置效果為
    旋轉(zhuǎn)模式效果1

    (2)設(shè)置為kCAAnimationRotateAuto 或 kCAAnimationRotateAutoReverse 會(huì)隨著旋轉(zhuǎn)的角度做 ”自轉(zhuǎn)“
    animKey.rotationMode = kCAAnimationRotateAuto; 效果為:
    旋轉(zhuǎn)模式效果2

五饰序、 CAAnimationGroup(組動(dòng)畫(huà))CAAnimation的子類

可以保存一組動(dòng)畫(huà)對(duì)象,將CAAnimationGroup對(duì)象加入層后规哪,組中所有動(dòng)畫(huà)對(duì)象可以同時(shí)并發(fā)運(yùn)行

屬性:

animations:動(dòng)畫(huà)組求豫,用來(lái)保存一組動(dòng)畫(huà)對(duì)象的NSArray
默認(rèn)情況下,一組動(dòng)畫(huà)對(duì)象是同時(shí)運(yùn)行的,也可以通過(guò)設(shè)置動(dòng)畫(huà)對(duì)象的beginTime屬性來(lái)更改動(dòng)畫(huà)的開(kāi)始時(shí)間
例子:

// 2. 向組動(dòng)畫(huà)中添加各種子動(dòng)畫(huà)
// 2.1 旋轉(zhuǎn)
CABasicAnimation *anim1 = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
// anim1.toValue = @(M_PI * 2 * 500);
anim1.byValue = @(M_PI * 2 * 1000);
// 2.2 縮放
CABasicAnimation *anim2 = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
anim2.toValue = @(0.1);
// 2.3 改變位置, 修改position
CAKeyframeAnimation *anim3 = [CAKeyframeAnimation animationWithKeyPath:@"position"];
anim3.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 100, 250, 100)].CGPath;

// 把子動(dòng)畫(huà)添加到組動(dòng)畫(huà)中
anim.animations = @[anim1, anim2, anim3];

六蝠嘉、CATransition(轉(zhuǎn)場(chǎng)動(dòng)畫(huà))CAAnimation的子類

用于做轉(zhuǎn)場(chǎng)動(dòng)畫(huà)猾蒂,能夠?yàn)閷犹峁┮瞥銎聊缓鸵迫肫聊坏膭?dòng)畫(huà)效果。iOS比Mac OS X的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)效果少一點(diǎn)是晨。
UINavigationController就是通過(guò)CATransition實(shí)現(xiàn)了將控制器的視圖推入屏幕的動(dòng)畫(huà)效果

屬性:
  1. type:設(shè)置動(dòng)畫(huà)過(guò)渡的類型

枚舉:
kCATransitionFade 交叉淡化過(guò)渡
kCATransitionMoveIn 新視圖移到舊視圖上面
kCATransitionPush 新視圖把舊視圖推出去
kCATransitionReveal 將舊視圖移開(kāi),顯示下面的新視圖
下面類型包裝成字符串賦值

轉(zhuǎn)場(chǎng)動(dòng)畫(huà)過(guò)渡效果
  1. subtype:設(shè)置動(dòng)畫(huà)過(guò)渡方向

枚舉:
kCATransitionFromRight
kCATransitionFromLeft
kCATransitionFromTop
kCATransitionFromBottom

  1. startProgress:動(dòng)畫(huà)起點(diǎn)(在整體動(dòng)畫(huà)的百分比)
  2. endProgress:動(dòng)畫(huà)終點(diǎn)(在整體動(dòng)畫(huà)的百分比)
    例子:
- (IBAction)didRecognizeSwipeGesture:(UISwipeGestureRecognizer *)sender {
    // 1. 創(chuàng)建一個(gè)轉(zhuǎn)場(chǎng)動(dòng)畫(huà)對(duì)象
    CATransition *anim = [[CATransition alloc] init];
    // 設(shè)置轉(zhuǎn)場(chǎng)動(dòng)畫(huà)的類型
    anim.type = @"suckEffect";
    // 設(shè)置轉(zhuǎn)場(chǎng)動(dòng)畫(huà)時(shí)間
    anim.duration = 1.5;
    anim.delegate = self;

    // 判斷方向
    if (sender.direction == UISwipeGestureRecognizerDirectionLeft) {
        // 設(shè)置轉(zhuǎn)場(chǎng)動(dòng)畫(huà)的子類型
        anim.subtype = kCATransitionFromRight;
        // NSLog(@"left");
        self.index++;
    } else {
        // 設(shè)置轉(zhuǎn)場(chǎng)動(dòng)畫(huà)的子類型
        anim.subtype = kCATransitionFromLeft;
        // NSLog(@"right");
        self.index--;
    }
    // 判斷是否越界
    if (self.index > 4) {
        self.index = 0;
    }
    if (self.index < 0) {
        self.index = 4;
    }

    // 拼接圖片名稱
    NSString *imgName = [NSString stringWithFormat:@"%d", self.index + 1];
    // 切換圖片
    self.imgViewIcon.image = [UIImage imageNamed:imgName];
    // 把轉(zhuǎn)場(chǎng)動(dòng)畫(huà)添加到對(duì)應(yīng)的控件上
     [self.imgViewIcon.layer addAnimation:anim forKey:@"anim1"];
}

七肚菠、UIView的類方法實(shí)現(xiàn)轉(zhuǎn)場(chǎng)動(dòng)畫(huà)

單視圖:

+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^ __nullable)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0);

雙視圖:

+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0);

參數(shù)解析:
duration:動(dòng)畫(huà)的持續(xù)時(shí)間
view:需要進(jìn)行轉(zhuǎn)場(chǎng)動(dòng)畫(huà)的視圖
options:轉(zhuǎn)場(chǎng)動(dòng)畫(huà)的類型、效果罩缴,枚舉類型
animations:將改變視圖屬性的代碼放在這個(gè)block中
completion:動(dòng)畫(huà)結(jié)束后蚊逢,會(huì)自動(dòng)調(diào)用這個(gè)block

例子:

// 識(shí)別到了輕掃手勢(shì)
- (IBAction)didRecognizeSwipeGesture:(UISwipeGestureRecognizer *)sender {
    // 判斷方向
    if (sender.direction == UISwipeGestureRecognizerDirectionLeft) {
        self.index++;
    } else {
        self.index--;
    }
    // 判斷是否越界
    if (self.index > 4) {
        self.index = 0;
    }
    if (self.index < 0) {
        self.index = 4;
    }
    // 拼接圖片名稱
    NSString *imgName = [NSString stringWithFormat:@"%d", self.index + 1];
    // 切換圖片
    self.imgViewIcon.image = [UIImage imageNamed:imgName];
    // 通過(guò)UIView來(lái)添加轉(zhuǎn)場(chǎng)動(dòng)畫(huà)
    [UIView transitionWithView:self.imgViewIcon duration:0.5 options:UIViewAnimationOptionLayoutSubviews animations:^{
        [UIView animateWithDuration:0.5 animations:^{
            self.imgViewIcon.alpha = 0.4;
        } completion:^(BOOL finished) {
            [UIView animateWithDuration:0.5 animations:^{
                self.imgViewIcon.alpha = 1.0;
            }];
        }];
    } completion:^(BOOL finished) {
        NSLog(@"動(dòng)畫(huà)完成!");
    }];
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市箫章,隨后出現(xiàn)的幾起案子烙荷,更是在濱河造成了極大的恐慌,老刑警劉巖檬寂,帶你破解...
    沈念sama閱讀 211,639評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件终抽,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡桶至,警方通過(guò)查閱死者的電腦和手機(jī)昼伴,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)镣屹,“玉大人圃郊,你說(shuō)我怎么就攤上這事∨冢” “怎么了持舆?”我有些...
    開(kāi)封第一講書(shū)人閱讀 157,221評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)伪窖。 經(jīng)常有香客問(wèn)我逸寓,道長(zhǎng),這世上最難降的妖魔是什么覆山? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,474評(píng)論 1 283
  • 正文 為了忘掉前任竹伸,我火速辦了婚禮,結(jié)果婚禮上汹买,老公的妹妹穿的比我還像新娘佩伤。我一直安慰自己,他們只是感情好晦毙,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,570評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布生巡。 她就那樣靜靜地躺著,像睡著了一般见妒。 火紅的嫁衣襯著肌膚如雪孤荣。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 49,816評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音盐股,去河邊找鬼钱豁。 笑死,一個(gè)胖子當(dāng)著我的面吹牛疯汁,可吹牛的內(nèi)容都是我干的牲尺。 我是一名探鬼主播,決...
    沈念sama閱讀 38,957評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼幌蚊,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼谤碳!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起溢豆,我...
    開(kāi)封第一講書(shū)人閱讀 37,718評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤蜒简,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后漩仙,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體搓茬,經(jīng)...
    沈念sama閱讀 44,176評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,511評(píng)論 2 327
  • 正文 我和宋清朗相戀三年队他,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了卷仑。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,646評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡漱挎,死狀恐怖系枪,靈堂內(nèi)的尸體忽然破棺而出雀哨,到底是詐尸還是另有隱情磕谅,我是刑警寧澤,帶...
    沈念sama閱讀 34,322評(píng)論 4 330
  • 正文 年R本政府宣布雾棺,位于F島的核電站膊夹,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏捌浩。R本人自食惡果不足惜放刨,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,934評(píng)論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望尸饺。 院中可真熱鬧进统,春花似錦、人聲如沸浪听。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,755評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)迹栓。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間锯厢,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,987評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工华坦, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人不从。 一個(gè)月前我還...
    沈念sama閱讀 46,358評(píng)論 2 360
  • 正文 我出身青樓惜姐,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親椿息。 傳聞我的和親對(duì)象是個(gè)殘疾皇子载弄,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,514評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容

  • 概念 Core Animation可以用在 Mac OS X 和 iOS平臺(tái). Core Animation的動(dòng)畫(huà)...
    就算我心狂野閱讀 736評(píng)論 0 0
  • 在iOS實(shí)際開(kāi)發(fā)中常用的動(dòng)畫(huà)無(wú)非是以下四種:UIView動(dòng)畫(huà),核心動(dòng)畫(huà)撵颊,幀動(dòng)畫(huà)宇攻,自定義轉(zhuǎn)場(chǎng)動(dòng)畫(huà)。 1.UIView...
    請(qǐng)叫我周小帥閱讀 3,082評(píng)論 1 23
  • 在iOS中隨處都可以看到絢麗的動(dòng)畫(huà)效果倡勇,實(shí)現(xiàn)這些動(dòng)畫(huà)的過(guò)程并不復(fù)雜逞刷,今天將帶大家一窺ios動(dòng)畫(huà)全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,471評(píng)論 6 30
  • 在iOS中隨處都可以看到絢麗的動(dòng)畫(huà)效果妻熊,實(shí)現(xiàn)這些動(dòng)畫(huà)的過(guò)程并不復(fù)雜夸浅,今天將帶大家一窺iOS動(dòng)畫(huà)全貌。在這里你可以看...
    F麥子閱讀 5,104評(píng)論 5 13
  • 一只鳥(niǎo)的追憶 尊貴的人類: 你們好扔役! 嘰嘰嘰帆喇,我是一只鳥(niǎo)兒。 中國(guó)的每...
    小紅帽0914閱讀 227評(píng)論 0 1