iOS動畫篇_UIView動畫

在開發(fā)工作中瞳遍,我們會碰到大量的需要表現(xiàn)力的地方茂浮,那么動畫便成為了我們開發(fā)過程中必不可少的知識點。

那么返干,首先我們從最簡單的入手:

一兴枯、UIView動畫類方法動畫

UIView動畫其實就是對Core Animation的封裝,并提供給開發(fā)者更加簡潔易懂的API接口矩欠。

相對于Core Animation動畫來說财剖,UIView動畫提供的動畫屬性較少:

1、大小變化(frame)

2癌淮、拉伸變化(bounds)

3躺坟、中心位置(center)

4、旋轉(zhuǎn)(transform)

5乳蓄、透明度(alpha)

6咪橙、背景顏色(backgroundColor)

7、拉伸內(nèi)容(contentStretch)


下面介紹一下UIView基礎(chǔ)動畫的幾個常用的方法:

1栓袖、標志動畫開始匣摘,開始編輯動畫

+ (void)beginAnimations:(nullable NSString *)animationID context:(nullable void *)context;

animationID:動畫的唯一標示

context:附加參數(shù)


2、標志動畫結(jié)束裹刮,開始執(zhí)行動畫

+ (void)commitAnimations;


3音榜、設(shè)置動畫時長

+ (void)setAnimationDuration:(NSTimeInterval)duration;


4、設(shè)置代理

+ (void)setAnimationDelegate:(nullable id)delegate;


5捧弃、動畫將要開始時執(zhí)行的方法

+ (void)setAnimationWillStartSelector:(nullable SEL)selector;


6赠叼、動畫已經(jīng)結(jié)束時執(zhí)行的方法

+ (void)setAnimationDidStopSelector:(nullable SEL)selector;


7、設(shè)置動畫執(zhí)行延時時間

+ (void)setAnimationDelay:(NSTimeInterval)delay;


8违霞、設(shè)置動畫開始的Date

+ (void)setAnimationStartDate:(NSDate *)startDate;


9嘴办、設(shè)置動畫效果

+ (void)setAnimationCurve:(UIViewAnimationCurve)curve;

效果如下:

UIViewAnimationCurveEaseInOut,? ? ? ? // 慢入慢出

UIViewAnimationCurveEaseIn,? ? ? ? ? ? // 慢入

UIViewAnimationCurveEaseOut,? ? ? ? ? // 慢出

UIViewAnimationCurveLinear,? ? ? ? ? // 線性勻速


10、設(shè)置動畫重復(fù)次數(shù)

+ (void)setAnimationRepeatCount:(float)repeatCount;


11买鸽、設(shè)置動畫是否繼續(xù)執(zhí)行反相動畫

+ (void)setAnimationRepeatAutoreverses:(BOOL)repeatAutoreverses;


12涧郊、設(shè)置是否從當前狀態(tài)開始動畫

+ (void)setAnimationBeginsFromCurrentState:(BOOL)fromCurrentState;

當一個動畫尚未完成,將要進行下一個動畫時:

如果設(shè)置為YES眼五,動畫將從上一個動畫當前的狀態(tài)進行下一個動畫

如果設(shè)置為NO妆艘,那當前動畫會立即結(jié)束彤灶,達到當前動畫的最終狀態(tài),再執(zhí)行下一個動畫


13批旺、設(shè)置試圖過渡效果

+ (void)setAnimationTransition:(UIViewAnimationTransition)transition forView:(UIView *)view cache:(BOOL)cache;

transition:動畫效果

UIViewAnimationTransitionNone, ? ? ? ? ? ? ? ? ? ?//不適用動畫

UIViewAnimationTransitionFlipFromLeft,? ? ? //從左向右旋轉(zhuǎn)翻頁

UIViewAnimationTransitionFlipFromRight,? ? //從右向左旋轉(zhuǎn)翻頁

UIViewAnimationTransitionCurlUp,? ? ? ? ? ? ? ? //從下往上卷曲翻頁

UIViewAnimationTransitionCurlDown,? ? ? ? ? ? ? //從上往下卷曲翻頁

view:添加動畫效果的View

cache:是否使用視圖緩存幌陕,YES:視圖在開始和結(jié)束時渲染一次;NO:視圖在每一幀都渲染


14汽煮、是否禁用動畫效果(對象的屬性會被改變搏熄,只是沒有動畫效果)

+ (void)setAnimationsEnabled:(BOOL)enabled;


下面為集中常見的動畫樣式:

1、frame動畫

-(void)frameAnimation{

? ? [UIView beginAnimations:@"animation_frame" context:nil];

? ? [UIView setAnimationDelay:0.3];

? ? [UIView setAnimationDuration:1]; ?

? ? [UIView setAnimationRepeatAutoreverses:YES];

? ? [UIView setAnimationRepeatCount:CGFLOAT_MAX];

? ? [UIView setAnimationCurve:UIViewAnimationCurveLinear];?

? ? [UIView setAnimationDelegate:self];

? ? [UIView setAnimationWillStartSelector:@selector(aniBegin:)];

? ? [UIView setAnimationDidStopSelector:@selector(aniStop:)];

? ? view_2.frame = view_0.frame;

? ? [UIView commitAnimations];

}

2暇赤、給某一個view添加轉(zhuǎn)場動畫

