極客班IOS開發(fā)高級進(jìn)階第二周筆記

從第二周開始學(xué)習(xí)明顯變得吃力好多,尤其是后半部分的課程理論知識理解起來要困難很多,筆記就先整理一下實操性比較強(qiáng)且十分重要的動畫部分。



動畫效果

動畫效果是交互美感的重要部分,iOS系統(tǒng)以其出色的系統(tǒng)動畫效果給予用戶出色的交互體驗。課程中提到,動畫的原理來自視覺的殘留效應(yīng),視覺神經(jīng)反應(yīng)速度約16分之1秒,只要畫面變化速度快于視覺神經(jīng)反應(yīng)速度就會感覺是連續(xù)的,理論上10FPS(10幀每秒)就感覺動畫流暢,16FPS就完全平滑。電影膠片達(dá)到了24FPS每秒,計算機(jī)顯示要60FPS才能讓人感覺平滑。


UIView提供的動畫支持

UIView有兩套API:

1.(UIViewAnimation):deprecated 該API已經(jīng)過時啦,所以我們一般用另一個

2.UIView(UIViewAnimationWithBlocks)

UIView(UIViewAnimationWithBlocks)提供了三種類方法:

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

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

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

在里面修改View的屬性,它們就會把動畫從當(dāng)前狀態(tài)過渡至目標(biāo)狀態(tài)里面。

可以修改的UIView動畫屬性如下:

frame

bounds

center

transform

alpha

backgroundColor

contentStretch


如果有連續(xù)的動畫動作變化,使用UIView(UIViewAnimationWithBlocks)就沒有那么好用了,iOS7之后提供了UIView的Keyframe動畫支持。

(UIViewKeyframeAnimations)提供了兩個類方法:

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

只使用上面的類方法,和之前差不多,需要增加中間狀態(tài)的話,就需要下面的這個類方法。

+(void)animateKeyframesWithRelativeStartTime:(double) relativeDuration:(double) animations:(void (^)(void))

需要注意的是startTime和duration都是比例值,從0-1.0。


Spring Animation 彈簧動畫

自iOS7系統(tǒng)開始全面使用彈簧動畫。

這讓我想起了之前學(xué)習(xí)AE做動效的時候,彈性形變復(fù)合人們的力學(xué)感受,應(yīng)用在動畫之中效果非常棒,所以那時候不管什么動效都要加個彈性效果。

這里要說一下彈性效果的要點(diǎn)了,一是速度曲線要設(shè)置成由慢到快的具有加速度的曲線,二是在到達(dá)運(yùn)動目標(biāo)位置需要前后的反復(fù)回彈,根據(jù)阻尼的不同最后靜止在目標(biāo)位置。

Spring Animation 提供了一個類方法來實現(xiàn)動畫效果:

+(void)animationWithDuration:(NSTimeInterval)duration? //總時長,一個浮點(diǎn)數(shù),以秒為單位

delay:(NSTimeInterval)delay? ? ? //延時啟動,一個浮點(diǎn)數(shù),以秒為單位

usingSpringWithDamping:(CGFloat)dampingRatio? ? ? //阻尼值0-1.0

initalSpringVelocity:(CGFloat)velocity? ? ? ? ? //初速度

options:(UIViewAnimationOptions)options

animations:(void (^)(void))animations

completion:(void (^)(BOOL finished))completion


最后是在Autolayout環(huán)境下做動畫

主要的方法是修改constraint,在修改之后調(diào)用下面的方法,就能夠?qū)崿F(xiàn)動畫效果:

-[view setNeedsUpdateConstraints]

-[view layoutIfNeeded] in animation block



View Transition?

View切換動畫:用動畫過程提示已經(jīng)切換到新界面叫View Transition。

在iOS中切換動畫分為兩類

一類是小的方法,即修改子視圖顯示 small changes

UIView的類方法:

+transitionWithView:duration:options:animations:completion:

WithView:參數(shù)是上級View

duration:指定動畫的長度

animations:一個block參數(shù),做subview動畫的管理

completion:一個block參數(shù),可安排一些代碼在動畫完成后工作。

options:指定用那種類型的動畫,可選參數(shù)如下

UIViewAnimationOptionTransitionNone

UIViewAnimationOptionTransitionFlipFormLeft

UIViewAnimationOptionTransitionFlipFromRight

UIViewAnimationOptionTransitionCurlUp

UIViewAnimationOptionTransitionCurlDown

UIViewAnimationOptionTransitionCrossDissolve

UIViewAnimationOptionTransitionFlipFromTop

UIViewAnimationOptionTransitionFlipFromBottom

為了性能考慮,默認(rèn)時動畫效果是subview的一個snapshot(照相圖片)來完成的,因此圖片內(nèi)容在動畫過程中是不變的,如果view內(nèi)部也需要有動畫效果,就必須添加下面的參數(shù),允許Subview內(nèi)部也有動畫效果:

UIViewAnimationOptionsAllowAnimatedContent

最后還有一個小貼示:子視圖類(subview)的[show, hide, add, remove]這四種情況會觸發(fā)動畫事件。


還有一類是View切換動畫是視圖替換:一般是場景切換,變化較大,從一個場景(fromView)切換到另一個場景(toView)

類方法有:

+transitionFromView:toView:duration:options:completion:

默認(rèn)的轉(zhuǎn)換場景是將一個View刪除,再增加一個View

也可以將兩個View都添加到一個父View中,用options參數(shù)傳入UIViewAnimationOptionShowHideTranstionViews這樣就不會刪除,直接顯示一個View,隱藏另外一個View。性能更好,但是由于要同時加載兩個subview內(nèi)存開銷較大。



