天天看點

iOS開發UI篇—核心動畫(基礎動畫)

一、簡單介紹

capropertyanimation的子類

屬性解析:

fromvalue:keypath相應屬性的初始值

tovalue:keypath相應屬性的結束值

随着動畫的進行,在長度為duration的持續時間内,keypath相應屬性的值從fromvalue漸漸地變為tovalue

如果fillmode=kcafillmodeforwards和removedoncomletion=no,那麼在動畫執行完畢後,圖層會保持顯示動畫執行後的狀态。但在實質上,圖層的屬性值還是動畫執行前的初始值,并沒有真正被改變。

比如,calayer的position初始值為(0,0),cabasicanimation的fromvalue為(10,10),tovalue為(100,100),雖然動畫執行完畢後圖層保持在(100,100)這個位置,實質上圖層的position還是為(0,0)

二、平移動畫

代碼示例:

iOS開發UI篇—核心動畫(基礎動畫)
iOS開發UI篇—核心動畫(基礎動畫)

代碼說明:

第42行設定的keypath是@"position",說明要修改的是calayer的position屬性,也就是會執行平移動畫

第44,45行,這裡的屬性接收的時id類型的參數,是以并不能直接使用cgpoint這種結構體類型,而是要先包裝成nsvalue對象後再使用。

預設情況下,動畫執行完畢後,動畫會自動從calayer上移除,calayer又會回到原來的狀态。為了保持動畫執行後的狀态,可以加入第48,50行代碼

byvalue和tovalue的差別,前者是在目前的位置上增加多少,後者是到指定的位置。

執行效果:

iOS開發UI篇—核心動畫(基礎動畫)
iOS開發UI篇—核心動畫(基礎動畫)

設定代理:設定動畫的代理,可以監聽動畫的執行過程,這裡設定控制器為代理。

iOS開發UI篇—核心動畫(基礎動畫)
iOS開發UI篇—核心動畫(基礎動畫)

列印position的屬性值,驗證圖層的屬性值還是動畫執行前的初始值{50,50},并沒有真正被改變為{200,300}。

iOS開發UI篇—核心動畫(基礎動畫)

三、縮放動畫

實作縮放動畫的代碼示例:

iOS開發UI篇—核心動畫(基礎動畫)
iOS開發UI篇—核心動畫(基礎動畫)

實作效果:

iOS開發UI篇—核心動畫(基礎動畫)
iOS開發UI篇—核心動畫(基礎動畫)

四、旋轉動畫

iOS開發UI篇—核心動畫(基礎動畫)
iOS開發UI篇—核心動畫(基礎動畫)
iOS開發UI篇—核心動畫(基礎動畫)
iOS開發UI篇—核心動畫(基礎動畫)

提示:如果要讓圖形以2d的方式旋轉,隻需要把catransform3dmakerotation在z方向上的值改為1即可。

anima.tovalue=[nsvalue valuewithcatransform3d:catransform3dmakerotation(m_pi_2+m_pi_4, 1, 1, 0)];

四、補充

可以通過transform(kvc)的方式來進行設定。

代碼示例(平移):

iOS開發UI篇—核心動畫(基礎動畫)
iOS開發UI篇—核心動畫(基礎動畫)

繪制的圖形在y的方向上移動100個機關。

iOS開發UI篇—核心動畫(基礎動畫)
iOS開發UI篇—核心動畫(基礎動畫)

繼續閱讀