-(void)touchesBegan:(NSSet*)touches withEvent:(UIEvent *)event{

? ? [UIView beginAnimations:@"animation_flip" context:nil];

? ? [UIView setAnimationDelay:0.3];

? ? [UIView setAnimationDuration:1];

? ? [UIView setAnimationRepeatAutoreverses:NO];

? ? [UIView setAnimationRepeatCount:CGFLOAT_MAX];

? ? [UIView setAnimationCurve:UIViewAnimationCurveLinear];

? ? [UIView setAnimationDelegate:self];

? ? [UIView setAnimationWillStartSelector:@selector(aniBegin:)];

? ? [UIView setAnimationDidStopSelector:@selector(aniStop:)];

? ? [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft ? ? ? ?forView:view_0 cache:YES];

? ? [UIView commitAnimations];

}

二心例、UIView Block動畫

Block動畫對于開發(fā)來說更加的簡潔易操作,有如下幾種方法:

1鞋囊、 最簡單的動畫方式

+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations

duration:動畫時長

animations:需要執(zhí)行的動畫


2契邀、 帶有完成回調(diào)的動畫方式

+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion

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


3、 帶有延時和可選擇動畫效果的動畫方式

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

delay:延時執(zhí)行時間

options:動畫效果(具體效果參考系統(tǒng)枚舉)


4失暴、 spring動畫

+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay usingSpringWithDamping:(CGFloat)dampingRatio initialSpringVelocity:(CGFloat)velocity options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion

duration:動畫時長

delay:延時時間

dampingRatio:震動效果,范圍0~1微饥,數(shù)值越小震動效果越明顯

velocity:初始速度谒臼,數(shù)值越大初始速度越快

options:動畫效果


5民效、轉(zhuǎn)場動畫

(1)、兩個視圖切換

+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^ __nullable)(BOOL finished))completion

在該動畫過程中,fromView 會從父視圖中移除揩尸,并講 toView 添加到父視圖中,注意轉(zhuǎn)場動畫的作用對象是父視圖霹肝。

(2)申钩、單個視圖轉(zhuǎn)場效果

+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^ __nullable)(void))animations completion:(void (^ __nullable)(BOOL finished))completion


6、 關(guān)鍵幀(keyFrame)動畫

+ (void)animateKeyframesWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewKeyframeAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion

其中需要注意的是添加關(guān)鍵幀的方法:

+ (void)addKeyframeWithRelativeStartTime:(double)frameStartTime relativeDuration:(double)frameDuration animations:(void (^)(void))animations

其中始锚,frameStartTime為動畫開始的時間(數(shù)值為占總時間的比例)

frameDuration為動畫持續(xù)時間(數(shù)值為占總時間的比例)

總體而言刽酱,UIView的動畫效果實現(xiàn)起來都比較簡單,但是想要利用這些簡單的東西完成一個復(fù)雜酷炫的動畫并不是輕而易舉的事情瞧捌,當然棵里,在大量復(fù)雜動畫的情況下,配合使用高性能核心動畫完成動畫效果才是最佳的選擇姐呐。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末殿怜,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子曙砂,更是在濱河造成了極大的恐慌头谜,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,539評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件鸠澈,死亡現(xiàn)場離奇詭異柱告,居然都是意外死亡截驮,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,594評論 3 396
  • 文/潘曉璐 我一進店門末荐,熙熙樓的掌柜王于貴愁眉苦臉地迎上來侧纯,“玉大人,你說我怎么就攤上這事甲脏】舭荆” “怎么了?”我有些...
    開封第一講書人閱讀 165,871評論 0 356
  • 文/不壞的土叔 我叫張陵块请,是天一觀的道長娜氏。 經(jīng)常有香客問我,道長墩新,這世上最難降的妖魔是什么贸弥? 我笑而不...
    開封第一講書人閱讀 58,963評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮海渊,結(jié)果婚禮上绵疲,老公的妹妹穿的比我還像新娘。我一直安慰自己臣疑,他們只是感情好盔憨,可當我...
    茶點故事閱讀 67,984評論 6 393
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著讯沈,像睡著了一般郁岩。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上缺狠,一...
    開封第一講書人閱讀 51,763評論 1 307
  • 那天问慎,我揣著相機與錄音,去河邊找鬼挤茄。 笑死如叼,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的驮樊。 我是一名探鬼主播薇正,決...
    沈念sama閱讀 40,468評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼囚衔!你這毒婦竟也來了挖腰?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,357評論 0 276
  • 序言:老撾萬榮一對情侶失蹤练湿,失蹤者是張志新(化名)和其女友劉穎猴仑,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,850評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡辽俗,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,002評論 3 338
  • 正文 我和宋清朗相戀三年疾渣,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片崖飘。...
    茶點故事閱讀 40,144評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡榴捡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出朱浴,到底是詐尸還是另有隱情吊圾,我是刑警寧澤,帶...
    沈念sama閱讀 35,823評論 5 346
  • 正文 年R本政府宣布翰蠢,位于F島的核電站项乒,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏梁沧。R本人自食惡果不足惜檀何,卻給世界環(huán)境...
    茶點故事閱讀 41,483評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望廷支。 院中可真熱鬧频鉴,春花似錦、人聲如沸恋拍。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,026評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽芝囤。三九已至,卻和暖如春辛萍,著一層夾襖步出監(jiān)牢的瞬間悯姊,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,150評論 1 272
  • 我被黑心中介騙來泰國打工贩毕, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留悯许,地道東北人。 一個月前我還...
    沈念sama閱讀 48,415評論 3 373
  • 正文 我出身青樓辉阶,卻偏偏與公主長得像先壕,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子谆甜,可洞房花燭夜當晚...
    茶點故事閱讀 45,092評論 2 355

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