怎樣設計漫畫(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