第 17 章
基礎動畫、 視覺效果與解除 Segues

Animation can explain whatever the mind of man can conceive. This facility makes it the most versatile and explicit means of communication yet devised for quick mass appreciation.

– Walt Disney

在 iOS 中,想要建立一個精緻的動畫,不需要撰寫複雜的程式碼。你只需要認識一個 UIView 類別中的方法即可:

UIView.animateWithDuration(1.0, animations)

此方法有好幾種的變化,並提供另外的設定與功能。這是每個視圖動畫的基礎。

首先,最重要的是要了解什麼是動畫?動畫是如何做出來的?動畫是藉由一連串的靜態圖片或影格(frame )的快速顯示,做動作的模擬與形狀的變化。物件的移動與變化其實是一種錯覺。舉例來說,一個逐漸變大的圓實際上是由一系列的影格連續顯示而成。一開始是由一個點開始,每一個影格的圓,會比前一個更大一點。因此會產生點逐漸變大的錯覺。圖 17-1 列出一連串的靜態圖片。為了讓範例簡單點,我只顯示 5 個影格,但想要達到流暢的轉場與動畫效果,你需要製作更多的影格才行。

圖 17-1. 由連續影格所產生的動畫
圖 17-1. 由連續影格所產生的動畫

現在,你已經對動畫有了基本的認識,那麼要如何在 iOS 中建立動畫呢?以逐漸變大的圓為例,你知道動畫是從點開始(也就是起始狀態),然後最後是成為一個大圓(也就是終止狀態)。主要的挑戰是在這兩個狀態中產生影格。你可能認為要有一個演算法(algorithm),寫上數百行程式碼才能在兩者間產生一系列的影格。而 UIView 動畫會幫助你計算開始與終止狀態間的影格,並產生流暢的動畫。你只要呼叫 UIView. animateWithDuration 方法來告訴 UIView 的開始與終止狀態即可,剩下的部分都可交給 iOS,這聽起來很簡單對吧 !

要了解技術的最佳方式莫過於以實際例子來進行。我們將在 FoodPin App 加上一些基礎動畫。以下是準備要進行的工作:

  • 在細節視圖加上一個 「Rate it」按鈕。
  • 當使用者點擊評價按鈕,會帶出一個評價視圖控制器,此時按鈕會以動畫呈現,提供給使用者來對餐廳做評價。

透過評價視圖控制器的建立,我將教導你如何使用UIView 建立基本動畫。除此之外,我將會告訴你如何使用內建的 API 來建立模糊背景,並知道如何在不同控制器間使用 unwind Segue 來傳遞資料。

圖 17-2. 在細節畫面加上評價功能
圖 17-2. 在細節畫面加上評價功能
本文摘自《iOS 13 App程式設計實戰心法》一書,博碩授權轉載。如果你想更深入學習Swift程式設計和下載完整程式碼,你可以從AppCoda網站購買完整電子版。

results matching ""

    No results matching ""