據(jù)說每個大神都有自己一個裝X的博客纳猪,珍重聲明,本人不喜歡裝X桃笙!
而既然IOS開發(fā)者賬號還沒交錢氏堤,不能弄出安裝包什么的下載,只能以這種方式展示案例了搏明!
IOS動畫
APP需要好的想法鼠锈、設(shè)計(jì)、功能星著、優(yōu)化购笆、界面等等,好的動畫是讓APP用戶體驗(yàn)加分的利器
iOS有很多動畫技術(shù)虚循,API主要分布在兩個庫中同欠,一個是UIKit,另一個是CoreAnimation邮丰。UIKit其實(shí)是基于CoreAnimation的封裝行您,Core Animation是iOS與OS X平臺上負(fù)責(zé)圖形渲染與動畫的基礎(chǔ)設(shè)施。Core Animation可以動畫視圖和其他的可視元素剪廉。渣渣表示我先暫時學(xué)習(xí)UIKit中常用API的使用娃循,然后再去了解底層的實(shí)現(xiàn)。
UIKit動畫
UIKit主要API散落在UIView+UIViewAnimationWithBlocks和UIView+UIViewKeyframeAnimations兩個分類
主要API:
@interfaceUIView(UIViewAnimationWithBlocks)
+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void(^)(void))animations completion:(void(^)(BOOL finished))completion
+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void(^)(void))animations completion:(void(^)(BOOL finished))completion
+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void(^)(void))animations
+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay usingSpringWithDamping:(CGFloat)dampingRatio initialSpringVelocity:(CGFloat)velocity options:(UIViewAnimationOptions)options animations:(void(^)(void))animations completion:(void(^)(BOOL finished))completion
+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void(^)(void))animations completion:(void(^)(BOOL finished))completion
+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void(^)(BOOL finished))completion
+ (void)performSystemAnimation:(UISystemAnimation)animation onViews:(NSArray *)views options:(UIViewAnimationOptions)options animations:(void(^)(void))parallelAnimations completion:(void(^)(BOOL finished))completion
@end
@interfaceUIView (UIViewKeyframeAnimations)
+ (void)animateKeyframesWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewKeyframeAnimationOptions)options animations:(void(^)(void))animations completion:(void(^)(BOOL finished))completion
+ (void)addKeyframeWithRelativeStartTime:(double)frameStartTime relativeDuration:(double)frameDuration animations:(void(^)(void))animations NS_AVAILABLE_IOS(7_0);
@end
一斗蒋、簡單動畫
前面四個API接口相似捌斧,功能也差不多笛质,不過帶的參數(shù)不一樣,用于創(chuàng)建常用的動畫捞蚂,參數(shù)列表如下
參數(shù)說明
duration持續(xù)時間
delay延時時間開始
options動畫選項(xiàng)(下面詳細(xì)解釋)
animations動畫block
completion動畫結(jié)束后的回調(diào)
options大體上可以分為三類妇押,分為動畫屬性,動畫線性關(guān)系姓迅,和動畫轉(zhuǎn)場效果敲霍。
動畫屬性:
UIViewAnimationOptionLayoutSubviews????????????????? 在AutoLayout下,如果修改AutoLayout丁存,那么子視圖也會跟著一起變化
UIViewAnimationOptionAllowUserInteraction????????? 在動畫時肩杈,允許用戶交互,比如按鈕在運(yùn)動者還可以點(diǎn)擊
UIViewAnimationOptionBeginFromCurrentState????? 從當(dāng)前狀態(tài)開始動畫
UIViewAnimationOptionRepeat?????????????????????????????? 重復(fù)動畫
UIViewAnimationOptionAutoreverse?????????????????????? 動畫執(zhí)行完畢自動翻轉(zhuǎn)
UIViewAnimationOptionOverrideInheritedDuration 忽略外層動畫嵌套的執(zhí)行時間
UIViewAnimationOptionOverrideInheritedCurve????? 忽略外層動畫線性關(guān)系
動畫線性關(guān)系
UIViewAnimationOptionShowHideTransitionViews? 用顯隱的方式替代添加移除圖層的動畫效果
UIViewAnimationOptionOverrideInheritedOptions? 忽略嵌套繼承的?選項(xiàng)
UIViewAnimationOptionCurveEaseInOut???????????????? 時間曲線函數(shù)解寝,由慢到快
UIViewAnimationOptionCurveEaseIn?????????????????????? 時間曲線函數(shù)扩然,由慢到特別快
UIViewAnimationOptionCurveEaSEOut??????????????????? 時間曲線函數(shù),由快到慢
UIViewAnimationOptionCurveLinear?????????????????????? 時間曲線函數(shù)聋伦,勻速
動畫轉(zhuǎn)場效果
UIViewAnimationOptionTransitionNone???????????????? 無轉(zhuǎn)場動畫
UIViewAnimationOptionTransitionFlipFromLeft????? 轉(zhuǎn)場從左翻轉(zhuǎn)
UIViewAnimationOptionTransitionFlipFromRight??? 轉(zhuǎn)場從右翻轉(zhuǎn)
UIViewAnimationOptionTransitionCurlUp????????????? 上卷轉(zhuǎn)場
UIViewAnimationOptionTransitionCurlDown???????? 下卷轉(zhuǎn)場
UIViewAnimationOptionTransitionCrossDissolve?? 轉(zhuǎn)場交叉消失
UIViewAnimationOptionTransitionFlipFromTop???? 轉(zhuǎn)場從上翻轉(zhuǎn)
UIViewAnimationOptionTransitionFlipFromBottom轉(zhuǎn)場從下翻轉(zhuǎn)
二夫偶、轉(zhuǎn)場動畫
轉(zhuǎn)場動畫的API如下,是為了控制視圖的跳轉(zhuǎn)而使用的
[UIView transitionWithView:subView duration:1.0 options:UIViewAnimationOptionTransitionFlipFromLeft animations:^{
[subView addSubview:testView];
} completion:^(BOOL finished) {
}];
運(yùn)行這段代碼可以看到視圖被翻轉(zhuǎn)過來的時候添加了testView在上面觉增。
[UIView transitionFromView:subView toView:testView duration:1.0options:UIViewAnimationOptionTransitionFlipFromLeft completion:nil];
這個方法可以控制一個控制器中的視圖切換兵拢。
三、關(guān)鍵幀動畫:
[UIView animateKeyframesWithDuration:2delay:0options:UIViewKeyframeAnimationOptionCalculationModeLinear animations:^{
[UIView addKeyframeWithRelativeStartTime:0relativeDuration:0.25animations:^{
CGRect frame=testView.frame;
frame.origin.y+=100*flag;
testView.frame=frame;
}];
[UIView addKeyframeWithRelativeStartTime:0.25relativeDuration:0.25animations:^{
CGRect frame=testView.frame;
frame.origin.y-=100*flag;
testView.frame=frame;
}];
[UIView addKeyframeWithRelativeStartTime:0.5relativeDuration:0.5animations:^{
CGRect frame=testView.frame;
frame.origin.y+=200*flag;
testView.frame=frame;
}];
} completion:^(BOOL finished) {
btn.hidden=YES;
}];
可以看到抑片,關(guān)鍵幀動畫我們很方便的可以控制動畫的整個過程卵佛,addKeyframeWithRelativeStartTime:是添加關(guān)鍵幀方
法,參數(shù)startTime是一個在0~1之間的數(shù)字敞斋,表示開始時間占總時間的%多少截汪,比如上例中的第一幀就是0,第二針就是25%也就是在0.5秒開
始植捎。relativeDuration和開始時間一樣衙解,是運(yùn)行時間占整個時間的百分比。
四焰枢、彈簧動畫
[UIView animateWithDuration:0.5delay:1.0usingSpringWithDamping:1initialSpringVelocity:0.1options:UIViewAnimationOptionAutoreverse animations:^{
CGRect frame=testView.frame;
frame.origin.y+=100*flag;
testView.frame=frame;
} completion:^(BOOL finished) {
btn.hidden=YES;
}];
彈簧動畫的阻尼值蚓峦,也就是相當(dāng)于摩擦力的大小,該屬性的值從0.0到1.0之間济锄,越靠近0暑椰,阻尼越小,彈動的幅度越大荐绝,反之阻尼越大一汽,彈動的幅度越小,如果大道一定程度低滩,會出現(xiàn)彈不動的情況召夹。
彈簧動畫的速率岩喷,或者說是動力。值越小彈簧的動力越小监憎,彈簧拉伸的幅度越小纱意,反之動力越大,彈簧拉伸的幅度越大鲸阔。這里需要注意的是偷霉,如果設(shè)置為0,表示忽略該屬性隶债,由動畫持續(xù)時間和阻尼計(jì)算動畫的效果腾它。