讓我們使用 TableView 來製作一個 Loading 效果吧！

? 隕石小故事

我記得是在遠端工作之前，有個案子希望我在請求資料的畫面做一個 Loading 效果，但是，他不想要彈出式的 Loading 畫面，而是元件本身看起來有在讀取的動畫效果（類似這種效果），而當時的案主也很熱心的附上一個 Loading 的 Gif 欓給我，但是因為是網路上面的素材，所以跟我們的 APP 畫面看起來不太一樣，一氣之下，只好提起我動畫師的精神??自幹一個 Loading 效果。

Overview

當初想製作這個動畫的目的很簡單，第一個點是蠻常看到這種動畫效果，想嘗試自幹看看（超愛做動畫），第二點就是案主給的 Gif 欓真的跟原本畫面差超級多，身為一個工程師、設計師、動畫師真Ｄ看不下去，決定自己來。因此，這次就來跟大家分享如何製作 TableView 的動畫效果吧。

｜事前準備

既然都要做 Loading 效果了，那就實際來接一隻 API 玩玩吧～
# 好想工作室 書架 API

-製作 TableView 畫面

首先我們簡單製作一個 TableView 的畫面即可：

-新增空白 Data 的初始化器

接著我們到我們的資料結構下，新增一個 init 用來實例化空白的 Data，之後我們會透過他來產生 Loading 的資料和 Cell：

實作

| 創建 Loading 資料 & Loading 效果

首先我們建立一個 setupLoadingData 函數，我們會先根據 cell 高度計算出填滿整個 tableView 需要多少個數量的 cell，並且產生相對應空白資料的 cell：

接著新增一個 startLoading，我們會在執行動畫之前透過 setupLoadingData 產生空白資料，接著透過 visibleCells 獲取畫面上所有 cell，並且執行 autoreverse 和 repeat 的動畫：

讓我們看看效果吧：

讓我們把動畫加到我們的請求函數中吧，這邊加上 DispatchQueue.main.asyncAfter 只是為了讓他延遲執行，讓我們的動畫多跑一點：

再看一次畫面：

這邊我們會發現我們在 reloadData 的時候畫面看起來會有點突然，有點像是畫面閃一下，沒辦法與前面的動畫做一個很好的銜接。所以，我們也來幫我們 reloadData 時做一個動畫效果：

我們在接收到資料的時候，會做一個 alpha 變為 0 的動畫，接著動畫結束後才會執行 reloadData，最後再執行一個 alpha 變為 1 的動畫。最後讓我們用這個方法取代原有的 reloadData。

讓我們看看最後的成果吧：

你也可以試著加入其他動畫效果看看（噁：

Summary

那我們這次 TableView Loading 的動畫教學就到這邊結束，希望大家學會如何套用這個效果在你的 TableView 上面，你當然還可以在其中加入其他的動畫效果，使畫面看起來更生動。如果有什麼更好製作這種 Loading 動畫效果的方式，也歡迎分享與我交流喔～