而引言中所提到的界面動(dòng)畫(huà)，可以簡(jiǎn)單理解為平面動(dòng)畫(huà)的分支，實(shí)際上界面動(dòng)畫(huà)在我們的日常生活中就更多見(jiàn)了，掏出你的手機(jī)便能感受到，真是無(wú)動(dòng)畫(huà)不歡。與上面的平面動(dòng)畫(huà)對(duì)比，界面動(dòng)畫(huà)因?yàn)闀?huì)承載操作和功能而顯得低調(diào)了很多，并不是越炫越好，其解決的問(wèn)題是讓用戶“可預(yù)見(jiàn)性”，給用戶交待清楚界面之間的跳轉(zhuǎn)、切換，而帶來(lái)非常自然的體驗(yàn)，達(dá)到“無(wú)需思考”，甚至帶來(lái)驚喜，打個(gè)不太恰當(dāng)?shù)谋确?，好的?dòng)畫(huà)效果如同在用戶面前耍了一個(gè)很酷的魔術(shù)，自然流暢而不牽強(qiáng)拖沓。

值得一提的是，ios7的扁平化風(fēng)格，拋棄了材質(zhì)和擬物化，采用扁平化的設(shè)計(jì)風(fēng)格將會(huì)給設(shè)計(jì)者在界面動(dòng)畫(huà)上帶來(lái)更多的想象和發(fā)揮的空間。

2.有哪些常用的界面動(dòng)畫(huà)形式?

在介紹界面動(dòng)畫(huà)前先簡(jiǎn)單介紹下動(dòng)畫(huà)與材質(zhì)之間的關(guān)系，動(dòng)畫(huà)與材質(zhì)如同血與肉關(guān)系，需要遵循客觀物理現(xiàn)實(shí)和人的視覺(jué)經(jīng)驗(yàn)，這樣的動(dòng)畫(huà)才會(huì)看上去自然不違和，比如一個(gè)乒乓球與一塊石頭從一米高度往下掉的運(yùn)動(dòng)軌跡顯然是不同的，這些不同也體現(xiàn)在其落地形體發(fā)生的擠壓、伸張變化，回到界面材質(zhì)上來(lái)，兩個(gè)不同材質(zhì)風(fēng)格的界面，其動(dòng)畫(huà)風(fēng)格也是有所差異的，如果一個(gè)”重金屬風(fēng)格”的界面，配上非常輕盈靈動(dòng)甚至還有伸縮的動(dòng)畫(huà)風(fēng)格，無(wú)論動(dòng)畫(huà)做得多么流暢，這看起來(lái)都是非常別扭的，下圖示意了“輕”與“重”的運(yùn)動(dòng)和變形軌跡：

那么在游戲中，我們平時(shí)接觸到的界面動(dòng)畫(huà)形式有哪些呢，給大家列舉幾個(gè)：

· 淡入淡出

“我輕輕的來(lái)正如我輕輕的走”，淡入淡出正是帶給用戶這樣的感覺(jué)，禮貌而又優(yōu)雅，是最常見(jiàn)的動(dòng)畫(huà)效果。如下圖，《激戰(zhàn)2》的界面打開(kāi)淡入效果，界面材質(zhì)用的非常輕盈類(lèi)似羊皮紙的紋理，配合水彩潑墨風(fēng)格。在淡入的基礎(chǔ)上融合了一些紋理層次效果，非常有細(xì)節(jié)而優(yōu)雅。

《激戰(zhàn)2》界面淡入

《暗黑血統(tǒng)》界面材質(zhì)就”重”得多，在淡入的動(dòng)畫(huà)上，配合上下兩部分區(qū)域的的位移滑入，營(yíng)造出了重金屬的機(jī)械風(fēng)，動(dòng)畫(huà)效果短促又干脆，與其材質(zhì)和風(fēng)格相互融合。

《暗黑血統(tǒng)》界面淡入

· 位移

位移效果與淡入淡出一樣，常常是為了交待界面的出現(xiàn)與消失行為，它還經(jīng)常與淡入淡出結(jié)合而形成“淡入淡出+位移”。并且根據(jù)位移速度帶有強(qiáng)度不同的緩沖效果、并發(fā)生擠壓或拉伸。《藏地傳奇》的NPC冒泡對(duì)話就使用了“位移+淡入”效果：

《藏地傳奇》界面位移+淡入

? 翻轉(zhuǎn)

界面翻轉(zhuǎn)大多數(shù)用在界面之間的切換，但因運(yùn)動(dòng)幅度較大且相對(duì)動(dòng)畫(huà)所需要的時(shí)間較長(zhǎng)，容易給用戶帶來(lái)視覺(jué)疲勞和一些負(fù)面的情感因素，對(duì)于一些尺寸較大的界面，需要慎重使用，小的界面如卡牌抽獎(jiǎng)的結(jié)果展示等可以嘗試使用?！禗OTA2》的擊殺者界面切換翻轉(zhuǎn)效果：

《DOTA2》界面翻轉(zhuǎn)

《激戰(zhàn)2》 技能欄

? 切換

界面之間的切換，同位移效果一樣，切換動(dòng)畫(huà)往往也是配合淡入和淡出，常用于tab標(biāo)簽頁(yè)的內(nèi)容頁(yè)之間的切換。

《藏地傳奇》人物與屬性頁(yè)切換

? 抖動(dòng)和閃爍

抖動(dòng)和閃爍動(dòng)畫(huà)往往是為了吸取玩家的注意力，因該動(dòng)畫(huà)節(jié)奏較快，容易讓玩家注意。在游戲中也常用于如Boss受擊、戰(zhàn)斗反饋、提示相關(guān)?！兜叵鲁菑?qiáng)襲者》中的小箭頭抖動(dòng)提示效果和buff閃爍：

《地下城強(qiáng)襲者》箭頭抖動(dòng)提示

《地下城強(qiáng)襲者》buff閃爍提示

除了以上列舉的幾種動(dòng)畫(huà)形式之外，還有非常多很酷的動(dòng)畫(huà)效果沒(méi)有在這里列舉出來(lái)，大家可以在平時(shí)的游戲或軟件體驗(yàn)中多積累;但更重要的是，要善于觀察生活并在其中獲取靈感，并能將其運(yùn)用到我們的游戲界面中來(lái)，讓游戲變得更加有趣和吸引力且提升游戲的用戶體驗(yàn)。

還需要注意的是，界面動(dòng)畫(huà)設(shè)計(jì)者的身份猶如影視動(dòng)畫(huà)的導(dǎo)演，要有取舍和主次地設(shè)計(jì)，掌握好度，不能一味地讓界面變得更炫更酷。借用動(dòng)畫(huà)大師richard williams總結(jié)的動(dòng)畫(huà)三點(diǎn)原則來(lái)結(jié)尾：1. 要簡(jiǎn)單、2. 要清楚、3. 一切盡在你的掌握中。

本文作者 San