ProtoPie 教學 Day3：Skeleton loading

完成的 component 可以活用在各種介面上。

使用簡單的方式在 ProtoPie 上實作 Skeleton loading，最終我們將會把這個效果包成一個可以重複使用的 ProtoPie component。

載入效果原理

從上面的介面發現 skeleton loading 可以拆解成：

• 底色
• 移動的漸層

其實載入效果可以看成一個在既定底色上不斷重複由左至右的連貫動畫，平常看到的通常是淺灰底加上深色（黑色系）漸層移動。
這裏用明顯的色塊呈現載入效果的結構：

構造很簡單，就是漸層在底色上方移動，重複再重複。

因應 Dark Mode 介面，這次也會準備深色底色，上方的漸層則會變成白色漸層。

前置：製作漸層

以淺底色加上黑色系漸層為例，製作黑色系漸層時建議使用純黑色製作，因為純黑色漸層就是漸層的最極端狀態，未來可以透過調整純黑色漸層的透明度設定自己想要的深淺；而深色底漸層搭配的白色系漸層也是相同道理。

中間的漸層部分錨點建議為兩個最深（#000），這樣漸層移動時會比較明顯。

中間最深處為 #000、透明度 100，而兩側的錨點則為 #000、透明度 0。

Sketch 製作時請注意
記得最左邊與最右邊兩側的錨點，黑色系時即便透明度為 0，顏色也要設定為黑色。若漸層中的錨點顏色不統一，則做出來的漸層顏色會不純。

步驟一：Start 設定

製作完黑漸層後，匯入 ProtoPie，並在 ProtoPie 中建立淺色底 #F3F3F3。底色為 290 高寬的正方形，漸層也為 290 高寬的正方形，兩者位置重疊。

Start 觸發漸層 Move

以 Start 觸發 move 反應，將漸層往左移動，設定 Move By X軸 -290。

Duration 要設定為 0 ，這樣在 Prototype 一開始就會執行。

步驟成果

雖然作圖畫面上重疊，但在 Preview 畫面漸層應該在底色左邊。

步驟二：漸層再次 Move

其實只要在 Start 觸發下再設定第二個 Move 就可以讓漸層由底色左邊移動至右邊。
設定 Move By X 軸 580，動畫長度（Duration）5 秒，比較好觀察。

原以為完成了… 但是！

我們成功的讓漸層從左邊移動至右邊，但沒有辦法讓這個動畫重複。所以步驟二可以先忘掉，也把第二步驟的設定都刪掉。

步驟三：Detect 監聽與 Condition

我們需要透過新的觸發外加判斷條件（Condition）達到：
「讓漸層從底色沿X 軸左邊移動至右邊，再重置到底色左邊。」不斷重複的動畫效果。

將漸層與底色群組

在 ProtoPie 中，只要群組起來，群組內物件的 X 軸與 Y 軸都會重新定義並且以群組為基準。

群組後我們可以發現漸層的 (X, Y) 從 (455, 255) 變成 (0, 0)，而漸層將會以群組後的方框為定為基準。

Detect 監聽漸層的 X 軸

新增一個 Detect 觸發，監聽漸層的 X 軸，所以一旦漸層的 X 軸改變就會觸發 Detect 底下設定的反應。

Condition 讓漸層移動和重置漸層的位置

為了能讓動畫能反覆被執行，我們需要設定條件，例如：

• 如果漸層現在位於底色的左邊（ X 位置 -290）
  開始移動 Move To 漸層的 X 位置至 290，動畫長度 1 秒。

如果漸層 X 為 -290 （在左邊）。

Move 漸層至 X = 290 位置。

• 如果漸層現在位於底色的右邊（X 位置 290）
  就重置 Move To 漸層的 X 軸位置為 -290，動畫長度 0 秒（不會產生補間動畫）。

Condition：漸層的 X =290。

觸發 Move 將漸層送回 X = -290 的位置。

完成後你應該會看到…

漸層從左邊到右邊，到底後會重新跳回左邊。

還有最後一步！

