iOS --動畫總結 ----一


??? 原先也沒寫過這種文章的,也算是處女作了吧,估計寫的也不怎么樣,就當做筆記吧,慢慢就好了(要是有什么錯的希望可以指出,共同進步)

? ? 一.動畫的分類(這篇文章只討論基于核心動畫,其他的動畫暫不討論)

? ? 1.CAAnimation ,核心類的動畫,他是一個抽象類,不能直接拿來使用,遵循CAMediaTiming協(xié)議和CAAction協(xié)議,先看看他都有那些property(CAMediaTiming,CAAction)吧.

? ? @property CFTimeInterval beginTime:開始時間

? ? @property CFTimeInterval duration:動畫執(zhí)行的時間

? ? @property float speed:默認的值為1.0,代表著動畫會按照默認的速度播放(給定的時間),假如設置為2.0,則設定的時間會減半(假如Duration:6,Speed:2,則動畫就會播放6/2的時間)

? ? @property CFTimeInterval timeOffset:對時間進行偏移,從而計算出動畫的狀態(tài),動畫在執(zhí)行的時候(timeOffset = Duration > timeOffset?timeOffset:(Duration % timeOffset)),會先跳過timeOffset這個時間段,先執(zhí)行后面的部分,然后在執(zhí)行

???? timeOffset.例如:Duration = 3,timeOffset = 2,則先執(zhí)行后兩秒的動畫,然后才執(zhí)行timeOffset的動畫,如圖1.1:

1.1

? ? timeOffset使用的不多,他可以和speed共同使用來控制當前動畫的時間.當speed == 0時,這動畫會在這個時間點(timeOffset)停止(通常用于動畫的暫停),如圖1.2:

1.2

??? ,代碼如圖1.3:

1.3

?? ? speed == 0,則意味著會在timeOffset這個時間點停止.

? ? @property float repeatCount:動畫重復多少次,不應該和repeatDuration一起使用,可以設置為無限執(zhí)行:MAXFLOAT.

? ? @property BOOL repeatDuration:動畫重復多久,不應該和RepeatCount一起使用.

??? @property BOOL autoreverses:是否逆行動畫

? ? @property(copy) NSString *fillMode:決定著當前對象過了非active時間段的行為.比如:動畫執(zhí)行完畢或者動畫開始之前.(removedOnCompletion設置為fause,否則不會生效),fillModel有四個值:

*? ? kCAFillModeRemoved:默認值,就是說動畫開始前和結束后對當前l(fā)ayer都沒有影響,layer會恢復到原始狀態(tài).

*? ? kCAFillModeForwards:動畫結束后會一直保持結束后的狀態(tài).

*? ? kCAFillModeBackwards:和kCAFillModeForwards相對,也就是說當你將動畫加入layer的時候,layer便會處于動畫初始的狀態(tài)(及時延遲執(zhí)行也一樣會處于初始的狀態(tài))

*? ? kCAFillModeBoth:動畫開始前l(fā)ayer處于動畫開始狀態(tài),結束后layer處于動畫結束狀態(tài)

???? RemovedOnCompletion:這個值為true時,動畫會在執(zhí)行完畢后自動的從層上面移除,一般設置為NO(再次使用)

???? @property(nullable, strong) CAMediaTimingFunction *timingFunction:設置動畫的節(jié)奏,比如:先快后慢,先慢后快等.

? ? @property(retain) id delegate:為CAAnimation設置代理。默認為nil拷橘。注意:一個CAAnimation實例壳坪,不能設置delegate為self拆魏。會引起循環(huán)引用。

??? 另外:她還有一些自身的方法:

? ? + (instancetype)animation;

? ? + (nullable id)defaultValueForKey:(NSString *)key;根據(jù)屬性key壳咕,返回相應的屬性值

??? - (BOOL)shouldArchiveValueForKey:(NSString *)key;返回指定的屬性是否可以歸檔

? ? - (void)animationDidStart:(CAAnimation *)anim;動畫開始時,執(zhí)行的方法

??? - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;動畫執(zhí)行完成執(zhí)行的方法

? ? 我們一般都使用CAAnimation的派生類:如圖2.1所示:

2.1

? ? 2.1 CATransition 提供漸變效果,(例如:推,拉,翻頁,等等)

? ? 2.2 CABasicAnimation? 提供了對單一動畫的實現(xiàn)

? ? 2.3 CAKeyframeAnimation 關鍵幀動畫

? ? 2.4 CAAnimationGroup 允許多個動畫同時播放

??? 然后一一來介紹他們:

? ? 2.1.1 CATransition:首先還是屬性介紹:

? ? @property float startProgress;設置過渡開始點,必須<=endProgress,

? ? @property float endProgress;設置過度的結束點,必須>=startProgress;

? ? @property(nullable, strong) id filter; (還沒有搞懂他的用法);

? ? @property(nullable, copy) NSString *subtype;設置預定義的過度方向如果設置了filter,則該屬性無效

? ? 預定義的過度方向:

*? CA_EXTERN NSString * const kCATransitionFromRight? 從右邊? ? ? ? ?

*? CA_EXTERN NSString * const kCATransitionFromLeft? ? ? 從左邊

*? CA_EXTERN NSString * const kCATransitionFromTop? ? ? 從頂部

*? CA_EXTERN NSString * const kCATransitionFromBottom 從底部

? ? @property(copy) NSString *type;設置預定義的效果,默認為kCATransitionFade,如果設置了filter,則該屬性無效??

? ? 下面是type各種動畫效果? 'fade', `moveIn', `push' , `reveal' 可以分別使用'kCATransitionFade', 'kCATransitionMoveIn', 'kCATransitionPush', 'kCATransitionReveal'來調(diào)用.

