動效設計基礎(一):運動曲線與緩動

作者:heyu 來源:騰訊UED 時間:2016-07-07 標簽: 動效設計

作為設計師,我們經常接到這樣的需求:XX app中的動效好酷啊,我們也做一個吧。這時,一些習慣了把設計輸出 = PSD的同學往往無從下手。那什么是動效設計?什么時候需要用什么樣的動效?動效越酷炫越好嗎?這里,我會用幾篇文章分別回答這些問題。首先,我們先了解動效設計中如何用運動曲線表達動效以及緩動設計。
 

為什么要動效?

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

顯然,這樣的技術在現實生活中是不存在的(也許有一天能實現),所以看起來會很不自然。這就需要有一個運動的過程,動效設計就是在設計這個過程:

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

它的運動曲線其實就是條直線,線的斜率(目標位置 / 運動時間)就是它的運動速度:

在現實生活中,如果物體在傳送帶上,我們就可以看成是勻速直線運動:

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

緩動-減速運動(Ease out)

在緩動過程中,物體的運動速度會由于外力而發生變化。常見的緩動有三種:減速運動、加速運動、先加速后減速。我們先看減速運動:

減速運動的曲線是:

我們發現,物體有一個初始速度,隨著時間的推移,它的速度,也就是曲線的斜率在由大變小到0。什么樣的物體會這樣運動呢?比如這樣:


 

緩動-加速運動(Ease in)

加速運動和減速運動的速度變化相反:

曲線也是對稱的:

加速運動可以看作這樣:

在界面設計中,減速和加速動效往往是成對使用的。通常元素飛入時用減速運動,飛出時用加速運動。例如iPhone App Store中的分類列表:

 


緩動-先加速后減速(Ease In and Out)

可能大部分物體是這樣運動的:

 

從曲線中,我們看到,物體的速度(曲線的斜率)由0開始增加,在中點達到最大值,然后又減小到0:

我們可以看成這個物體在依靠自己的動力運動:

很多起點和終點都在界面內的運動都使用這種緩動形式,比如iOS天氣App的城市切換動畫:

 


緩動的組合

將上面三種最基本的緩動形式組合,可以表現出更多的運動形式,例如:

這就像用一個彈弓把物體彈射出去:

它運動曲線分為兩段,物體先向反方向運動,再在正向以很高的速度開始減速運動:

采用不同的緩動形式不僅能幫助用戶建立方向感,還能表現出物體的材質和“性格”,比如iOS的鎖屏界面落下時:

這體現出鎖屏界面本身是一種彈性材質,而下方的相機是堅硬的材質。它會讓用戶感覺到鎖屏很“輕盈”、易使用。如果我們希望下落的物體感覺起來很重,就可以這樣:

或者是個很高科技的方塊:

或者是個UFO?

如果是個給小朋友用的app,也可以很有趣:

感興趣的同學可以畫下上面這些動效的運動曲線。
 

小結

在本文中,我們討論了動效設計的概念、緩動曲線的解讀和幾種常見的緩動類型,也看了一些復雜的緩動案例。在下一篇文章中我們會討論這些動畫的適用場景和用途。

注:部分圖片來自 Apple iOS 7 Tech Talks 2013 – User Interface Design for iOS 7 Apps.

VIA: 

推薦文章

最新文章

熱門標簽

快乐炸金花 嘉义市 | 抚宁县 | 鄂托克前旗 | 施秉县 | 蓝山县 | 章丘市 | 黄浦区 | 汾阳市 | 南投市 | 桂平市 | 姜堰市 | 乐山市 | 宜兰县 | 嘉祥县 | 安泽县 | 寿宁县 | 临安市 | 娄底市 | 安仁县 | 当阳市 | 余姚市 | 万荣县 | 库伦旗 | 昂仁县 | 虹口区 | 馆陶县 | 马山县 | 河北省 | 常德市 | 喀喇沁旗 | 怀远县 | 泸定县 | 德令哈市 | 乐都县 | 怀柔区 | 怀来县 | 和田市 | 堆龙德庆县 | 门头沟区 | 株洲县 | 镇江市 | 鄂伦春自治旗 | 桃园市 | 遂宁市 | 霍州市 | 钟山县 | 巴楚县 | 漯河市 | 玛曲县 | 兴化市 | 崇义县 | 新野县 | 濉溪县 | 涟源市 | 溆浦县 | 广东省 | 兴化市 | 顺平县 | 靖边县 | 会理县 | 甘南县 | 北辰区 | 石门县 | 新闻 | 喀什市 | 寻乌县 | 城口县 | 且末县 | 民丰县 | 霍城县 | 云林县 | 泾源县 | 广汉市 | 丰都县 | 宁阳县 | 吕梁市 | 内江市 | 穆棱市 | 基隆市 | 丰顺县 | 布尔津县 | 方山县 | 竹溪县 | 共和县 | 平定县 | 政和县 | 江津市 | 民乐县 | 中宁县 | 天津市 | 青海省 | 安岳县 | 嵊泗县 | 图片 | 嘉善县 | 疏勒县 | 德安县 | 海淀区 | 亳州市 | 岳阳市 | 措勤县 | 平泉县 | 林甸县 | 平湖市 | 竹山县 | 乐业县 | 钟山县 | 南靖县 | 濉溪县 | 海林市 | 肃宁县 | 绵阳市 | 蛟河市 | 军事 | 和林格尔县 | 环江 | 锡林浩特市 | 台中市 | 溧水县 | 平潭县 | 姜堰市 | 仙桃市 | 渝中区 | 奉节县 | 阳春市 | 太康县 | 德化县 | 神池县 | 泾川县 | 临颍县 | 河北省 | 武平县 | 永登县 | 乐昌市 | 宜兰县 | 东光县 | 绥化市 | 鹤山市 | 北碚区 | 岑溪市 | 谢通门县 | 且末县 | 英超 | 鹤峰县 | 高青县 | 东海县 | 北宁市 | 贵南县 | 桂东县 | 永和县 | 南溪县 | 土默特右旗 | 中宁县 | 阜南县 | 邵阳县 | 遵义县 | 北辰区 | 奉贤区 | 云和县 | 锦州市 | 高淳县 | 丹阳市 | 合肥市 | 榆社县 | 紫阳县 | 丰都县 | 安徽省 | 从江县 | 苍南县 | 嘉义市 | 横峰县 | 琼海市 | 洛浦县 | 句容市 | 大悟县 | 祁东县 | 宁远县 | 德江县 | 道孚县 | 菏泽市 | 宁化县 | 龙井市 | 勃利县 | 旬邑县 | 广东省 | 龙井市 | 博湖县 | 安阳县 | 桓仁 | 阿城市 | 天门市 | 泸西县 | 灵石县 | 榆树市 | 榆社县 | 阳泉市 | 观塘区 | 永宁县 | 广宁县 | 泰来县 | 台南市 | 屯昌县 | 桃江县 | 井陉县 | 甘孜县 | 绍兴县 | 大足县 | 平凉市 | 延庆县 | 五大连池市 | 麻江县 | 扶风县 | 佛学 | 湟中县 | 台南县 | 黔西县 | 台前县 | 宁波市 | 孟连 | 韶关市 | 洞头县 | 隆德县 | 罗山县 | 密云县 | 开封县 | 昌宁县 | 林甸县 | 三门峡市 | 灵武市 | 安泽县 | 马鞍山市 | 民县 | 江山市 | 金湖县 | 新巴尔虎右旗 | 永丰县 | 辽宁省 | 会宁县 | 定日县 | 卢氏县 | 顺平县 | 长沙市 | 阿克陶县 | 利津县 | 加查县 | 体育 | 大同县 | 平潭县 | 望江县 | 明水县 | 五寨县 |