UI設(shè)計中簡單的小動效其實并不簡單

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

在Tubik Studio 的設(shè)計實戰(zhàn)案例當(dāng)中，動效是很重要的組成部分，它們和整個UX 設(shè)計緊密關(guān)聯(lián)，分割不開。今天的文章，我們來看看它的動效都是怎么實現(xiàn)的。

 

時間選擇器動效

鬧鐘應(yīng)用當(dāng)中，鬧鐘自然是APP當(dāng)中交互和功能的核心，動效能夠很好地調(diào)和界面和功能之間的關(guān)系。想要將設(shè)計落實到真實的功能和交互上去，這就要看開發(fā)的功力了。

動畫所有相關(guān)的內(nèi)容都被放在自定義的子類 UIView 當(dāng)中，在這個案例當(dāng)中，我們將其命名為 AnimatedDayView。

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

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

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

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

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

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

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

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

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

鬧鐘開關(guān)

在日常使用過程中，鬧鐘的開關(guān)也是一個非常常用的控件。為了貼合應(yīng)用的主題，鬧鐘開關(guān)的樣式設(shè)計成為一個小太陽。

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

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

不過，當(dāng)開關(guān)關(guān)閉的時候，光暈(3)的Alpha 值會變?yōu)?，動畫停止。這幾個圖層當(dāng)中，最大的圖層是背景（4），這個圖層當(dāng)中包含一個蒙板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 是用來識別關(guān)閉的動作。

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