為什么要動效？

動效是元素的位移、姿態(tài)、大小和可見度等隨時(shí)間的變化。這里我們以位移為例來學(xué)習(xí)下動效。為什么需要動效呢？比如這里，我希望讓方塊到右邊的位置上，如果沒有動效，我可以把它“傳送”過去，就像這樣：

顯然，這樣的技術(shù)在現(xiàn)實(shí)生活中是不存在的（也許有一天能實(shí)現(xiàn)），所以看起來會很不自然。這就需要有一個(gè)運(yùn)動的過程，動效設(shè)計(jì)就是在設(shè)計(jì)這個(gè)過程：

這樣就好多了。但這樣的動效該如何表達(dá)呢？做過開發(fā)的同學(xué)都知道，可以用公式，絕大部分的動效用牛頓運(yùn)動方程都是可以表達(dá)的。當(dāng)然運(yùn)動方程也可以做成圖表，這里我們就用圖表的方式來表達(dá)運(yùn)動，這就是運(yùn)動曲線。最常用的曲線是“位移 – 時(shí)間”曲線：橫軸表示時(shí)間，縱軸表示在一個(gè)方向上的位移。（出于簡化考慮，這里我們只考慮在一個(gè)維度上的運(yùn)動，在三維空間中的運(yùn)動可以分解成單個(gè)維度）。 我們先看最簡單的運(yùn)動，勻速直線運(yùn)動：

它的運(yùn)動曲線其實(shí)就是條直線，線的斜率（目標(biāo)位置 / 運(yùn)動時(shí)間）就是它的運(yùn)動速度：

在現(xiàn)實(shí)生活中，如果物體在傳送帶上，我們就可以看成是勻速直線運(yùn)動：

不過這樣的例子并不多，物體很少會自己突然獲得速度，運(yùn)動一段距離后又突然停止。在靜止和運(yùn)動兩種狀態(tài)之間，物體的速度往往會發(fā)生變化。這就是緩動（Easing）。

緩動－減速運(yùn)動（Ease out）

在緩動過程中，物體的運(yùn)動速度會由于外力而發(fā)生變化。常見的緩動有三種：減速運(yùn)動、加速運(yùn)動、先加速后減速。我們先看減速運(yùn)動：

減速運(yùn)動的曲線是：

我們發(fā)現(xiàn)，物體有一個(gè)初始速度，隨著時(shí)間的推移，它的速度，也就是曲線的斜率在由大變小到0。什么樣的物體會這樣運(yùn)動呢？比如這樣：

緩動－加速運(yùn)動（Ease in）

加速運(yùn)動和減速運(yùn)動的速度變化相反：

曲線也是對稱的：

加速運(yùn)動可以看作這樣：

在界面設(shè)計(jì)中，減速和加速動效往往是成對使用的。通常元素飛入時(shí)用減速運(yùn)動，飛出時(shí)用加速運(yùn)動。例如iPhone App Store中的分類列表：

緩動－先加速后減速（Ease In and Out）

可能大部分物體是這樣運(yùn)動的：

從曲線中，我們看到，物體的速度（曲線的斜率）由0開始增加，在中點(diǎn)達(dá)到大值，然后又減小到0：

我們可以看成這個(gè)物體在依靠自己的動力運(yùn)動：

很多起點(diǎn)和終點(diǎn)都在界面內(nèi)的運(yùn)動都使用這種緩動形式，比如iOS天氣App的城市切換動畫：

緩動的組合

將上面三種最基本的緩動形式組合，可以表現(xiàn)出更多的運(yùn)動形式，例如：

這就像用一個(gè)彈弓把物體彈射出去：

它運(yùn)動曲線分為兩段，物體先向反方向運(yùn)動，再在正向以很高的速度開始減速運(yùn)動：

采用不同的緩動形式不僅能幫助用戶建立方向感，還能表現(xiàn)出物體的材質(zhì)和“性格”，比如iOS的鎖屏界面落下時(shí)：

這體現(xiàn)出鎖屏界面本身是一種彈性材質(zhì)，而下方的相機(jī)是堅(jiān)硬的材質(zhì)。它會讓用戶感覺到鎖屏很“輕盈”、易使用。如果我們希望下落的物體感覺起來很重，就可以這樣：

或者是個(gè)很高科技的方塊：

或者是個(gè)UFO？

如果是個(gè)給小朋友用的app，也可以很有趣：

感興趣的同學(xué)可以畫下上面這些動效的運(yùn)動曲線創(chuàng)新互聯(lián),手機(jī)建站,企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站。

當(dāng)前題目：動效設(shè)計(jì)基礎(chǔ)，運(yùn)動曲線與緩動
本文來源：http://m.rwnh.cn/news/171085.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、企業(yè)網(wǎng)站制作、企業(yè)建站、服務(wù)器托管、全網(wǎng)營銷推廣、手機(jī)網(wǎng)站建設(shè)

廣告

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