讓界面動畫更自然

隨著軟硬件技術(shù)的發(fā)展，界面動畫在我們的日常生活中隨處可見。桌面軟件、移動應(yīng)用、云服務(wù)此刻回顧四周我相信你一定能發(fā)現(xiàn)他們。“互聯(lián)網(wǎng)的一些事”推薦此文，帶讀者一起學(xué)習(xí)相關(guān)知識。

　　在產(chǎn)品中動畫未必越多越好，也未必越炫越好。不同的產(chǎn)品類型對動畫的要求也不同。常見的動畫主要承擔(dān)向用戶解釋界面與界面之間的關(guān)系，元素與元素間的關(guān)系以及特定元素的強(qiáng)化。

　　如果你關(guān)注過界面動畫，你可能見過以下這些動畫曲線。摘自 http://easings.net/

　　他們表述了動畫變化的程度與時間的關(guān)系。通過合理利用這些動畫曲線背后的原理，可以讓動畫看起來更加真實(shí)。

　　這里說到我們要讓界面動畫更自然。如何做到自然?只要遵循客觀物理規(guī)律以及人得視覺經(jīng)驗(yàn)，動畫就會看上去真實(shí)自然。

　　為什么要講動畫函數(shù)?相信很多設(shè)計師看到下面的文章會的覺得太枯燥。

　　那我們回到產(chǎn)品研發(fā)過程，在產(chǎn)品里，常見的動畫實(shí)現(xiàn)有這么幾種：

　　設(shè)計師逐幀繪制;開發(fā)同學(xué)實(shí)現(xiàn)循序/循環(huán)播放邏輯。

　　設(shè)計師提供動畫資源文件如(視頻、flash、gif);開發(fā)同學(xué)將資源嵌入產(chǎn)品。

　　設(shè)計師提供動畫形式、參數(shù)與元素;開發(fā)同學(xué)完成動畫實(shí)現(xiàn)，如：html5/CSS動畫。

　　文本想針對第三種形式，幫助設(shè)計師了解動畫背后的科學(xué)知識，可以有具體的參數(shù)與開發(fā)同學(xué)溝通。

　　如果你熟悉物理課本里的運(yùn)動公式，請?zhí)^第一部分。

　　運(yùn)動動畫

　　我們先從最簡單的運(yùn)動動畫說起。我們客觀物理規(guī)律還是得從牛頓第二定律說起。F=ma，如果大家不明白這個公式，沒關(guān)系。

　　請允許我不那么講究術(shù)語的嚴(yán)謹(jǐn)性。通俗點(diǎn)來說，就是運(yùn)動動畫響應(yīng)變化情況與執(zhí)行動畫的物體本身有關(guān)。如果你想表現(xiàn)的物體是一個沉甸甸的，那么他們的起始動畫響應(yīng)/參數(shù)的變化會比較慢。反之，物體是輕巧的，那么其起始動畫響應(yīng)/參數(shù)的變化會比較快。

　　從圖上可以看到如果是相同的操作且移動相同的距離，輕巧的所花的時間越短。

　　阻尼動畫

　　提到阻尼，需要介紹三個概念：臨界阻尼、過阻尼、欠阻尼。

　　臨界阻尼

　　生活中一些高檔的門或櫥柜。他們在開合的過程中為了不造成太大的聲響，他們的機(jī)械結(jié)構(gòu)阻尼會盡量設(shè)計接近臨界阻尼。這個過程最容易讓人接受，不會感覺有外界干擾。過阻尼和欠阻尼，通常能讓你感覺到有一只隱形的手，阻礙或促進(jìn)運(yùn)動。

　　過阻尼

　　從字面上會容易理解，就是阻尼很大，阻礙運(yùn)動的發(fā)展。有些自動門或電梯門在閉合的過程中，在最后段里往往需要更長的時間。另外，記憶枕的恢復(fù)的過程也是過阻尼。

　　欠阻尼

　　阻尼不夠，繼而形成了振蕩的特征。生活中的一些彈簧門，在關(guān)閉的過程中，會多次擺動，最終趨于閉合。

