在前面的兩篇文章《可愛炸！人家的鬧鐘APP為何設計得如此有意思》和《靠著吉祥物，這款鬧鐘APP成功俘獲了用戶的心》當中，我們聊到了Toonie Alarm 這款鬧鐘應用的APP設計過程和吉祥物的設計策略。

想要讓產品能夠像呼吸一樣自然，動效的處理很關鍵。但是，對于遠離設計和開發的普通用戶而言，很難想象這些看起來無比簡單的動效和交互是如此的耗費時間和精力。顯而易見的設計背后，是技術和藝術通力協作。

在Tubik Studio 的設計實戰案例當中，動效是很重要的組成部分，它們和整個UX 設計緊密關聯，分割不開。今天的文章，我們來看看它的動效都是怎么實現的。

時間選擇器動效

鬧鐘應用當中，鬧鐘自然是APP當中交互和功能的核心，動效能夠很好地調和界面和功能之間的關系。想要將設計落實到真實的功能和交互上去，這就要看開發的功力了。

動畫所有相關的內容都被放在自定義的子類 UIView 當中，在這個案例當中，我們將其命名為 AnimatedDayView。

底部的一層是可以無限滾動的 UIScrollView (1)，這一層包含了下面的圖片副本。

在實現無限滾動的效果上，有許多不同的方法。在這個滾動試圖當中，需要重新計算滾動控件的大小，并且將不可見的預覽替換成新的圖像。

在設計 Toonie 的時間選擇器的時候，我們將默認起點設置為上午6點，中點為下午6點，終點為第二天上午6點。

接下來的一層是 Stars UIImageView (2)。這個 UIImageView 曾會隨著時間的選擇，也就是滾動控件而變化。它在白天是透明的，隨著夜晚降臨而逐步出現。

再向上一層，則是用來承載太陽和月亮的 CALayer，SunMoonBackgroundLayer，雖然它和 AnimatedDayView 有著相同的尺寸，但是在運作時間周期上并不相同。這一層會圍繞著一個中心點周期性轉動，從而保證太陽和月亮會次第出現。太陽（4）和月亮（5）位于 SunMoonBackgroundLayer 之上，也是兩個獨立的圖層。月亮在旋轉方向上和這一層是一樣的，但是太陽則會從相反的位置旋轉出項。值得一提的是，月亮和太陽出現的角度尺寸并不一樣。

在這個環節，最重要的問題是要算清楚每一層的旋轉角度和程度，滾動的距離有多遠，等等等等。滾動距離其實是最容易計算的，變量始終是時間，也即是用戶在 UIDataPicker 上所選擇的時間。現在，計時器的默認初始時間是上午6點整，如果用戶選擇上午9:10的鬧鐘，那么我們需要計算時間差（190分鐘），然后將其換算成各個組件需要運動的位移大小（滾動多少像素，旋轉角度等）。當經過24小時，背景向下滾動的距離相當于它本身的長度，由此可以計算出一分鐘背景向下滾動的距離：每分鐘運動距離=背景圖片高度/每天的分鐘數，這樣也就知道這個時間差內（190分鐘），背景要運動的距離了。

接下來，另外一件事情就是用Alpha 通道來控制星星的變化。我們可以根據時間節點來控制特定位置的Alpha 通道值來控制星星的顯示。在早上6點的時候，這些位置的Alpha 值為0，因為白天開始了。直到下午6點之后，繁星初現，Alpha 值從0開始，到晚上12點到達1。控制這一切的核心參數同樣可以是背景圖像的移動距離，或者當前位置，因為這一參數和當前時間是緊密關聯的，可以輕松計算出來。開發可以通過控制 Alpha 值的相關函數來影響顯示效果。

旋轉角度也同樣可以通過簡單的計算來確定。6點的時候為0度，24小時旋轉360度，簡單的除法就可以算出每分鐘旋轉的角度。

另外一個需要控制的視覺元素是云。它的出現時間是由NSTimer 所影響的，系統內置了3種不同樣式的云朵，當它出現的時候，會隨機賦予一個Alpha 通道值，并且從屏幕右方出現，向左緩慢運動。定時器會隨機生成云朵，當它運動到屏幕之外就完全消失。

鬧鐘開關

在日常使用過程中，鬧鐘的開關也是一個非常常用的控件。為了貼合應用的主題，鬧鐘開關的樣式設計成為一個小太陽。

鬧鐘開關的運作方式，你可以通過代碼來了解它的運行方式。設計上，整個鬧鐘按鈕分為4個不同的圖層。

圓角矩形的背景框（4）是用來承載按鈕的元素，在它上方靠近右邊緣的小太陽(2)是開關主體，它可以在底部的槽（1）的范圍內左右運動，同時，為了具備裝飾性，加入了不斷旋轉的太陽光暈（3），光暈被設計為單獨的圖層，它會不斷的旋轉，不會和其他的因素產生交叉關聯。

不過，當開關關閉的時候，光暈(3)的Alpha 值會變為0，動畫停止。這幾個圖層當中，最大的圖層是背景（4），這個圖層當中包含一個蒙板CAShapeLayer。

let switcherBackgroundMask = [[CAShapeLayer alloc] init];
switcherBackgroundMask.fillRule = kCAFillRuleEvenOdd;
UIBezierPath* viewPath =[UIBezierPathbezierPathWithRoundedRect:self.boundscornerRadius:cornerValue];
UIBezierPath* switcherBackgroundPath = [UIBezierPath bezierPathWithRoundedRect:switcherRect cornerRadius:switcherHeight/2.0];
[viewPath appendPath:switcherBackgroundPath];
switcherBackgroundMask.path = viewPath.CGPath;

蒙板塑造了整個圓角矩形的外輪廓。在交互的控制上，還添加了兩個手勢識別器：UITapGestureRecognizer 是用來識別打開的動作，而UIPanGestureRecognized 是用來識別關閉的動作。

在這個動效設計過程中，想要做到自然可用的動效，動效設計師需要仔細地推敲和分割元素，在整個方案上深思熟慮，才能最終實現正確的效果。

【這些設計實戰同樣來自Tubik Studio】

1. 《富有未來感的柏林之夜APP，是這樣設計出來的》
2. 《設計實戰！城市指南網站著陸頁是這樣設計出來的》
3. 《這款給醫生的專業APP，設計上有著怎樣不同的要求？》
4. 《幫你策劃盛大婚禮的APP，設計思路是這樣的》
5. 《這款面向大眾的理財APP，設計過程是這樣的》
6. 《一款真正讓人專注的效率應用，應該這么設計》

原文地址：uxplanet
原文作者：Tubik Studio
優設譯文：@陳子木

本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com