iOS開發(fā)筆記-動(dòng)畫進(jìn)階開篇
前言：
我是一名剛工作半年的新手，目前在一家外包公司工作，因?yàn)楣卷?xiàng)目比較多，短短半年已經(jīng)參與了好幾個(gè)項(xiàng)目了，在這個(gè)這個(gè)過程中我學(xué)會(huì)了很多，進(jìn)步了很多，同時(shí)也發(fā)現(xiàn)了我參與的所有項(xiàng)目都有著一個(gè)很嚴(yán)重的問題，幾乎沒有任何交互動(dòng)畫，大部分操作會(huì)讓用戶體驗(yàn)十分生硬。這樣的app并不完美，我開始體會(huì)到動(dòng)畫的重要性，在 Teamtreehouse Motion Design 我學(xué)到了很多關(guān)于動(dòng)畫的知識(shí)，今天開始分享給大家。
一、什么是動(dòng)畫
1、起源
首先來說說動(dòng)畫的起源，據(jù)說目前的動(dòng)畫是基于1981年 迪士尼動(dòng)畫 所提出的動(dòng)畫的12個(gè)基本原則實(shí)現(xiàn)的，12個(gè)原則如下
Squash and Stretch, Anticipation, Staging, Straight Ahead & Pose-to-Pose, Follow-Through and Overlapping Action, Slow In and Slow Out, Arcs, Secondary Action, Timing, Exaggeration, Solid Drawing and Appeal.
下面為了讓大家了解這些原則，我找了一個(gè)包含顯示12個(gè)原則的視頻給大家，可以看一下，簡書不能放視頻只能放鏈接了。。》
看完視頻相信大家也對(duì)各種動(dòng)畫效果有了一個(gè)初步的了解繼續(xù)往下看。
2、動(dòng)畫的三大要點(diǎn)（這段摘至 Motion Design）
- 1、Transition（過渡）類似于頁面的切換，控件的顯示和消失的過程中要有的一個(gè)平滑過渡效果，平穩(wěn)的過度，可以減輕用戶對(duì)于陌生界面的精神負(fù)擔(dān)。
- 2、Focus（焦點(diǎn)）將用戶的注意力集中到一個(gè)非常重要或者最近更新特定部分，特別是需要用戶立即操作的元素。
- 3、Delight（愉悅）將本來司空見慣的操作用一種意想不到的效果展示給用戶。
讓我們?yōu)g覽一些動(dòng)畫的例子，分析他們?yōu)槭裁创嬖?，以及在什么情況下使用。
2、iOS動(dòng)畫效果
-
1、 iOS 系統(tǒng)日歷效果
iOS calendar.gif
這是iOS7之后的自帶日歷app，在年切換到月的過程不不是簡單的跳轉(zhuǎn)，而是增加了過渡的特效，一個(gè)簡單的過渡可以引導(dǎo)用戶的視覺狀態(tài)給人一種特別明顯的層級(jí)關(guān)系，因?yàn)檫@不是簡單的導(dǎo)航控制器的切換，而是從一個(gè)大的層次通過動(dòng)畫放大到一個(gè)更深層次細(xì)節(jié)次，用戶真正得到的是他們?cè)跀?shù)據(jù)中更深層次的感受。
-
2、iOS系統(tǒng)通話界面
call.gif
當(dāng)有新的來電時(shí)，綠色的接聽按鈕旋轉(zhuǎn)和過渡為紅色，所以它可以成為接聽按鈕。類似的過渡發(fā)生在你在撥打一個(gè)電話時(shí)，點(diǎn)擊綠色呼叫按鈕，這里有焦點(diǎn)的元素。
-
3、Facebook Paper 動(dòng)畫效果（個(gè)人最喜歡的一個(gè)，十分炫酷?。。?/p>
paper.gif
Facebook Paper 所有的界面切換動(dòng)畫都使用了各種二維或者三維效果。這得益于Facebook 自家的Facebook Pop 動(dòng)畫框架，現(xiàn)在已經(jīng)開源了，后期我會(huì)對(duì)Pop框架的使用簡單的講解(還沒有深入研究。。)。
Facebook Pop Github 地址
https://github.com/facebook/pop
- 4、某音樂播放器界面
這是一個(gè)很有趣的動(dòng)畫效果有木有？每一個(gè)控制器都采用各種不同的效果來顯示每個(gè)UI控件。每首歌在列表以動(dòng)畫的方式從屏幕中顯示出來，使用一個(gè)簡單的iOS導(dǎo)航push/pop的方式，讓人舍不得關(guān)掉這個(gè)app。在這個(gè)動(dòng)畫中的關(guān)鍵在于，屏幕沒有移動(dòng)，但是所有的屏幕上的控件都在移動(dòng)。創(chuàng)建一個(gè)這樣的效果，每一個(gè)UI控件的起始時(shí)間要稍微錯(cuò)開，這種類型的動(dòng)畫效果后面的一個(gè)demo中又講到。
是不是覺得狂拽酷炫？？，不要被表象嚇到，接下來的幾天我會(huì)通過幾個(gè)通俗易懂的demo來教大家實(shí)現(xiàn)類似的動(dòng)畫效果（包括iOS系統(tǒng)自帶的動(dòng)畫框架和Facebook開源的動(dòng)畫框架POP）
第一篇到此結(jié)束，第二篇文章就要進(jìn)入正題啦我會(huì)著重講解動(dòng)畫的各種屬性和性能方面的知識(shí)，敬請(qǐng)期待，更新中?。。?/h4>
iOS 動(dòng)畫之美（二）
本文素材摘自 CAPPTIVATE.co，Teamtreehouse
