iOS高階4 動畫總結

2021-07-26 05:11:02 字數 3463 閱讀 3182

1.基礎:逐幀 與 關鍵幀

逐幀動畫:

類似於手繪翻頁方式,我們可以將這個水杯在每幀畫面中的位置一一找出來,這樣實現動畫的方式就叫作 逐幀動畫,我們需要處理動畫中的每一幀。

我們一般在計算機上用 fps ( frames per second) ,即 每秒的幀數 來表示動畫的重新整理速度,基於螢幕的重新整理率等其他原因,在計算機上一般採用 60 fps。

如果運動變化幅度較緩,減半到 30 fps 時,我們肉眼也是可接受的。

較低的 fps 會讓我們有「卡頓」的感覺。

關鍵幀動畫:

乙個涉及數學和物理的問題:乙個杯子初始位置在左邊,n秒後勻速運動到右邊,那麼在每 1/60 秒的時候,這個杯子的位置顯然是可以計算出來的了。

所以,我們其實只需要指定一些 關鍵 資訊就能讓計算機自己計算出每一幀杯子的位置了:

起始位置,比如乙個座標 (0,0)

結束位置,再比如乙個座標 (100,0)

動畫總時間,比如 0.25 秒

勻速運動

這種方式就稱之為 關鍵幀動畫。即我們只需要給定幾個關鍵幀的畫面資訊,關鍵幀與關鍵幀之間的過渡幀都將由計算機自動生成。

這裡說的 關鍵幀動畫,是指的廣義上的一種動畫製作方式,並不僅指 cakeyframeanimation,cabasicanimation的實現方式也屬於 關鍵幀動畫
2.ios 動畫

乙個動畫的本質,就是動畫物件(這裡是 uiview)的狀態,基於時間變化的反應了。簡單說,就是給定任意乙個時刻,如果你都能得到這個動畫物件的位置和、形狀等等屬性,你就能實現這個動畫了。

屬性值的變化,既可能是位置、透明度、旋轉角度等的變化,也包括形狀的改變,比如從一條直線變化成乙個圓圈,目標就是要得到變化過程中特定時刻的中間態。

ios 的動畫分為兩大類:

系統提供的 關鍵幀動畫 實現方式;使用者指定 關鍵 資訊,系統實現動畫過程,對使用者而言操作起來會簡單些。

逐幀動畫 實現方式;使用者自己 畫 出每一幀畫面,系統操作方法簡單,但使用者操作的工作量就會大一些。

逐幀方法繪製:

簡單的說,要實現逐幀的方式,就是需要 週期性 的呼叫 繪製 方法,繪製每幀的動畫物件。

這裡說的 繪製,不光是指覆寫 uiview 的 - drawrect:的方法來手動重繪檢視,也包括修改 uiview 它的屬性,比如位置、顏色等。

ios 的動畫都是基於 calayer 的,ios 的 uiview 背後都有乙個對應的 calayer 。對 uiview 的修改實際上都是對背後 calayer 的修改。

但如果在逐幀繪製的方法中修改了乙個自建的 calayer,這個 calayer 不是對應某個 uiview 的,需注意系統的 隱式動畫 的影響,後面會提到這點。

用逐幀方法繪製的原理不是很麻煩,麻煩的是繪製過程。

對於乙個複雜動畫,你可能需要運用各種物理、幾何知識去計算檢視中間狀態的資訊。

比如要實現一條直線捲曲變化為乙個圓的動畫,你就需要計算出中間態的曲線的彎曲程度和位置。

著名的 facebook 的 pop 動畫框架,就是使用 cadisplaylink 這種逐幀繪製的方式實現的。

關鍵幀動畫實現方式:

用 uiview 移動的簡單例子。這裡面有兩個關鍵幀,起始幀和結束幀,除此之外還有2個關鍵資訊:

起始幀,變化資訊:座標為 (0,0)

結束幀,變化資訊:座標為 (100,0)

動畫時間,0.25秒

勻速運動