*? ? @"cube"? ? ? ? ? ? ? ? ? ? 立方體翻滾效果

*? ? @"moveIn"? ? ? ? ? ? ? ? 新視圖移到舊視圖上面

*? ? @"reveal"? ? ? ? ? ? ? ? ? 顯露效果(將舊視圖移開,顯示下面的新視圖)

*? @"fade"? ? ? ? ? ? ? ? ? ? ?? 交叉淡化過渡(不支持過渡方向)? ? ? ? ? ? (默認為此效果)

*? @"pageCurl"? ? ? ? ? ? ? ? 向上翻一頁

*? @"pageUnCurl"? ? ? ? ? ? 向下翻一頁

*? @"suckEffect"? ? ? ? ? ? ? 收縮效果偎巢,類似系統(tǒng)最小化窗口時的神奇效果(不支持過渡方向)

*? @"rippleEffect"? ? ? ? ? ? 滴水效果,(不支持過渡方向)

*? @"oglFlip"? ? ? ? ? ? ? ? ?? 上下左右翻轉效果

*? @"rotate"? ? ? ? ? ? ? ? ? ?? 旋轉效果

*? @"push"

*? @"cameraIrisHollowOpen"? ? 相機鏡頭打開效果(不支持過渡方向)

*? @"cameraIrisHollowClose"? ? 相機鏡頭關上效果(不支持過渡方向)

??? 此時subType為上面的那些,

? ? 當type為@"rotate"(旋轉)的時候,它也有幾個對應的subtype,分別為:

*? 90cw? ? 逆時針旋轉90°

*? 90ccw? 順時針旋轉90°

*? 180cw? 逆時針旋轉180°

*? 180ccw? 順時針旋轉180°

??? type和subType的對應關系?(匹配錯誤則無法顯示動畫)

??? 圖2.1.1是所列出的效果

2.1.1

感謝這篇文章的作者(里面有更加詳細的介紹)!!!?

這是demo詳情??


最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末累提,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子倦踢,更是在濱河造成了極大的恐慌送滞,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,743評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件辱挥,死亡現(xiàn)場離奇詭異犁嗅,居然都是意外死亡,警方通過查閱死者的電腦和手機晤碘,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評論 3 385
  • 文/潘曉璐 我一進店門褂微,熙熙樓的掌柜王于貴愁眉苦臉地迎上來功蜓,“玉大人,你說我怎么就攤上這事宠蚂∈胶常” “怎么了?”我有些...
    開封第一講書人閱讀 157,285評論 0 348
  • 文/不壞的土叔 我叫張陵求厕,是天一觀的道長端衰。 經(jīng)常有香客問我,道長甘改,這世上最難降的妖魔是什么旅东? 我笑而不...
    開封第一講書人閱讀 56,485評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮十艾,結果婚禮上抵代,老公的妹妹穿的比我還像新娘。我一直安慰自己忘嫉,他們只是感情好荤牍,可當我...
    茶點故事閱讀 65,581評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著庆冕,像睡著了一般康吵。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上访递,一...
    開封第一講書人閱讀 49,821評論 1 290
  • 那天晦嵌,我揣著相機與錄音,去河邊找鬼拷姿。 笑死惭载,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的响巢。 我是一名探鬼主播描滔,決...
    沈念sama閱讀 38,960評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼踪古!你這毒婦竟也來了含长?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,719評論 0 266
  • 序言:老撾萬榮一對情侶失蹤伏穆,失蹤者是張志新(化名)和其女友劉穎拘泞,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蜈出,經(jīng)...
    沈念sama閱讀 44,186評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡田弥,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,516評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了铡原。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片偷厦。...
    茶點故事閱讀 38,650評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡商叹,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出只泼,到底是詐尸還是另有隱情剖笙,我是刑警寧澤,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布请唱,位于F島的核電站弥咪,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏十绑。R本人自食惡果不足惜聚至,卻給世界環(huán)境...
    茶點故事閱讀 39,936評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望本橙。 院中可真熱鬧扳躬,春花似錦、人聲如沸甚亭。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,757評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽亏狰。三九已至役纹,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間暇唾,已是汗流浹背促脉。 一陣腳步聲響...
    開封第一講書人閱讀 31,991評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留信不,地道東北人嘲叔。 一個月前我還...
    沈念sama閱讀 46,370評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像抽活,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子锰什,可洞房花燭夜當晚...
    茶點故事閱讀 43,527評論 2 349

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

  • 在iOS實際開發(fā)中常用的動畫無非是以下四種:UIView動畫下硕,核心動畫,幀動畫汁胆,自定義轉場動畫梭姓。 1.UIView...
    請叫我周小帥閱讀 3,082評論 1 23
  • 在iOS中隨處都可以看到絢麗的動畫效果,實現(xiàn)這些動畫的過程并不復雜嫩码,今天將帶大家一窺ios動畫全貌誉尖。在這里你可以看...
    每天刷兩次牙閱讀 8,471評論 6 30
  • 先看看CAAnimation動畫的繼承結構 CAAnimation{ CAPropertyAnimation { ...
    時間不會倒著走閱讀 1,644評論 0 1
  • Core Animation Core Animation,中文翻譯為核心動畫铸题,它是一組非常強大的動畫處理API铡恕,...
    45b645c5912e閱讀 3,016評論 0 21
  • 在iOS中隨處都可以看到絢麗的動畫效果琢感,實現(xiàn)這些動畫的過程并不復雜,今天將帶大家一窺iOS動畫全貌探熔。在這里你可以看...
    F麥子閱讀 5,104評論 5 13