IOS 動畫案例

據(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)。

Core Animation編程指南

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ì)算動畫的效果腾它。


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市死讹,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌曲梗,老刑警劉巖赞警,帶你破解...
    沈念sama閱讀 211,423評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異虏两,居然都是意外死亡愧旦,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,147評論 2 385
  • 文/潘曉璐 我一進(jìn)店門定罢,熙熙樓的掌柜王于貴愁眉苦臉地迎上來笤虫,“玉大人,你說我怎么就攤上這事祖凫∏眚牵” “怎么了?”我有些...
    開封第一講書人閱讀 157,019評論 0 348
  • 文/不壞的土叔 我叫張陵惠况,是天一觀的道長遭庶。 經(jīng)常有香客問我,道長稠屠,這世上最難降的妖魔是什么峦睡? 我笑而不...
    開封第一講書人閱讀 56,443評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮权埠,結(jié)果婚禮上榨了,老公的妹妹穿的比我還像新娘。我一直安慰自己攘蔽,他們只是感情好龙屉,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,535評論 6 385
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著秩彤,像睡著了一般叔扼。 火紅的嫁衣襯著肌膚如雪事哭。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,798評論 1 290
  • 那天瓜富,我揣著相機(jī)與錄音鳍咱,去河邊找鬼。 笑死与柑,一個胖子當(dāng)著我的面吹牛谤辜,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播价捧,決...
    沈念sama閱讀 38,941評論 3 407
  • 文/蒼蘭香墨 我猛地睜開眼丑念,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了结蟋?” 一聲冷哼從身側(cè)響起脯倚,我...
    開封第一講書人閱讀 37,704評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎嵌屎,沒想到半個月后推正,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,152評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡宝惰,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,494評論 2 327
  • 正文 我和宋清朗相戀三年植榕,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片尼夺。...
    茶點(diǎn)故事閱讀 38,629評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡尊残,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出淤堵,到底是詐尸還是另有隱情寝衫,我是刑警寧澤,帶...
    沈念sama閱讀 34,295評論 4 329
  • 正文 年R本政府宣布粘勒,位于F島的核電站竞端,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏庙睡。R本人自食惡果不足惜事富,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,901評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望乘陪。 院中可真熱鬧统台,春花似錦抡蛙、人聲如沸安吁。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,742評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽涤妒。三九已至苏研,卻和暖如春菊霜,著一層夾襖步出監(jiān)牢的瞬間奠衔,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,978評論 1 266
  • 我被黑心中介騙來泰國打工戚绕, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留纹坐,地道東北人。 一個月前我還...
    沈念sama閱讀 46,333評論 2 360
  • 正文 我出身青樓舞丛,卻偏偏與公主長得像耘子,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子球切,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,499評論 2 348

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

  • 在iOS中隨處都可以看到絢麗的動畫效果谷誓,實(shí)現(xiàn)這些動畫的過程并不復(fù)雜,今天將帶大家一窺ios動畫全貌吨凑。在這里你可以看...
    每天刷兩次牙閱讀 8,471評論 6 30
  • 動畫的繼承結(jié)構(gòu) CAAnimation{CAPropertyAnimation{CABasicAnimation{...
    早起的蟲兒子被鳥吃閱讀 875評論 0 1
  • 在iOS實(shí)際開發(fā)中常用的動畫無非是以下四種:UIView動畫捍歪,核心動畫,幀動畫怀骤,自定義轉(zhuǎn)場動畫费封。 1.UIView...
    請叫我周小帥閱讀 3,082評論 1 23
  • 在iOS中隨處都可以看到絢麗的動畫效果,實(shí)現(xiàn)這些動畫的過程并不復(fù)雜蒋伦,今天將帶大家一窺iOS動畫全貌。在這里你可以看...
    F麥子閱讀 5,101評論 5 13
  • 先看看CAAnimation動畫的繼承結(jié)構(gòu) CAAnimation{ CAPropertyAnimation { ...
    時間不會倒著走閱讀 1,642評論 0 1