看到成果，漸層不是應該只在底色上移動嗎？所以我們須要把漸層遮起來。
ProtoPie 在群組後不是稱為 Group 而是 Container，Container 不僅可以將群組內的元件重新定位，還可以當作遮色片。

Container 的設定項最下方，Clip Sublayers，點擊後就有遮罩的效果。

勾選 Clip Sublayers，超出 Container 大小的元件都會被遮起來。

完成了！

Move To 和 Move By 差異
和步驟二的移動方式 (Move By) 不同，Move To 會移動至確定的 (X,Y) 座標，而 Move By 則是移動量。
步驟三會以 Move To 的方式移動原因是群組後座標都被重置，以群組為基準（群組的左上座標為 0,0 ），所以我們可以很明確的知道移動座標為何。
步驟二因為座標是以整個視窗為主（視窗的左上為 0,0），所以用移動量來控制移動較為適合。

步驟四：包成 Component 以複用

我們每複製一個載入動畫，右側的互動設定欄就會多出一套互動。為了呈現簡潔，我們會將剛剛所設定的互動都包成一個「載入」的 component。

Container 中元件 Constraints 屬性

Constraints 定義元件在 Container 產生大小變化時，會如何跟著 Container 一起變大縮小。
因為載入效果可能是長方形、正方形等等各種形狀，所以漸層與底色應該都要隨著 Container 變形。

我們將上下左右都點開，如此一來底色、漸層都會隨著 Container 的外框延展。

右邊的 Constraints ，上下左右都點開。

最後我們會得到…

在 Preview 畫面上

做 Prototype 的好習慣，就是時常在 Preview 上檢視成果，我們會發現到被拉長的載入元件好像怪怪的…

我們會發現，漸層並不能移動到最右邊，離開可視範圍。

以 Formula 取代固定數值

還記得我們在設計互動時，Move To 的 X 數值都是一個固定的數字（290），也因為如此，在我們拉長 Container 時，漸層的移動還是移動至 X = 290 的位置。

所以我們要以 Formula 取用 Container 的寬取代固定的數值，如此一來不管 Container 被拉的多長，漸層移動的位置都會由 Container 的寬度決定。

點擊 Move 的 X 軸值，有個 Fx 符號，那就是 Formula。

Formula 可以讓我們指定 ProtoPie 中允許的數值。
漸層移動至底色右方的動畫，如果我要取用 Container 的寬度：

取用的方式 `圖層名稱`.width

`Container`.width

請注意
範例中的圖層名稱為 Container 1，所以範例中會是 `Container 1`.width。

現在我們只須要將這個數值帶入原本 Start 和Condition 和 Move 中：

• Start 的 Move 要替換成 -`Container`.width 。

• 如果漸層的 X 座標位於-`Container`.width 的位置，漸層就會移動至 X 座標`Container`.width 的位置，動畫長度 1 秒。

• 如果漸層的 X 座標位於 `Container`.width 的位置，漸層就會移動至 X 座標 -`Container`.width 的位置，動畫長度 0 秒。

轉變成 Component

很簡單，對著 Container 點擊右鍵，選擇 Convert to component。
就會將整個群組轉變為 Component

Component
為了處理有相同互動的元件，讓整個畫面上的互動更簡潔。
Formula 為什麼不須帶入 Container 的 Height？
因為這次的互動中只有 X 軸的移動，而 X 軸的移動會和 Container 的 Width有關。若漸層的移動是斜對角式，就會須要帶入 Container 的 Height。

完成！來做個小結

製作載入動畫可以學到很多概念：

1. 群組後重新定位的特性
2. Start 觸發
3. Condition 條件
4. Move By 和 Move To
5. Formula 的應用

除了長型的狀態之外，因為包成 Container 具備調整圓角的彈性，只需要將載入動畫做成正方形，圓角最大就可以得到圓形的載入動畫，十分好用。

附上這次的實驗室檔案，按此下載。

最後如果你覺得這篇文章實用，不妨分享給別人，也多多利用留言與我交流。
如果有想知道什麼特效是如何製作的，我會在我能力範圍內試試看！
感謝你的閱讀。