想要讓產(chǎn)品能夠像呼吸一樣自然,動(dòng)效的處理很關(guān)鍵。但是,對于遠(yuǎn)離設(shè)計(jì)和開發(fā)的普通用戶而言,很難想象這些看起來無比簡單的動(dòng)效和交互是如此的耗費(fèi)時(shí)間和精力。顯而易見的設(shè)計(jì)背后,是技術(shù)和藝術(shù)通力協(xié)作。
在Tubik Studio 的設(shè)計(jì)實(shí)戰(zhàn)案例當(dāng)中,動(dòng)效是很重要的組成部分,它們和整個(gè)UX 設(shè)計(jì)緊密關(guān)聯(lián),分割不開。今天的文章,我們來看看它的動(dòng)效都是怎么實(shí)現(xiàn)的。
鬧鐘應(yīng)用當(dāng)中,鬧鐘自然是APP當(dāng)中交互和功能的核心,動(dòng)效能夠很好地調(diào)和界面和功能之間的關(guān)系。想要將設(shè)計(jì)落實(shí)到真實(shí)的功能和交互上去,這就要看開發(fā)的功力了。
動(dòng)畫所有相關(guān)的內(nèi)容都被放在自定義的子類 UIView 當(dāng)中,在這個(gè)案例當(dāng)中,我們將其命名為 AnimatedDayView。
底部的一層是可以無限滾動(dòng)的 UIScrollView (1),這一層包含了下面的圖片副本。
在實(shí)現(xiàn)無限滾動(dòng)的效果上,有許多不同的方法。在這個(gè)滾動(dòng)試圖當(dāng)中,需要重新計(jì)算滾動(dòng)控件的大小,并且將不可見的預(yù)覽替換成新的圖像。
在設(shè)計(jì) Toonie 的時(shí)間選擇器的時(shí)候,我們將默認(rèn)起點(diǎn)設(shè)置為上午6點(diǎn),中點(diǎn)為下午6點(diǎn),終點(diǎn)為第二天上午6點(diǎn)。
接下來的一層是 Stars UIImageView (2)。這個(gè) UIImageView 曾會(huì)隨著時(shí)間的選擇,也就是滾動(dòng)控件而變化。它在白天是透明的,隨著夜晚降臨而逐步出現(xiàn)。
再向上一層,則是用來承載太陽和月亮的 CALayer,SunMoonBackgroundLayer,雖然它和 AnimatedDayView 有著相同的尺寸,但是在運(yùn)作時(shí)間周期上并不相同。這一層會(huì)圍繞著一個(gè)中心點(diǎn)周期性轉(zhuǎn)動(dòng),從而保證太陽和月亮?xí)蔚诔霈F(xiàn)。太陽(4)和月亮(5)位于 SunMoonBackgroundLayer 之上,也是兩個(gè)獨(dú)立的圖層。月亮在旋轉(zhuǎn)方向上和這一層是一樣的,但是太陽則會(huì)從相反的位置旋轉(zhuǎn)出項(xiàng)。值得一提的是,月亮和太陽出現(xiàn)的角度尺寸并不一樣。
在這個(gè)環(huán)節(jié),最重要的問題是要算清楚每一層的旋轉(zhuǎn)角度和程度,滾動(dòng)的距離有多遠(yuǎn),等等等等。滾動(dòng)距離其實(shí)是最容易計(jì)算的,變量始終是時(shí)間,也即是用戶在 UIDataPicker 上所選擇的時(shí)間?,F(xiàn)在,計(jì)時(shí)器的默認(rèn)初始時(shí)間是上午6點(diǎn)整,如果用戶選擇上午9:10的鬧鐘,那么我們需要計(jì)算時(shí)間差(190分鐘),然后將其換算成各個(gè)組件需要運(yùn)動(dòng)的位移大?。L動(dòng)多少像素,旋轉(zhuǎn)角度等)。當(dāng)經(jīng)過24小時(shí),背景向下滾動(dòng)的距離相當(dāng)于它本身的長度,由此可以計(jì)算出一分鐘背景向下滾動(dòng)的距離:每分鐘運(yùn)動(dòng)距離=背景圖片高度/每天的分鐘數(shù),這樣也就知道這個(gè)時(shí)間差內(nèi)(190分鐘),背景要運(yùn)動(dòng)的距離了。
接下來,另外一件事情就是用Alpha 通道來控制星星的變化。我們可以根據(jù)時(shí)間節(jié)點(diǎn)來控制特定位置的Alpha 通道值來控制星星的顯示。在早上6點(diǎn)的時(shí)候,這些位置的Alpha 值為0,因?yàn)榘滋扉_始了。直到下午6點(diǎn)之后,繁星初現(xiàn),Alpha 值從0開始,到晚上12點(diǎn)到達(dá)1??刂七@一切的核心參數(shù)同樣可以是背景圖像的移動(dòng)距離,或者當(dāng)前位置,因?yàn)檫@一參數(shù)和當(dāng)前時(shí)間是緊密關(guān)聯(lián)的,可以輕松計(jì)算出來。開發(fā)可以通過控制 Alpha 值的相關(guān)函數(shù)來影響顯示效果。
旋轉(zhuǎn)角度也同樣可以通過簡單的計(jì)算來確定。6點(diǎn)的時(shí)候?yàn)?度,24小時(shí)旋轉(zhuǎn)360度,簡單的除法就可以算出每分鐘旋轉(zhuǎn)的角度。
另外一個(gè)需要控制的視覺元素是云。它的出現(xiàn)時(shí)間是由NSTimer 所影響的,系統(tǒng)內(nèi)置了3種不同樣式的云朵,當(dāng)它出現(xiàn)的時(shí)候,會(huì)隨機(jī)賦予一個(gè)Alpha 通道值,并且從屏幕右方出現(xiàn),向左緩慢運(yùn)動(dòng)。定時(shí)器會(huì)隨機(jī)生成云朵,當(dāng)它運(yùn)動(dòng)到屏幕之外就完全消失。
在日常使用過程中,鬧鐘的開關(guān)也是一個(gè)非常常用的控件。為了貼合應(yīng)用的主題,鬧鐘開關(guān)的樣式設(shè)計(jì)成為一個(gè)小太陽。
鬧鐘開關(guān)的運(yùn)作方式,你可以通過代碼來了解它的運(yùn)行方式。設(shè)計(jì)上,整個(gè)鬧鐘按鈕分為4個(gè)不同的圖層。
圓角矩形的背景框(4)是用來承載按鈕的元素,在它上方靠近右邊緣的小太陽(2)是開關(guān)主體,它可以在底部的槽(1)的范圍內(nèi)左右運(yùn)動(dòng),同時(shí),為了具備裝飾性,加入了不斷旋轉(zhuǎn)的太陽光暈(3),光暈被設(shè)計(jì)為單獨(dú)的圖層,它會(huì)不斷的旋轉(zhuǎn),不會(huì)和其他的因素產(chǎn)生交叉關(guān)聯(lián)。
不過,當(dāng)開關(guān)關(guān)閉的時(shí)候,光暈(3)的Alpha 值會(huì)變?yōu)?,動(dòng)畫停止。這幾個(gè)圖層當(dāng)中,最大的圖層是背景(4),這個(gè)圖層當(dāng)中包含一個(gè)蒙板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;
蒙板塑造了整個(gè)圓角矩形的外輪廓。在交互的控制上,還添加了兩個(gè)手勢識(shí)別器:UITapGestureRecognizer 是用來識(shí)別打開的動(dòng)作,而UIPanGestureRecognized 是用來識(shí)別關(guān)閉的動(dòng)作。
在這個(gè)動(dòng)效設(shè)計(jì)過程中,想要做到自然可用的動(dòng)效,動(dòng)效設(shè)計(jì)師需要仔細(xì)地推敲和分割元素,在整個(gè)方案上深思熟慮,才能最終實(shí)現(xiàn)正確的效果。
填寫下面表單即可預(yù)約申請免費(fèi)試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費(fèi)! 怕學(xué)不會(huì)?助教全程陪讀,隨時(shí)解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!
?2007-2022/ m.lb577.com 北京漫動(dòng)者數(shù)字科技有限公司 備案號(hào): 京ICP備12034770號(hào) 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc