iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 9
0

讓我們實作一個阻擋使用者操作 Loading 的畫面吧。

? 隕石小故事

身為一個前端開發者,最大的敵人無非就是「使用者」了,使用者想法超出我們想像,永遠都有辦法找出程式的例外狀況xDD。當某些時候有些流程是需要等待的時候,如果使用者這時候還能夠進行其他操作時,那麼可能導致這次請求會操作可能會出現例外的情況,這時如果有一個加載畫面可以阻擋使用者畫面的話,就能預防使用者惡魔般的操作了?。

Overview

如前面小故事所述,某些需要等待的時候,如果讓使用者能夠隨意操作流程時很容易發生意外狀況,像是金流的流程,如果請求還沒發出或是還沒回應時,如果使用者還能夠進行操作時,可能會發生我們無法預期的狀況。而在這種需要等待回應的功能時,如果我們有一個加載畫面能夠讓使用者等待,並且無法進行其他操作(是情況能夠允許返回上一步或取消),就能減少意外狀況的發生。


開始實作

|實作 Loading 畫面

這邊我們也能使用 D8 所學到的 Lottie 來做為我們的加載動畫 ??

因為我們會在許多畫面會需要加載動畫,所以在這邊我們會新建一個 LoadingViewController 的 Xib 來方便我們覆用它,這邊我們就簡單建立一個畫面:

這邊中間的白色的 View 為我們的 Loading 動畫,這邊我們使用 Lottie 的 AnimationView 來做,而背景是有透明度的黑色,接著讓我們 present 這個 LoadingViewController 看看成果:

這時候你會發現我們所 presentLoadingViewController 的背景會突然變成黑色的並且擋住了我們原有的內容,而這時候如果我們想要看到我們底下 ViewController 的內容,我們必須在 present LoadingViewController 之前設置 LoadingViewControllermodalPresentationStyle.overCurrentContext,接著運行看看:

這邊因為我們預設的 prsent 轉場方式為由下往上飛入的效果,但這種方式跳出 loading 畫面似乎有些突兀。因此,這邊我們也設定這個 loading 畫面 present 的轉場效果,將 .modalTransitionStyle 設為.crossDissolve 再次運行看看:

Mmmmm... 非常好,沒有之前飛入效果的那麼突兀。而我們呈現 Loading 畫面的程式碼如下,之後我們寫個方法讓他隨時都能被叫出來吧!


|將 Loading 畫面放到擴充功能吧!

那我們要怎麼樣才能隨時呼叫這個 LoadingViewController 呢?答案很簡單,我們可以透過 extension 我們原有的 ViewController,並且新增一個 presentLoadingVC 的 functions:

這麼一來我們只需要在我們需要出現 loading 畫面出現的時候使用 presentLoadingVC 這個方法即可:


Summary

LOL 梗亂入抱歉。

那麼這次製作防止操作的 Loading 畫面教學就到這邊,希望大家學會做出一個具有透明度的 Loading 效果,並且能夠暫時讓使用者無法進行其他的操作,如果有更好的方式(阻擋使用者),也歡迎大家與我分享。


上一篇
D8 - 抱歉我不是動畫師,是工程師
下一篇
D10 - 神說:「要有 Picker」,就有了 Picker
系列文
諸神黃昏下的 iOS 工程師31

尚未有邦友留言

立即登入留言