iOS中的動畫主要分為兩種:UIView動畫,核心動畫笋庄。
一效扫、UIView動畫
UIKit直接將動畫集成到UIView類中,當(dāng)內(nèi)部的一些屬性發(fā)生改變時直砂,UIView將為這些改變提供動畫支持菌仁。
UIView動畫能夠設(shè)置的動畫屬性有:
- frame
- bounds
- center
- transform
- alpha
- backgroundColor
- contentStretch
普通方式實現(xiàn)
相關(guān)方法及實例如下:
// 第一個參數(shù): 動畫標(biāo)識
// 第二個參數(shù): 附加參數(shù),在設(shè)置代理情況下,此參數(shù)將發(fā)送到setAnimationWillStartSelector和setAnimationDidStopSelector所指定的方法静暂,大部分情況济丘,設(shè)置為nil.
[UIView beginAnimations:@"translation" context:nil];
//設(shè)置動畫代理
[UIView setAnimationDelegate:self];
//設(shè)置動畫開始時執(zhí)行方法
[UIView setAnimationWillStartSelector:@selector(animationStart)];
//設(shè)置動畫停止時執(zhí)行方法
[UIView setAnimationDidStopSelector:@selector(animationStop)];
//設(shè)置動畫持續(xù)時間
[UIView setAnimationDuration:1.0];
//設(shè)置動畫延遲執(zhí)行時間
[UIView setAnimationDelay:2.0];
//設(shè)置動畫持續(xù)次數(shù)
[UIView setAnimationRepeatCount:5.0];
//設(shè)置動畫的曲線
/*
UIViewAnimationCurve的枚舉值:
UIViewAnimationCurveEaseInOut, // 慢進(jìn)慢出(默認(rèn)值)
UIViewAnimationCurveEaseIn, // 慢進(jìn)
UIViewAnimationCurveEaseOut, // 慢出
UIViewAnimationCurveLinear // 勻速
*/
[UIView setAnimationCurve:UIViewAnimationCurveLinear];
//設(shè)置是否從當(dāng)前狀態(tài)開始播放動畫
/*假設(shè)上一個動畫正在播放,且尚未播放完畢洽蛀,我們將要進(jìn)行一個新的動畫:
當(dāng)為YES時:動畫將從上一個動畫所在的狀態(tài)開始播放
當(dāng)為NO時:動畫將從上一個動畫所指定的最終狀態(tài)開始播放(此時上一個動畫馬上結(jié)束)*/
[UIView setAnimationBeginsFromCurrentState:YES];
//設(shè)置動畫是否繼續(xù)執(zhí)行相反的動畫
[UIView setAnimationRepeatAutoreverses:NO];
//是否禁用動畫效果(對象屬性依然會被改變摹迷,只是沒有動畫效果)
[UIView setAnimationsEnabled:NO];
//設(shè)置視圖的過渡效果
/* 第一個參數(shù):UIViewAnimationTransition的枚舉值如下
UIViewAnimationTransitionNone, //不使用動畫
UIViewAnimationTransitionFlipFromLeft, //從左向右旋轉(zhuǎn)翻頁
UIViewAnimationTransitionFlipFromRight, //從右向左旋轉(zhuǎn)翻頁
UIViewAnimationTransitionCurlUp, //從下往上卷曲翻頁
UIViewAnimationTransitionCurlDown, //從上往下卷曲翻頁
第二個參數(shù):需要過渡效果的View
第三個參數(shù):是否使用視圖緩存弯院,YES:視圖在開始和結(jié)束時渲染一次;NO:視圖在每一幀都渲染*/
[UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:self.redIV cache:YES];
//提交動畫
[UIView commitAnimations];
簡單的Block動畫
ios4.0以后增加了Block動畫塊泪掀,提供了更簡潔的方式來實現(xiàn)動畫.日常開發(fā)中一般也是使用Block形式創(chuàng)建動畫听绳。
常用方法如下:
//最簡潔的Block動畫:包含時間和動畫
[UIView animateWithDuration:(NSTimeInterval) //動畫持續(xù)時間
animations:^{
//執(zhí)行的動畫
}];
//帶有動畫提交回調(diào)的Block動畫
[UIView animateWithDuration:(NSTimeInterval) //動畫持續(xù)時間
animations:^{
//執(zhí)行的動畫
} completion:^(BOOL finished) {
//動畫執(zhí)行提交后的操作
}];
//可以設(shè)置延時時間和過渡效果的Block動畫
[UIView animateWithDuration:(NSTimeInterval) //動畫持續(xù)時間
delay:(NSTimeInterval) //動畫延遲執(zhí)行的時間
options:(UIViewAnimationOptions) //動畫的過渡效果
animations:^{
//執(zhí)行的動畫
} completion:^(BOOL finished) {
//動畫執(zhí)行提交后的操作
}];
UIViewAnimationOptions的枚舉值如下,可組合使用:
1.常規(guī)動畫屬性設(shè)置(可以同時選擇多個進(jìn)行設(shè)置)
UIViewAnimationOptionLayoutSubviews:動畫過程中保證子視圖跟隨運(yùn)動。**提交動畫的時候布局子控件异赫,表示子控件將和父控件一同動畫椅挣。**
UIViewAnimationOptionAllowUserInteraction:動畫過程中允許用戶交互。
UIViewAnimationOptionBeginFromCurrentState:所有視圖從當(dāng)前狀態(tài)開始運(yùn)行塔拳。
UIViewAnimationOptionRepeat:重復(fù)運(yùn)行動畫鼠证。
UIViewAnimationOptionAutoreverse :動畫運(yùn)行到結(jié)束點后仍然以動畫方式回到初始點。**執(zhí)行動畫回路,前提是設(shè)置動畫無限重復(fù)**
UIViewAnimationOptionOverrideInheritedDuration:忽略嵌套動畫時間設(shè)置靠抑。**忽略外層動畫嵌套的時間變化曲線**
UIViewAnimationOptionOverrideInheritedCurve:忽略嵌套動畫速度設(shè)置量九。**通過改變屬性和重繪實現(xiàn)動畫效果,如果key沒有提交動畫將使用快照**
UIViewAnimationOptionAllowAnimatedContent:動畫過程中重繪視圖(注意僅僅適用于轉(zhuǎn)場動畫)颂碧。
UIViewAnimationOptionShowHideTransitionViews:視圖切換時直接隱藏舊視圖荠列、顯示新視圖,而不是將舊視圖從父視圖移除(僅僅適用于轉(zhuǎn)場動畫)**用顯隱的方式替代添加移除圖層的動畫效果**
UIViewAnimationOptionOverrideInheritedOptions :不繼承父動畫設(shè)置或動畫類型载城。**忽略嵌套繼承的?選項**
2.動畫速度控制(可從其中選擇一個設(shè)置)時間函數(shù)曲線相關(guān)**時間曲線函數(shù)**
UIViewAnimationOptionCurveEaseInOut:動畫先緩慢肌似,然后逐漸加速。
UIViewAnimationOptionCurveEaseIn :動畫逐漸變慢诉瓦。
UIViewAnimationOptionCurveEaseOut:動畫逐漸加速川队。
UIViewAnimationOptionCurveLinear :動畫勻速執(zhí)行,默認(rèn)值睬澡。
3.轉(zhuǎn)場類型(僅適用于轉(zhuǎn)場動畫設(shè)置固额,可以從中選擇一個進(jìn)行設(shè)置,基本動畫煞聪、關(guān)鍵幀動畫不需要設(shè)置)**轉(zhuǎn)場動畫相關(guān)的**
UIViewAnimationOptionTransitionNone:沒有轉(zhuǎn)場動畫效果斗躏。
UIViewAnimationOptionTransitionFlipFromLeft :從左側(cè)翻轉(zhuǎn)效果。
UIViewAnimationOptionTransitionFlipFromRight:從右側(cè)翻轉(zhuǎn)效果米绕。
UIViewAnimationOptionTransitionCurlUp:向后翻頁的動畫過渡效果瑟捣。
UIViewAnimationOptionTransitionCurlDown :向前翻頁的動畫過渡效果馋艺。
UIViewAnimationOptionTransitionCrossDissolve:舊視圖溶解消失顯示下一個新視圖的效果栅干。
UIViewAnimationOptionTransitionFlipFromTop :從上方翻轉(zhuǎn)效果。
UIViewAnimationOptionTransitionFlipFromBottom:從底部翻轉(zhuǎn)效果捐祠。
補(bǔ)充:關(guān)于最后一組轉(zhuǎn)場動畫它一般是用在這個方法中的:
[UIView transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^ __nullable)(BOOL finished))completion]
該方法效果是插入一面視圖移除一面視圖碱鳞,期間可以使用一些轉(zhuǎn)場動畫效果。
Spring動畫
iOS7.0以后新增了Spring動畫(IOS系統(tǒng)動畫大部分采用Spring Animation踱蛀, 適用所有可被添加動畫效果的屬性)
[UIView animateWithDuration:(NSTimeInterval)//動畫持續(xù)時間
delay:(NSTimeInterval)//動畫延遲執(zhí)行的時間
usingSpringWithDamping:(CGFloat)//震動效果窿给,范圍0~1贵白,數(shù)值越小震動效果越明顯
initialSpringVelocity:(CGFloat)//初始速度,數(shù)值越大初始速度越快
options:(UIViewAnimationOptions)//動畫的過渡效果
animations:^{
//執(zhí)行的動畫
}
completion:^(BOOL finished) {
//動畫執(zhí)行提交后的操作
}];
Keyframes動畫
iOS7.0后新增了關(guān)鍵幀動畫崩泡,支持屬性關(guān)鍵幀禁荒,不支持路徑關(guān)鍵幀
[UIView animateKeyframesWithDuration:(NSTimeInterval)//動畫持續(xù)時間
delay:(NSTimeInterval)//動畫延遲執(zhí)行的時間
options:(UIViewKeyframeAnimationOptions)//動畫的過渡效果
animations:^{
//執(zhí)行的關(guān)鍵幀動畫
}
completion:^(BOOL finished) {
//動畫執(zhí)行提交后的操作
}];
UIViewKeyframeAnimationOptions的枚舉值如下,可組合使用:
UIViewAnimationOptionLayoutSubviews //進(jìn)行動畫時布局子控件
UIViewAnimationOptionAllowUserInteraction //進(jìn)行動畫時允許用戶交互
UIViewAnimationOptionBeginFromCurrentState //從當(dāng)前狀態(tài)開始動畫
UIViewAnimationOptionRepeat //無限重復(fù)執(zhí)行動畫
UIViewAnimationOptionAutoreverse //執(zhí)行動畫回路
UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套動畫的執(zhí)行時間設(shè)置
UIViewAnimationOptionOverrideInheritedOptions //不繼承父動畫設(shè)置
UIViewKeyframeAnimationOptionCalculationModeLinear //運(yùn)算模式 :連續(xù)
UIViewKeyframeAnimationOptionCalculationModeDiscrete //運(yùn)算模式 :離散
UIViewKeyframeAnimationOptionCalculationModePaced //運(yùn)算模式 :均勻執(zhí)行
UIViewKeyframeAnimationOptionCalculationModeCubic //運(yùn)算模式 :平滑
UIViewKeyframeAnimationOptionCalculationModeCubicPaced //運(yùn)算模式 :平滑均勻
增加關(guān)鍵幀的方法
[UIView addKeyframeWithRelativeStartTime:(double)//動畫開始的時間(占總時間的比例)
relativeDuration:(double) //動畫持續(xù)時間(占總時間的比例)
animations:^{
//執(zhí)行的動畫
}];
轉(zhuǎn)場動畫
- 從舊視圖到新視圖
[UIView transitionFromView:(nonnull UIView *) toView:(nonnull UIView *) duration:(NSTimeInterval) options:(UIViewAnimationOptions) completion:^(BOOL finished) {
//動畫執(zhí)行提交后的操作
}];
在該動畫過程中角撞,fromView 會從父視圖中移除呛伴,并將 toView 添加到父視圖中,注意轉(zhuǎn)場動畫的作用對象是父視圖(過渡效果體現(xiàn)在父視圖上)谒所。調(diào)用該方法相當(dāng)于執(zhí)行下面兩句代碼:
[fromView.superview addSubview:toView];
[fromView removeFromSuperview];
- 單個視圖的過渡效果
[UIView transitionWithView:(nonnull UIView *)
duration:(NSTimeInterval)
options:(UIViewAnimationOptions)
animations:^{
//執(zhí)行的動畫
}
completion:^(BOOL finished) {
//動畫執(zhí)行提交后的操作
}];
二绝骚、核心動畫
開發(fā)步驟
1.使用它需要先添加QuartzCore.framework框架和引入主頭文件<QuartzCore/QuartzCore.h>
2.初始化一個CAAnimation對象毕籽,并設(shè)置一些動畫相關(guān)屬性
3.通過調(diào)用CALayer的addAnimation:forKey:方法增加CAAnimation對象到CALayer中,這樣就能開始執(zhí)行動畫了
4.通過調(diào)用CALayer的removeAnimationForKey:方法可以停止CALayer中的動畫
注:核心動畫的執(zhí)行過程都是在后臺操作的,不會阻塞主線程.
CAAnimation繼承關(guān)系
CAMediaTiming
協(xié)議中定義了時間,速度亭引,重復(fù)次數(shù)等。屬性如下:
- beginTime:動畫的開始時間萍摊。如果想延遲1s倡勇,就設(shè)置為CACurrentMediaTime()+2,CACurrentMediaTime()為圖層的當(dāng)前時間
- duration:動畫的持續(xù)時間村生。
- speed:動畫速率歇攻,決定動畫時間的倍率。當(dāng)speed為2時梆造,動畫時間為設(shè)置的duration的1/2缴守。
- timeOffset:動畫時間偏移量。比如設(shè)置動畫時長為3秒镇辉,當(dāng)設(shè)置timeOffset為1.5時屡穗,當(dāng)前動畫會從中間位置開始,并在到達(dá)指定位置時忽肛,走完之前跳過的前半段動畫村砂。
- repeatCount:動畫的重復(fù)次數(shù)。
- repeatDuration:動畫的重復(fù)時間屹逛。
- autoreverses:執(zhí)行的動畫按照原動畫返回執(zhí)行础废。
- fillMode:決定當(dāng)前對象在非動畫時間段的行為。
系統(tǒng)提供的包括:
kCAFillModeRemoved:這個是默認(rèn)值罕模,也就是說當(dāng)動畫開始前和動畫結(jié)束后评腺,動畫對layer都沒有影響,動畫結(jié)束后淑掌,layer會恢復(fù)到之前的狀態(tài)
kCAFillModeForwards:當(dāng)動畫結(jié)束后蒿讥,layer會一直保持著動畫最后的狀態(tài)
kCAFillModeBackwards:在動畫開始前,只需要將動畫加入了一個layer,layer便立即進(jìn)入動畫的初始狀態(tài)并等待動畫開始芋绸。
kCAFillModeBoth:這個其實就是上面兩個的合成.動畫加入后開始之前媒殉,layer便處于動畫初始狀態(tài),動畫結(jié)束后layer保持動畫最后的狀態(tài)
注:其實不只是CAAnimation遵循CAMediaTiming協(xié)議摔敛,CALayer也遵循這個協(xié)議廷蓉,所以在一定程度上我們可以通過控制layer本身的協(xié)議屬性來控制動畫節(jié)奏。
CAAnimation
是所有動畫對象的父類马昙,是個抽象類苦酱,不能直接使用,應(yīng)該使用它具體的子類给猾。除了CAMediaTiming協(xié)議中的方法疫萤,增加了CAAnimationDelegate的代理屬性等。具體如下:
- timingFunction:控制動畫的顯示節(jié)奏敢伸。
系統(tǒng)提供的包括:
kCAMediaTimingFunctionLinear (勻速)扯饶,kCAMediaTimingFunctionEaseIn (慢進(jìn)快出),kCAMediaTimingFunctionEaseOut (快進(jìn)慢出)池颈,kCAMediaTimingFunctionEaseInEaseOut (慢進(jìn)慢出尾序,中間加速),
kCAMediaTimingFunctionDefault (默認(rèn))躯砰。 - delegate:動畫代理每币。
- removedOnCompletion:默認(rèn)為YES,代表動畫執(zhí)行完畢后就從圖層上移除琢歇,圖形會恢復(fù)到動畫執(zhí)行前的狀態(tài)兰怠。如果想讓圖層保持顯示動畫執(zhí)行后的狀態(tài),那就設(shè)置為NO李茫,不過還要設(shè)置fillMode為kCAFillModeForwards揭保。
CAPropertyAnimation
是CAAnimation的子類,針對對象的可動畫屬性進(jìn)行效果的設(shè)置魄宏,也是個抽象類秸侣,不可直接使用。
- keyPath:CALayer的某個屬性名宠互,并通過這個屬性的值進(jìn)行修改味榛,達(dá)到相應(yīng)的動畫效果。
- additive:屬性動畫是否以當(dāng)前動畫效果為基礎(chǔ)予跌,默認(rèn)為NO搏色。
- cumulative:指定動畫是否為累加效果,默認(rèn)為NO匕得。
- valueFunction:此屬性配合CALayer的transform屬性使用继榆。
CABasicAnimation
基本動畫,是CAPropertyAnimation的子類汁掠。屬性如下:
- fromValue:keyPath相應(yīng)屬性的初始值略吨。
- toValue:keyPath相應(yīng)屬性的結(jié)束值。
- byValue:在不設(shè)置toValue時考阱,toValue = fromValue + byValue翠忠,也就是在當(dāng)前的位置上增加多少。
實例如下:
//初始化動畫對象
CABasicAnimation * anim = [CABasicAnimation animation];
//設(shè)置動畫持續(xù)時間
anim.duration = 2;
//透明度
anim.keyPath = @"opacity";
//初始值
anim.fromValue = @(1.0f);
//結(jié)束值
anim.toValue = @(0.3f);
//添加動畫
[self.yellowIV.layer addAnimation:anim forKey:nil];
CASpringAnimation
帶有初始速度以及阻尼指數(shù)等物理參數(shù)的屬性動畫乞榨。屬性如下:
- mass:質(zhì)量秽之,影響慣性,默認(rèn)為1吃既。
- stiffness:勁度系數(shù)考榨,默認(rèn)為100。
- damping:阻尼系數(shù)鹦倚,默認(rèn)為10河质。
- initialVelocity:初始速度,可正可負(fù)震叙,方向不同掀鹅,默認(rèn)為0。
- settlingDuration:結(jié)算時間媒楼,根據(jù)上述參數(shù)計算出的預(yù)計時間乐尊,比較準(zhǔn)確。
實例如下:
//初始化CASpringAnimation對象划址,并設(shè)置keyPath
CASpringAnimation *anim = [CASpringAnimation animationWithKeyPath:@"position"];
//設(shè)置質(zhì)量
anim.mass = 5.f;
//設(shè)置勁度系數(shù)
anim.stiffness = 120.f;
//設(shè)置阻尼系數(shù)
anim.damping = 8.f;
//設(shè)置初始速度
anim.initialVelocity = 2.f;
//向下平移200
anim.byValue = [NSValue valueWithCGPoint:CGPointMake(0, 200)];
//設(shè)置動畫時間扔嵌,使用參數(shù)計算出的時間
anim.duration = anim.settlingDuration;
//添加動畫
[self.yellowIV.layer addAnimation:anim forKey:@"spring"];
CAKeyframeAnimation
同樣通過keyPath對應(yīng)屬性進(jìn)行控制,但它可以通過values或者path進(jìn)行多個階段的控制夺颤。屬性如下:
- values:關(guān)鍵幀組成的數(shù)組对人,動畫會依次顯示其中的每一幀。
- path:關(guān)鍵幀路徑拂共,動畫進(jìn)行的要素牺弄,優(yōu)先級比values高,但是只對CALayer的anchorPoint和position起作用宜狐。
- keyTimes:每一幀對應(yīng)的時間势告,其取值范圍為0到1.0,如果不設(shè)置抚恒,則各關(guān)鍵幀平分設(shè)定時間咱台。
- timingFunctions:每一幀對應(yīng)的動畫節(jié)奏。
- calculationMode:動畫的運(yùn)算模式俭驮,系統(tǒng)提供了以下幾種模式:
kCAAnimationLinear:連續(xù)
kCAAnimationDiscrete:離散
kCAAnimationPaced:均勻執(zhí)行
kCAAnimationCubic:平滑
kCAAnimationCubicPaced:平滑均勻 - tensionValues:動畫張力控制回溺。
- continuityValues:動畫連續(xù)性控制春贸。
- biasValues:動畫偏差率控制。
- rotationMode:動畫沿路徑旋轉(zhuǎn)方式遗遵,系統(tǒng)提供了兩種模式:
kCAAnimationRotateAuto:
kCAAnimationRotateAutoReverse:
實例如下:
//初始化CAKeyframeAnimation對象萍恕,并設(shè)置keyPath
CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"position"];
//設(shè)置動畫時間,使用參數(shù)計算出的時間
anim.duration = 2.f;
//設(shè)置路徑
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(SCREEN_WIDTH/2-100, SCREEN_HEIGHT/2-100, 200, 200)];
anim.path = path.CGPath;
//設(shè)置關(guān)鍵幀
NSValue *v1 = [NSValue valueWithCGPoint:CGPointMake(100, 100)];
NSValue *v2 = [NSValue valueWithCGPoint:CGPointMake(200, 150)];
NSValue *v3 = [NSValue valueWithCGPoint:CGPointMake(250, 400)];
NSValue *v4 = [NSValue valueWithCGPoint:CGPointMake(100, 250)];
anim.values = @[v1,v2,v3,v4];
//動畫運(yùn)算模式
anim.calculationMode = kCAAnimationCubicPaced;
//沿路徑旋轉(zhuǎn)方式
anim.rotationMode = kCAAnimationRotateAutoReverse;
//添加動畫
[self.yellowIV.layer addAnimation:anim forKey:@"keyFrames"];
CATransition
是CAAnimation的子類车要,用于做轉(zhuǎn)場動畫允粤,能夠為層提供移出屏幕和移入屏幕的動畫效果。屬性如下:
- type:轉(zhuǎn)場動畫類型翼岁。
- subtype:轉(zhuǎn)場動畫方向类垫。
- startProgress:動畫起點進(jìn)度(整體的百分比)。
- endProgress:動畫終點進(jìn)度(整體的百分比)悉患。
- filter:自定義轉(zhuǎn)場榆俺。
實例如下:
//初始化CATransition對象
CATransition *anim = [CATransition animation];
//轉(zhuǎn)場類型
anim.type = kCATransitionPush;
//動畫執(zhí)行時間
anim.duration = 2.f;
//動畫執(zhí)行方向
anim.subtype = kCATransitionFromLeft;
//添加動畫
[self.yellowIV.layer addAnimation:anim forKey:nil];
CAAnimationGroup
動畫組,方便對于多動畫的統(tǒng)一控制管理谴仙。
- animations:用來保存一組動畫對象的NSArray
實例如下:
//創(chuàng)建旋轉(zhuǎn)動畫對象
CABasicAnimation *retate = [CABasicAnimation animation];
//旋轉(zhuǎn)屬性
retate.keyPath = @"transform.rotation";
//角度
retate.toValue = @(M_PI);
//創(chuàng)建縮放動畫對象
CABasicAnimation *scale = [CABasicAnimation animation];
//縮放屬性
scale.keyPath = @"transform.scale";
//縮放比例
scale.toValue = @(0.0);
//初始化CAAnimationGroup對象
CAAnimationGroup *group = [CAAnimationGroup animation];
//添加到動畫組當(dāng)中
group.animations = @[retate,scale];
//執(zhí)行動畫時間
group.duration = 2.f;
//添加動畫
[self.yellowIV.layer addAnimation:group forKey:nil];
ps:想了解更多的核心動畫知識迂求,請閱讀ios核心動畫高級技巧
參考:完整項目資料下載