- 相關(guān)推薦
怎樣設計漫畫(huà)人物
扁平化讓界面動(dòng)畫(huà)越來(lái)越流行,但想要做出自然流暢的動(dòng)效,懂軟件還不行,你得學(xué)點(diǎn)函數。如何讓界面動(dòng)畫(huà)自然流暢呢?下面小編帶著(zhù)大家一起來(lái)了解一下吧!
隨著(zhù)軟硬件技術(shù)的發(fā)展,界面動(dòng)畫(huà)在我們的日常生活中隨處可見(jiàn)。桌面軟件、移動(dòng)應用、云服務(wù)等,此刻環(huán)顧四周,我相信你一定能發(fā)現他們。
在產(chǎn)品中動(dòng)畫(huà)未必越多越好,也未必越炫越好。不同的產(chǎn)品類(lèi)型對動(dòng)畫(huà)的要求也不同。常見(jiàn)的動(dòng)畫(huà)主要承擔向用戶(hù)解釋界面與界面之間的關(guān)系,元素與元素間的關(guān)系以及特定元素的強化。
如果你關(guān)注過(guò)界面動(dòng)畫(huà),你可能見(jiàn)過(guò)以下這些動(dòng)畫(huà)曲線(xiàn)。
他們表述了動(dòng)畫(huà)變化的程度與時(shí)間的關(guān)系。通過(guò)合理利用這些動(dòng)畫(huà)曲線(xiàn)背后的原理,可以讓動(dòng)畫(huà)看起來(lái)更加真實(shí)。
這里說(shuō)到我們要讓界面動(dòng)畫(huà)更自然。如何做到自然?只要遵循客觀(guān)物理規律以及人得視覺(jué)經(jīng)驗,動(dòng)畫(huà)就會(huì )看上去真實(shí)自然。
為什么要講動(dòng)畫(huà)函數?相信很多設計師看到下面的文章會(huì )的覺(jué)得太枯燥。
那我們回到產(chǎn)品研發(fā)過(guò)程,在產(chǎn)品里,常見(jiàn)的動(dòng)畫(huà)實(shí)現有這么幾種:
1. 設計師逐幀繪制;開(kāi)發(fā)同學(xué)實(shí)現循序/循環(huán)播放邏輯。
2. 設計師提供動(dòng)畫(huà)資源文件如(視頻、flash、gif);開(kāi)發(fā)同學(xué)將資源嵌入產(chǎn)品。
3. 設計師提供動(dòng)畫(huà)形式、參數與元素;開(kāi)發(fā)同學(xué)完成動(dòng)畫(huà)實(shí)現,如:html5/CSS動(dòng)畫(huà)。
文本想針對第三種形式,幫助設計師了解動(dòng)畫(huà)背后的科學(xué)知識,可以有具體的參數與開(kāi)發(fā)同學(xué)溝通。
如果你熟悉物理課本里的運動(dòng)公式,請跳過(guò)第一部分。
運動(dòng)動(dòng)畫(huà)
我們先從最簡(jiǎn)單的運動(dòng)動(dòng)畫(huà)說(shuō)起。我們客觀(guān)物理規律還是得從牛頓第二定律說(shuō)起。F=ma,如果大家不明白這個(gè)公式,沒(méi)關(guān)系。
請允許我不那么講究術(shù)語(yǔ)的嚴謹性。通俗點(diǎn)來(lái)說(shuō),就是運動(dòng)動(dòng)畫(huà)響應變化情況與執行動(dòng)畫(huà)的物體本身有關(guān)。如果你想表現的物體是一個(gè)沉甸甸的,那么他們的起始動(dòng)畫(huà)響應/參數的變化會(huì )比較慢。反之,物體是輕巧的,那么其起始動(dòng)畫(huà)響應/參數的變化會(huì )比較快。
從圖上可以看到如果是相同的操作且移動(dòng)相同的距離,輕巧的所花的時(shí)間越短。
阻尼動(dòng)畫(huà)
提到阻尼,需要介紹三個(gè)概念:臨界阻尼、過(guò)阻尼、欠阻尼。
臨界阻尼
生活中一些高檔的門(mén)或櫥柜。他們在開(kāi)合的過(guò)程中為了不造成太大的聲響,他們的機械結構阻尼會(huì )盡量設計接近臨界阻尼。這個(gè)過(guò)程最容易讓人接受,不會(huì )感覺(jué)有外界干擾。過(guò)阻尼和欠阻尼,通常能讓你感覺(jué)到有一只隱形的手,阻礙或促進(jìn)運動(dòng)。
過(guò)阻尼
從字面上會(huì )容易理解,就是阻尼很大,阻礙運動(dòng)的發(fā)展。有些自動(dòng)門(mén)或電梯門(mén)在閉合的過(guò)程中,在最后段里往往需要更長(cháng)的時(shí)間。另外,記憶枕的恢復的過(guò)程也是過(guò)阻尼。
欠阻尼
阻尼不夠,繼而形成了振蕩的特征。生活中的一些彈簧門(mén),在關(guān)閉的過(guò)程中,會(huì )多次擺動(dòng),最終趨于閉合。
做一個(gè)比較細膩的界面動(dòng)畫(huà)時(shí)候,如果追求理性一些,可以把動(dòng)畫(huà)的成果拆解成三個(gè)階段。啟動(dòng)、運行、收尾。設計師需要花更多的時(shí)間去考慮啟動(dòng)與收尾過(guò)程。
· 啟動(dòng)階段:體現力、質(zhì)量、環(huán)境,可以表現材質(zhì)的輕盈與厚重。
· 收尾階段:體現質(zhì)量、速度、環(huán)境。阻尼通常在這個(gè)階段體現。
呼吸動(dòng)畫(huà)
呼吸動(dòng)畫(huà),常用于界面元素的提醒。
對于這個(gè)動(dòng)畫(huà),設計師最直觀(guān)的印象就是閃爍。在實(shí)施的過(guò)程中,對于閃爍一詞會(huì )被賦予不同的理解。
· 設計師眼中的閃爍:“漸顯 -> 漸隱 -> 漸顯 -> 漸隱”;
· 工程師眼中的閃爍:“顯示 -> 隱藏 -> 顯示 -> 隱藏”;
如何把動(dòng)畫(huà)做得更細膩,就在于如何將漸顯與漸隱的過(guò)程如何描述得更加仔細。
對于最早的漸顯、漸隱動(dòng)畫(huà),我首先想到了三角函數。
仔細觀(guān)察這個(gè)函數,可以發(fā)現他的特點(diǎn)是在一個(gè)周期里是啟動(dòng)漸增、收尾減緩的過(guò)程。適合開(kāi)發(fā)利用簡(jiǎn)單代碼實(shí)現的動(dòng)畫(huà)效果。
有興趣的同學(xué)可以用原型感受一下。做閃爍動(dòng)畫(huà),用到三角函數其實(shí)就可以滿(mǎn)足大部分場(chǎng)景。
我在嘗試的動(dòng)畫(huà)的時(shí)候,把他作為呼吸函數來(lái)看,總覺(jué)得哪里還是不太自然?雌饋(lái)“呼吸比較急促”。
我們來(lái)分析一下呼吸函數。
為什么看起來(lái)呼吸局促呢?請各位看官現在試試深呼吸,體會(huì )一下。你會(huì )發(fā)現在我們的在吸氣的階段,很快會(huì )就達到肺撐滿(mǎn)的狀態(tài),然后吐氣的階段可以持續很久。大體上比例分布是這樣的。
融合入三角函數,將起始的漸增與收尾的減緩引入。感謝Don同學(xué)提供了一個(gè)完整的函數。
這個(gè)函數的周期為6,峰值出現在2。整個(gè)變化起始與收尾都是漸變過(guò)渡。
k=1/3,t=6, n={1,2,3,…}
寫(xiě)在最后的小工具
如果使用 Mac 的小伙伴,Apple 提供了一個(gè)繪制函數圖像的利器 Grapher。本文的函數均由此工具繪制。感興趣的同學(xué)可以嘗試用一下。
【怎樣設計漫畫(huà)人物】相關(guān)文章:
動(dòng)漫畫(huà)設計的要求06-29
動(dòng)漫畫(huà)設計技能09-26
樓梯在客廳怎樣設計09-15
怎樣設計雜志封面08-15
怎樣裝修設計餐廳06-11
PS繪制可愛(ài)的漫畫(huà)人物圖像處理教程10-26
怎樣裝修設計飄窗09-10
怎樣設計幼兒益智游戲08-02
玄關(guān)收納應該怎樣設計10-26
怎樣設計老房子的廚房07-30