Drawing Animation + Custom Loading View


  • 通過 UIBezier 在  Layer 上畫一個 Chat 的圖案
  • 製作一個 Loading 畫面

DrawingAnimation + CustomLoadingView

Drawing Animation

這裡放了一個名字叫 customCanvas 的 View 在畫面上,我們打算在這個 View 的 Layer 上畫圖。

UIBezierPath

這裡通過 UIBezierPath 來畫出上面這張圖,當然靠想像力來畫有點難度,可以借助 PaintCode 這樣的工具來幫忙。

然後定義 shapeLayer:CAShapeLayer 的基本參數,比如粗細、顏色、填充等等,其中 path 就是上圖的路徑。

並將它加入到 customCanvas 當中

當我們拖動 UiSlider 的時候,改變畫圖的進度


Custom Loading View

我們另外建了一個 LoadingViewController 用來顯示 Loading 的畫面。

這次要畫 Loading 的圓的路徑就容易多了

然後在加入到 shapeLayer 當中

這次多了自動去執行動畫的部分,通過 repeatCount 可以設定動畫執行的次數,這裡設定了無數次 Float.infinity

Present LoadingViewController

這裡把 ViewController 最底層的 View 設定了 backGroundColor = UIColor.clear
這樣搭配設定 modalPresentationStyle / modalTransitionStyle 可以實現 ViewController 半透明的效果。

在 HomeViewController 中, present LoadingViewController


筆記

  • 思考:在使用 UIBezierPath 畫圖的時候,如何實現 autoLayout 而不是 hard code 方式給予數字。

參考

 

發表迴響

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