iOS 動畫之視圖動畫 UIView Animation

iOS 很美的一部分就是它的動畫,動畫對于用戶體驗的提升很重要借跪。iOS 提供了一些簡單的 API 來幫助我們實現(xiàn)一些比較簡單的動畫政己,不能小看這些簡單的 API,大道至簡不是么 :]

實際上的確是這樣子掏愁,很多動畫并不需要什么奇技淫巧歇由,往往可以用更簡單的方式來實現(xiàn)。

最近閱讀完 ios 核心動畫技巧 這本書后托猩,對于 iOS 動畫有了一些基本的了解印蓖,但是此書講的比較深,所以有很多地方不是很明白京腥。由于我是很快的去閱讀赦肃,所以沒有寫一些比較基本的代碼來做一些實現(xiàn),因此又照著 RaywenderLich 的 iOS Animation 教程開始做一些例子公浪,來加強(qiáng)學(xué)習(xí)他宛。

UIView 類提供了大量的動畫 API,這些都是 UIView 的類方法欠气,使用這些方法來實現(xiàn)動畫將會變的很簡單厅各。

視圖的屬性動畫

UIView 的 + animateWithDuration:delay:options:animations:completion: 方法,可以通過改變視圖的一些屬性來生成動畫预柒。

+ (void)animateWithDuration:(NSTimeInterval)duration 
                        delay:(NSTimeInterval)delay 
                        options:(UIViewAnimationOptions)options 
                        animations:(void (^)(void))animations 
                        completion:(void (^)(BOOL finished))completion

這個方便使用起來很簡單队塘,只需要在 animations 參數(shù)中的 block 中寫入對 UIView 屬性的改變即可袁梗,系統(tǒng)會自動根據(jù)你的代碼,將屬性的改變做一個平緩的動畫憔古。

  • duration :整個動畫持續(xù)的時間
  • delay:動畫在多久之后開始遮怜,值為 0 表示代碼執(zhí)行到這里后動畫立刻開始
  • options:一些有關(guān)動畫的設(shè)置,例如想要動畫剛開始比較快鸿市,到快結(jié)束時比較慢锯梁,都在這里設(shè)置。
  • animations:在這個 block 中寫入你想要執(zhí)行的代碼即可焰情。block 中對視圖的動畫屬性所做的改變都會生成動畫
  • completion:動畫完成后會調(diào)用陌凳,finished 表示動畫是否成功執(zhí)行完畢∧谥郏可以將動畫執(zhí)行完成后需要執(zhí)行的代碼寫在這里

舉個例子合敦,我想讓一個 View 從左上角移動到右下角某個位置,并且背景色更改為 red谒获,整個移動的過程(動畫持續(xù)執(zhí)行的時間)為 1 秒蛤肌,并且延遲 0.3 秒執(zhí)行壁却。那么可以這么寫:

- (void)animationProperty {
    [UIView animateWithDuration:1.0 delay:0.3 options:0 animations:^{
        self.someView.center = CGPointMake(300, 400);
        self.someView.backgroundColor = [UIColor redColor];
    } completion:^(BOOL finished) {
        NSLog(@"動畫完成了");
    }];
}

當(dāng)這個方法被調(diào)用時批狱,首先有一個 0.3 秒的延遲,然后動畫開始展东,在 1 秒內(nèi) someView 將從原來的位置移動到 (300赔硫,400)的位置,并且背景色有原來的顏色逐漸變?yōu)榧t色盐肃。

其實在上面的代碼中爪膊,我們只是告訴系統(tǒng),我希望有一個動畫砸王,這個動畫的動作為視圖位置與背景色的更改推盛,設(shè)置好動畫時間,其他的工作系統(tǒng)已經(jīng)為我們?nèi)孔龊们澹⑶以趧赢嬐瓿蓵r還通知我們耘成。

可以看出使用 UIView 的類方法實現(xiàn)動畫很是便捷。