座標 資訊是 uiview 的乙個屬性(實際是對應到 calayer 的屬性),在動畫實現裡,我們只需要指定起始和結束的兩個關鍵值就夠了,中間的過渡值都有系統自動生成。

這裡出現了兩種值,乙個是我們設定的,乙個是系統生成的,所以要先在這裡插入乙個 模型層 和 展現層 的概念了

calayer 的同乙個屬性值,會分別儲存在模型層 modellayer ,和展現層 presentationlayer 中。當我們修改屬性值時,是修改的模型層的數值,動畫時系統根據模型層的變化,生成的過渡值,是儲存在展現層中的。

在 calayer 的物件裡能直接訪問到這兩層的資訊。

而 calayer 的底層實現實際不止這兩層,但我們現在討論動畫的時候,可以只關心這兩層。

在整個動畫過程中,呈現出來的過程是這樣的:

動畫前,顯示模型層的當前值;

動畫開始,切換顯示展現層的值;

動畫過程中,展現層的值根據時間變化,我們看到的實際是展現層的值在變化;

動畫結束,切換回顯示模型層的值,此時模型層的值應被修改為動畫結束時的值。

用一段**來解釋下動畫過程。

uiview *view = [[uiview alloc] initwithframe:cgrectmake(0, 0, 100, 100)];

view.backgroundcolor = [uicolor redcolor];

[self.view addsubview:view];

cabasicanimation *animation = [cabasicanimation animationwithkeypath:@"position"];

animation.fromvalue = [nsvalue valuewithcgpoint:cgpointmake(50, 0)];

animation.tovalue = [nsvalue valuewithcgpoint:cgpointmake(150, 0)];

[view.layer addanimation:animation forkey:nil];

// view.frame = cgrectoffset(view.frame, 100, 0);

你會發現動畫結束後,view 又跳回了原來的位置,這是因為最後一行**注釋了,而這行**的功能就是實現第4步,將模型層的值修改為動畫結束時的值。

動畫實現

**中的 cabasicanimation 就是真正的動畫實現部分,也就是設定關鍵幀資訊的地方。

將動畫加入 calayer 的**定義為:

- (void)addanimation:(caanimation *)anim forkey:(nsstring *)key

接受的型別是 caanimation 型別,有下面這些子類:

cabasicanimation,可設定起始結束兩個關鍵幀的資訊。

cakeyframeanimation,除首尾外,還可新增多個中間關鍵點。

caanimationgroup ,可組合多個動畫,因為上面兩種動畫一次只能設定乙個屬性值。

catransition,圖層過渡動畫,預設是淡入。比如修改乙個 calayer的背景色時,是從初始色慢慢淡入過渡到結束色。

可修改為新顏色把舊顏色頂出去等效果。還可使用 cifilter 濾鏡做過渡效果,一些開源 uiviewcontroller 的過渡動畫使用了這種方式。

IOS 動畫總結

uiview動畫使用iphone作為開發平台,你可以體驗到uiview帶來的既另類又有趣的動畫功能,這個功能可以在更新檢視時放緩節奏,產生流暢的動畫效果,進而改善使用者體驗。可以產生動畫效果的變化包括 1 frame 基於父檢視的位置和大小 2 bounds 改變檢視的框架和邊界 3 center ...

iOS 動畫總結

1.概述 uikit直接將動畫整合到uiview類中,實現簡單動畫的建立過程。uiview類定義了幾個內在支援動畫的屬性宣告,當這些屬性發生改變時,檢視為其變化過程提供內建的動畫支援。執行動畫所需要的工作由uiview類自動完成,但仍要在希望執行動畫時通知檢視,為此需要將改變屬性的 包裝到乙個 塊中...

IOS 動畫總結

就兩種,uiview自帶動畫和核心動畫 core animation 一 uiview自帶動畫 uikit框架中 平移 縮放 平移 縮放 平移 變換 平移 縮放 旋轉 透明度 背景色 重點介紹transform的使用 eg view.transform cgaffinetransformmakesc...