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