細(xì)心點就會發(fā)現(xiàn)驹闰,我們對 UIView 的屬性做了改變瘪菌,然后系統(tǒng)相應(yīng)地自動為屬性的整個改變過程做了動畫。那么 UIView 的哪些屬性支持動畫呢嘹朗?

  • 位置和大惺γ睢(Position & Size):你可以改變視圖的位置和大小,使得 View 變大變小或移動到某個位置屹培,具體可以使用這些屬性:
  • bounds:重新設(shè)置 View 的大小
  • Frame:移動或縮放 View
  • center:更改 View 的位置(有關(guān) UIView 的 center默穴、Frame 等關(guān)系另行搜索 )
  • 外觀(Appearance):可以通過設(shè)置以下屬性來更改 view 的外觀:
  • backgroundColor:這個就比較簡單啦怔檩,背景色的改變在這個動畫期間是從原來的舊值過渡到新值的
  • alpha:此值的變化也是過渡的,設(shè)置為 0 可以讓 view 逐漸消失
  • 變換(Transformation):主要通過改變 View 的 transform 來做動畫蓄诽,這樣子就可以做更多的事情啦珠洗。transform 具體就不講了,不懂的可以搜一下若专。

動畫選項 Animation Options

在剛才的方法中许蓖,options 選項我們填寫了 0 ,表示采用默認(rèn)的值调衰。options 主要用于設(shè)置動畫的一些執(zhí)行特性膊爪,告訴 UIKit 來如何創(chuàng)建動畫。下面我們來看一哈這個枚舉類型都有哪些值嚎莉。

重復(fù) Repeat

首先可以簡單看一下下面兩個選項:

-UIViewAnimationOptionRepeat:表示動畫重復(fù)執(zhí)行米酬,即執(zhí)行完成后再來一次.
-UIViewAnimationOptionAutoreverse: 這個選項只能配合 repeat 一起使用,表示反向重復(fù)趋箩,即這個動畫是來來回回的執(zhí)行赃额,并不是簡單重復(fù)。更簡單點說就是叫确,動畫完成后倒退回去再繼續(xù)整個過程跳芳。

減緩 easing

在真實的世界中,運動都是有一個過程的竹勉,例如球的滾動是剛開始比較快飞盆,最后快停下來的時候比較慢。下面的選項就是設(shè)置動畫執(zhí)行的速度的:

  • UIViewAnimationOptionCurveLinear:線性地次乓,即始終都是一個速率吓歇,以某個速度突然的開始動畫,突然的停止動畫票腰,整個動畫過程都是一個速率城看。

  • UIViewAnimationOptionCurveEaseIn:緩慢的開始,然后以某個速率開始動畫杏慰,一直到結(jié)束

  • UIViewAnimationOptionCurveEaseOut:緩慢的結(jié)束

  • UIViewAnimationOptionCurveEaseInOut:開始和結(jié)束時都比較緩慢

?

還有其他的一些選項测柠,這里不做多的說明,可以看文檔并且自己動手實踐來體會逃默,這也是最好的方法鹃愤。

動畫完成時的回調(diào) completion

當(dāng)動畫序列執(zhí)行完畢后,系統(tǒng)將執(zhí)行回調(diào)中的代碼完域。block 中只有一個 finished 參數(shù)表示 block 被調(diào)用時软吐,動畫是否完成。

如果動畫的 duration 為 0 吟税,那么block 中的代碼將在下一個 RunLoop 循環(huán)中執(zhí)行凹耙。

此時姿现,我們可以使用這個 UIView 類方法實現(xiàn)大多數(shù)我們想要的動畫。屬性動畫是可以合并的肖抱,比如在移動的同時縮放备典、更改背景色。

動畫可以疊加意述,串成一個動畫鏈提佣。比如在 animation1 的 completion 回調(diào)中創(chuàng)建 animation2,那么動畫1 完成后將繼續(xù)執(zhí)行動畫 2荤崇。

根據(jù)官方文檔拌屏,在整個動畫過程中,用戶交互對于此視圖是暫時無效的(而IOS5.0前术荤,動畫過程中倚喂,用戶交互對于整個應(yīng)用是無效的),如果想要用戶可以和視圖交互瓣戚,可以改變 UIViewAnimationOptionAllowUserInteraction

一些個人的想法

下面講一下個人的一些理解端圈,但是不能保證正確,如果有錯誤的地方還請在評論中指出子库,大家相互學(xué)習(xí)舱权。

UIView 的這個類方法本質(zhì)為創(chuàng)建 CAAnimation 對象并且添加到相應(yīng)的 view 所管理的 CALayer 上,然后在下個 RunLoop 中執(zhí)行動畫刚照。

如果在多個類方法中將 view 的屬性做改變刑巧,那么創(chuàng)建的 CAAnimation 對象將做合并。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末无畔,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子吠冤,更是在濱河造成了極大的恐慌浑彰,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,277評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件拯辙,死亡現(xiàn)場離奇詭異郭变,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)涯保,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評論 3 393
  • 文/潘曉璐 我一進(jìn)店門诉濒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人夕春,你說我怎么就攤上這事未荒。” “怎么了及志?”我有些...
    開封第一講書人閱讀 163,624評論 0 353
  • 文/不壞的土叔 我叫張陵片排,是天一觀的道長寨腔。 經(jīng)常有香客問我,道長率寡,這世上最難降的妖魔是什么迫卢? 我笑而不...
    開封第一講書人閱讀 58,356評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮冶共,結(jié)果婚禮上乾蛤,老公的妹妹穿的比我還像新娘。我一直安慰自己捅僵,他們只是感情好幻捏,可當(dāng)我...
    茶點故事閱讀 67,402評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著命咐,像睡著了一般篡九。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上醋奠,一...
    開封第一講書人閱讀 51,292評論 1 301
  • 那天榛臼,我揣著相機(jī)與錄音,去河邊找鬼窜司。 笑死沛善,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的塞祈。 我是一名探鬼主播金刁,決...
    沈念sama閱讀 40,135評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼议薪!你這毒婦竟也來了尤蛮?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,992評論 0 275
  • 序言:老撾萬榮一對情侶失蹤斯议,失蹤者是張志新(化名)和其女友劉穎产捞,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體哼御,經(jīng)...
    沈念sama閱讀 45,429評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡坯临,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,636評論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了恋昼。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片看靠。...
    茶點故事閱讀 39,785評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖液肌,靈堂內(nèi)的尸體忽然破棺而出挟炬,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 35,492評論 5 345
  • 正文 年R本政府宣布辟宗,位于F島的核電站爵赵,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏泊脐。R本人自食惡果不足惜空幻,卻給世界環(huán)境...
    茶點故事閱讀 41,092評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望容客。 院中可真熱鬧秕铛,春花似錦、人聲如沸缩挑。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽供置。三九已至谨湘,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間芥丧,已是汗流浹背紧阔。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留续担,地道東北人擅耽。 一個月前我還...
    沈念sama閱讀 47,891評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像物遇,于是被迫代替她去往敵國和親乖仇。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,713評論 2 354

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

  • 在iOS實際開發(fā)中常用的動畫無非是以下四種:UIView動畫询兴,核心動畫乃沙,幀動畫,自定義轉(zhuǎn)場動畫蕉朵。 1.UIView...
    請叫我周小帥閱讀 3,094評論 1 23
  • 在iOS中隨處都可以看到絢麗的動畫效果崔涂,實現(xiàn)這些動畫的過程并不復(fù)雜,今天將帶大家一窺ios動畫全貌始衅。在這里你可以看...
    每天刷兩次牙閱讀 8,488評論 6 30
  • 前言 本文只要描述了iOS中的Core Animation(核心動畫:隱式動畫、顯示動畫)缭保、貝塞爾曲線汛闸、UIVie...
    GitHubPorter閱讀 3,625評論 7 11
  • 在iOS中隨處都可以看到絢麗的動畫效果,實現(xiàn)這些動畫的過程并不復(fù)雜艺骂,今天將帶大家一窺iOS動畫全貌诸老。在這里你可以看...
    F麥子閱讀 5,110評論 5 13
  • 01 我們生活、學(xué)習(xí)和工作中大多數(shù)事情都可以從收益值和半衰期兩個角度來衡量钳恕,由此便可得到由著兩個角度組合成的四類事...
    荷蘭豆兒閱讀 155評論 0 0