　　做一個比較細(xì)膩的界面動畫時候，如果追求理性一些，可以把動畫的成果拆解成三個階段。啟動、運(yùn)行、收尾。設(shè)計師需要花更多的時間去考慮啟動與收尾過程。

　　啟動階段：體現(xiàn)力、質(zhì)量、環(huán)境，可以表現(xiàn)材質(zhì)的輕盈與厚重。

　　收尾階段：體現(xiàn)質(zhì)量、速度、環(huán)境。阻尼通常在這個階段體現(xiàn)。

　　舉個例子

　　請大家關(guān)注啟動與收尾階段。

　　動畫曲線僅作示意感受，可能與實(shí)際動畫有所出入。

　　呼吸動畫

　　呼吸動畫，常用于界面元素的提醒。

　　對于這個動畫，設(shè)計師最直觀的印象就是閃爍。在實(shí)施的過程中，對于閃爍一詞會被賦予不同的理解。

　　設(shè)計師眼中的閃爍：“漸顯 -> 漸隱 -> 漸顯 -> 漸隱”;

　　工程師眼中的閃爍：“顯示 -> 隱藏 -> 顯示 -> 隱藏”;

　　如何把動畫做得更細(xì)膩，就在于如何將漸顯與漸隱的過程如何描述得更加仔細(xì)。

　　對于最早的漸顯、漸隱動畫，我首先想到了三角函數(shù)。

　　仔細(xì)觀察這個函數(shù)，可以發(fā)現(xiàn)他的特點(diǎn)是在一個周期里是啟動漸增、收尾減緩的過程。適合開發(fā)利用簡單代碼實(shí)現(xiàn)的動畫效果。

　　有興趣的同學(xué)可以用原型感受一下。做閃爍動畫，用到三角函數(shù)其實(shí)就可以滿足大部分場景。

　　我在嘗試的動畫的時候，把他作為呼吸函數(shù)來看，總覺得哪里還是不太自然?？雌饋怼昂粑容^急促”。

　　我們來分析一下呼吸函數(shù)。

　　為什么看起來呼吸局促呢?請各位看官現(xiàn)在試試深呼吸，體會一下。你會發(fā)現(xiàn)在我們的在吸氣的階段，很快會就達(dá)到肺撐滿的狀態(tài)，然后吐氣的階段可以持續(xù)很久。大體上比例分布是這樣的。

　　融合入三角函數(shù)，將起始的漸增與收尾的減緩引入。感謝Don同學(xué)提供了一個完整的函數(shù)。

　　這個函數(shù)的周期為6，峰值出現(xiàn)在2。整個變化起始與收尾都是漸變過渡。

　　k=1/3，t=6, n={1,2,3,…}

　　大家感受一下

　　之前我利用了些業(yè)余時間，在Arduino硬件上試了一下。大家可以看一下視頻。我以為漸顯、漸隱的動畫的是這個樣的：

　　簡單三角函數(shù)的呼吸燈

　　其實(shí)應(yīng)該是這樣的：

　　使用呼吸函數(shù)的呼吸燈

　　其他

　　除了在動畫變化過程中對客觀規(guī)律的描述外，對于用戶場景的還原也能增加自然感。

　　比如這個站點(diǎn)的checkbox。我們在日常生活中，面對紙質(zhì)的選項，我們會選擇涂抹的方式來進(jìn)行選擇。

　　或者這樣刪除

　　更多效果，可以訪問動態(tài)checkbox。

　　寫在最后的小工具

　　如果使用 Mac 的小伙伴，Apple 提供了一個繪制函數(shù)圖像的利器 Grapher。本文的函數(shù)均由此工具繪制。感興趣的同學(xué)可以嘗試用一下。

新聞標(biāo)題：讓界面動畫更自然
文章起源：http://www.muchs.cn/news46/164896.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、網(wǎng)站收錄、網(wǎng)站改版、網(wǎng)頁設(shè)計公司、外貿(mào)網(wǎng)站建設(shè)、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)