Loading Animation – 模仿知乎加載畫面

繼續通過練習來提高做動畫的能力。


Loading Animation – 模仿知乎 Loading 畫面

在 iOS 版的「知乎」應用裡面,讀取畫面的時候會跳出類似上面的載入動畫。

線條在圓形的邊上繞圈,每次的出發點都不一樣,並且線條在拉伸出去以後接著就跟著回收線條的動畫。


LoadingView

建立 LoadingView 放上 cycleLayer 設定填充色、筆頭、線條等。


動畫分解

動畫的三個點,線條拉伸、線條回收、每次的出發點不同。

通過 CABasicAnimation 對 strokeStart / strokeEnd 做動畫來實現畫面上的線條動畫。

線條回收

線條拉伸

線條回收 + 線條拉伸

通過 CAAnimationGroup 我們可以把上面兩個動畫結合起來。

線條回收 + 線條拉伸 + 繞圈

每一次開始做動畫的位置不同,可以通過將整個圓圈進行旋轉來讓視覺上看起來每次線條的出發點不同。


Reference

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *