iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 23
1

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

? 隕石小故事

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

Overview

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


|事前準備

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

-製作 TableView 畫面

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

-新增空白 Data 的初始化器

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


實作

| 創建 Loading 資料 & Loading 效果

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

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

讓我們看看效果吧:

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

再看一次畫面:

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

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

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

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


Summary

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


上一篇
D22 - 我誰~ㄕㄜ....Safari
下一篇
D24 - 拿起次元切割刀,大卸八塊 ViewController
系列文
諸神黃昏下的 iOS 工程師31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言