Core Animation

之前在UIView層面提供的動畫制作方便,但是不能制作精細(xì)的動畫,這時候就需要Core Animation。

Core Animation主要是操縱Layer來形成動畫效果,Core Animation將大部分實際的繪圖任務(wù)交給了圖形硬件處理,圖形硬件會加速圖形渲染的速度,因此性能會非常好。

對Layer屬性的修改都在CATransaction里,首先用CATransaction +begin來顯式地開始一個事務(wù)。之后用CATransaction setValue:forKey來處理事務(wù),可進(jìn)行以下的操作:

kCATransactionAnimationDuration;

kCATransactionDisableActions;

kCATransactionAnimationTimingFunction;

kCATransactionCompletionBlock;

//實際上這些和UIView的操作都是一回事

//CATransaction操作還可以互相嵌套。

處理完畢后可以用 CATransaction +commit來確認(rèn)操作的修改并提交到Render Server上。


隱式動畫(Implicit Animation)

Core Animation 認(rèn)為動畫總是需要的,所以默認(rèn)開著;修改layer的可動畫屬性時,會自動觸發(fā)動畫。

隱式動畫是一種最簡單的動畫,不用設(shè)置定時器,不用考慮線程或者重畫。

Layer的可動畫屬性非常多,這里就不一一例舉了。

隱式動畫的機(jī)制:

當(dāng)我們修改屬性時,Layer就會調(diào)用自身delegate中的-actionForLayer:forKey的方法,這個方法會查找對應(yīng)key的CAAction和style屬性,如果都沒有的話會調(diào)用layer的-defaultActionForKey方法。

Tips:如果需要禁止隱式動畫,只要讓-actionForKey:找不到CAAction就可以了,有兩種實現(xiàn)方法:1、在delegate中重寫一個-actionForKey:方法,并且將返回值設(shè)為nil。2、調(diào)用[CATransaction setDisableActions:YES];將動畫效果關(guān)閉。


顯式動畫

隱式動畫是系統(tǒng)提供的我們修改不了,如果要自己設(shè)置動畫效果要用到顯示動畫CAAnimation。

Basic Animation:

self.view.layer.backgroundColor=[UIColor blueColor].CGColor;

CABasicAnimation +animationWithKeyPath:animatableProperty

config animation

formValue://如果沒有設(shè)置,則使用當(dāng)前值

toValue

byValue

duration

repeatCount = HUGE_VALF; //將動畫設(shè)置為無限循環(huán)

layer -addAnimation:animation forKey:animationName

set layer:property to final value

需要注意的是CAAnimation(以及CAAnimation的子類),全部都是顯式動畫,這樣動畫播放后,表現(xiàn)層回恢復(fù)到模型層的原始狀態(tài),這就意味著,如果動畫播放完后,會恢復(fù)到原來的樣子,因此所以在動畫播放完后要對模型層進(jìn)行修改,課程中給了例子:

self.view.layer.backgroundColor=[UIColor blueColor].CGColor;


Keyframe Animation

這個也是一個顯式動畫,它非常強(qiáng)大,因為它有一個非常重要的屬性Path,我們可以自定義任意的Path開控制動畫效果。

我們可以先利用CAKeyframeAnimation +animationWithKeyPath:animatablePropertyName創(chuàng)建一個Keyframe Animation,而path是一個CGPathRef 對象,默認(rèn)是空的,當(dāng)我們創(chuàng)建好CAKeyframeAnimation的實例的時候,可以通過制定一個自己定義的path來讓某一個物體按照這個路徑進(jìn)行動畫。


Group Animation

CAAnimationGroup +animation

agroup.animations<NSArray*>

group.duration 整個組的時間,如果在其組內(nèi)的動畫時長大于整組的時間,那么整組時間到之后會強(qiáng)制中斷動畫

layer -addAnimation:group:forKey:


Timing

每一個Layer都有自己的時間,需要在彼此之間做換算,可以用以下方法做換算:

-convertTime:fromLayer:

-convertTime:toLayer:

需要注意的是CACurrentMediaTime() //提供了絕對時間,也就是系統(tǒng)的時間

returns current system time?

mach_absolute_time() to seconds


動畫部分就先整理這么多吧,后面的Group Animation和Timing由于沒有演示實操,并不是很懂QAQ感覺我還需要找些資料再深挖一下。其它課程部分的內(nèi)容慢慢整理吧,感覺極客班的課程信息量爆炸,加油自勉吧QAQ

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 在iOS中隨處都可以看到絢麗的動畫效果,實現(xiàn)這些動畫的過程并不復(fù)雜,今天將帶大家一窺ios動畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,699評論 6 30
  • 在iOS中隨處都可以看到絢麗的動畫效果,實現(xiàn)這些動畫的過程并不復(fù)雜,今天將帶大家一窺iOS動畫全貌。在這里你可以看...
    F麥子閱讀 5,275評論 5 13
  • 在iOS實際開發(fā)中常用的動畫無非是以下四種:UIView動畫,核心動畫,幀動畫,自定義轉(zhuǎn)場動畫。 1.UIView...
    請叫我周小帥閱讀 3,338評論 1 23
  • 前言 本文只要描述了iOS中的Core Animation(核心動畫:隱式動畫、顯示動畫)、貝塞爾曲線、UIVie...
    GitHubPorter閱讀 3,753評論 7 11
  • 先看看CAAnimation動畫的繼承結(jié)構(gòu) CAAnimation{ CAPropertyAnimation { ...
    時間不會倒著走閱讀 1,804評論 0 1

友情鏈接更多精彩內(nèi)容