iOS 動畫筆記 一

2022-03-14 12:18:19 字數 2575 閱讀 6963

你也肯定喜歡炫酷的動畫!

一:從這裡 quartz2d 開始

在我的學習過程中,我是先從 quartz2d 開始學習的,它裡面的貝塞爾曲線在我們創造精美的動畫的過程中是必不可少的,quartz 2d 它首先就是乙個二維繪圖引擎,同時支援ios和mac系統。下面這裡一篇不錯的文章,仔細的講解了 quartz 2d。想製作精美的動畫,你就得懂quartz 2d裡面的貝塞爾曲線!你要仔細的學習了上面鏈結裡面的內容,我想你也就掌握了 quartz2d 了。

二: 接下來看看 cadisplaylink

就是這個 cadisplaylink,簡單地說它就是乙個定時器!定時器大家最熟悉的可能就是 nstime了吧,那 cadisplaylink 和 nstime 又有什麼區別呢?帶著這些疑問往下看。

它們還是有很大的區別的,這是我們的夥伴總結的 定時器,寫的很詳細了,可以進去看看他們倆的區別。它們倆的建立看下面

// 建立 nstimer 定時器

nstimer *timer = [nstimer scheduledtimerwithtimeinterval:2 target:self selector:@selector(test) userinfo:nil repeats:yes];

// 停止定時器

[timer invalidate];

// 建立cadisplaylink 定時器

cadisplaylink *displaylink = [cadisplaylink displaylinkwithtarget:self selector:@selector(test:)];

// 將建立的displaylink新增到runloop中,否則定時器不會執行

[displaylink addtorunloop:[nsrunloop mainrunloop] formode:nsdefaultrunloopmode];

// 停止定時器

[displaylink invalidate];

displaylink = nil;

三:先說說系統的吧!

(1) calayer 實際上uiview是對calayer封裝,在calayer的基礎上再新增互動功能。uiview的顯示必須依賴於calayer。我們同樣可以跟新建view一樣新建乙個layer,然後新增到某個已有的layer上,同樣可以對layer調整大小、位置、透明度等。

具體講calayer的屬性

(2) uibezierpath   (貝塞爾曲線)

這裡有具體講到貝塞爾曲線!

(3) caanimation  (重點)

首先 caanimation 可以分為以下幾類:

ios動畫(一)

ios動畫(二)

學完看看這個,經典的**購物車效果:立即搶購圖示會大致按照下面的貝塞爾曲線運動到購物車,完後消失,給大家附上大概的思路**!**寫其實挺簡單的,你完全可以試試!

四:能擦出火花

你要了解了上面說的貝塞爾曲線和cadisplaylink,它倆碰撞其實已經能擦出火花了!你要真的認真的學習我上面不管是我寫的還是給大家鏈結裡面我們的同行寫的部落格,我相信基本的動畫大家其實已經也差不多夠用了,關在在於你怎麼樣去靈活的用它。

2017-06-20  更新:

最近又翻出來在看轉場動畫的內容,感覺這篇真的值提到了一些動畫的皮毛,很淺,下面是自己補充的知識點:

認真總結一下核心的coreanimation:

在理解coreanimation之前,必須也要理解uiview和calayer:

總接來說就是如下幾點: 

再看看這個同行總結的coreanimation的結構樹狀圖,這個對理解它還是很重要很有用的:

說明:一:

核心動畫中所有類都遵守camediatiming協議。

caanaimation是個抽象類,不具備動畫效果,必須用它的子類才有動畫效果。

二:caanimationgroup和catransition才有動畫效果,caanimationgroup是個動畫組,可以同時進行縮放,旋轉(同時進行多個動畫)。

catransition是轉場動畫,介面之間跳轉(切換)都可以用轉場動畫。

capropertyanimation也是個抽象類,本身不具備動畫效果,只有子類才有。

三:cabasicanimation和cakeyframeanimation:

cabasicanimation基本動畫,做一些簡單效果。

cakeyframeanimation幀動畫,做一些連續的流暢的動畫。

總結學習連線:

ios開發基礎知識:core animation(核心動畫)

詳解calayer 和 uiview的區別和聯絡

ios動畫學習總結

感謝上面連線作者,有問題還是會持續更新內容!       

iOS動畫筆記之 CAMediaTiming

property cftimeinterval begintime 基本動畫的持續時間 property cftimeinterval duration 基本動畫渲染一次的速度,用於衡量parent time 跟 local time property float speed 時間偏移量 基本上不怎...

iOS開發 簡單動畫筆記

今天因為工作需要,所以在ios試著做一些動畫特效 1.在簡單動畫中,要寫在兩行 之間 uiview beginanimations nilcontext null 動畫 在這裡裡面 uiview commitanimations 關於這兩行 我發現這兩行 關係到新的執行緒 在這兩行 之間的 可能還沒...

js動畫筆記

js動畫有乙個物體變大變小,就是他的style屬性在變化。可以用原生js做到,也可以用jquery做,我們今天說的js原生動畫基礎。這裡動畫效果,我們會用到定時器這個東西。我們先說一下定時器的用法。在js中定時器有這個函式 setinterval function time 週期的呼叫一段 後面的t...