我們?cè)谏掀刑岬降囊粋€(gè)示例似乎表明“直接的型體轉(zhuǎn)換”是一種比較直觀且易于理解的連接。也就是我們把連接進(jìn)行細(xì)化之后，其中的直接聯(lián)系概念。
?

但在實(shí)際項(xiàng)目中，能夠設(shè)計(jì)成直接聯(lián)系的連接方式并不多。因?yàn)樗囊笙鄬?duì)比較“苛刻”。

首先需要規(guī)劃好兩個(gè)產(chǎn)生直接聯(lián)系的控件之間的型體差別。如果差別比較大，就會(huì)產(chǎn)生引擎落地的困難。

產(chǎn)生聯(lián)系的兩個(gè)控件，如果都是普通的矩形，可能還比較簡(jiǎn)單一些。但如果，比如說(shuō)是一個(gè)三角形變成一個(gè)圓形，可能就需要額外的開(kāi)發(fā)成本，也可能會(huì)有更大的性能損耗。而這個(gè)功能完全可以用間接聯(lián)系的方式去做。直接聯(lián)系的方式相比之下就會(huì)顯得不夠經(jīng)濟(jì)。

其次，需要顧及到界面發(fā)生變化時(shí)的頁(yè)面布局關(guān)系。包括前后界面中各個(gè)元素的排布和空間布置關(guān)系。

如果產(chǎn)生聯(lián)系的前后兩個(gè)界面（嚴(yán)格來(lái)說(shuō)有可能是同一個(gè)界面，為了描述方便，這里就當(dāng)它們是兩個(gè)界面）中的控件位置是固定的，那么對(duì)界面布局的影響不大。但只要有其中一個(gè)的位置相對(duì)不固定，就是一種動(dòng)態(tài)適應(yīng)的設(shè)計(jì)方法，需要額外的設(shè)計(jì)方案與程序邏輯方案。這些都是額外的開(kāi)發(fā)成本。如果這個(gè)聯(lián)系不足夠重要，也就不值得相應(yīng)的投入。

最后就是這種運(yùn)動(dòng)形式是否擁有足夠的可擴(kuò)展性。以及這種可擴(kuò)展性在落地時(shí)是否足夠經(jīng)濟(jì)。

可擴(kuò)展性其實(shí)與第二個(gè)條件相關(guān)。如果控件屬于動(dòng)態(tài)位置設(shè)計(jì)，那么相對(duì)來(lái)說(shuō)可擴(kuò)展性要強(qiáng)一些。反之就是特例，為一個(gè)特例專門花費(fèi)功夫制作復(fù)雜的轉(zhuǎn)換效果，也依然需要看這個(gè)效果是不是足夠重要。

事實(shí)上你會(huì)發(fā)現(xiàn)。實(shí)際項(xiàng)目中能夠滿足三個(gè)條件的情況并不多見(jiàn)。這也是為啥直接聯(lián)系在游戲項(xiàng)目里不是占大多數(shù)的情況。甚至于一些巧妙的直接聯(lián)系設(shè)計(jì)會(huì)被驚嘆。

舉個(gè)例子來(lái)說(shuō)，我們?cè)谥暗奈恼轮辛信e過(guò)的《刺客信條：起源》的一個(gè)例子，就屬于直接連接效果，如下圖所示：
?

在這個(gè)效果中，裝備圖標(biāo)被點(diǎn)擊后會(huì)移動(dòng)到旁邊一點(diǎn)的位置，然后漸次展開(kāi)附屬的其他控件。與此同時(shí)，前一個(gè)界面進(jìn)行縱深后退動(dòng)作。加上選中態(tài)的白框細(xì)膩的動(dòng)態(tài)效果，整個(gè)切換效果非常的順滑舒適。

我們對(duì)照前面提到的三個(gè)條件來(lái)看的話，它全都是符合的。

在類似的情況下，我們也可嘗試用這種形式來(lái)設(shè)計(jì)直接聯(lián)系動(dòng)效。

比如說(shuō)這樣的布局：
?

這里的每個(gè)圖標(biāo)被點(diǎn)擊后都移動(dòng)到同一個(gè)位置，此例為界面的中央。這樣的話，每個(gè)圖標(biāo)都會(huì)有不同的起點(diǎn)。需要設(shè)置它們?cè)谝苿?dòng)過(guò)程中的運(yùn)動(dòng)曲線。不管是動(dòng)效去挨個(gè)制作每個(gè)圖標(biāo)的移動(dòng)，還是讓程序去用邏輯計(jì)算的方式，都有不小的實(shí)現(xiàn)成本。

所以事情還是要回到設(shè)計(jì)動(dòng)效的初衷：這個(gè)地方是否足夠重要。

運(yùn)用直接聯(lián)系的好處不僅在于能讓玩家直接且明確的看到操作前后的界面框體之間的關(guān)系，更能創(chuàng)造出視覺(jué)上的沖擊力。就像我們現(xiàn)實(shí)中的各種直接聯(lián)系一樣。

你去書架上拿一本書到手上打開(kāi)。在你的眼里，這是一個(gè)連續(xù)的動(dòng)作和畫面。你會(huì)看到書被從一排書里拿到你的手上，然后被你的手翻開(kāi)。這是一個(gè)一鏡到底的畫面。你非常明白這個(gè)畫面講述的是一個(gè)什么功能：如何拿到書并翻開(kāi)書。

但與現(xiàn)實(shí)不同的是，游戲界面里的直接聯(lián)系，因?yàn)槟茏龅浆F(xiàn)實(shí)中無(wú)法做到的事，效果會(huì)更加令人驚訝。

比如在游戲畫面中，我們可以操作抽象的圖形讓它發(fā)生變化，可以隨意穿梭空間乃至?xí)r間直接到另外的畫面中去。這些在現(xiàn)實(shí)中見(jiàn)不到的，或者做不到的事情，被連續(xù)的畫面講述時(shí)，觀眾的驚訝程度不難被想象出來(lái)。

這種形式的界面往往會(huì)多出現(xiàn)在使用3D界面，或者場(chǎng)景化界面的游戲中，比如下圖所示的《小小大星球3》中進(jìn)入關(guān)卡的流程操作：
?

在3D界面應(yīng)用得極為普遍的游戲《全境封鎖2》中，二手手游交易平臺(tái)也可見(jiàn)這類直接穿梭的界面與畫面結(jié)合的例子，如下圖所示的進(jìn)入地圖界面和下下圖所示的人物裝備界面：

這些做法，利用3D空間的縱深去模擬現(xiàn)實(shí)中物件之間的縱深層級(jí)關(guān)系，從而使界面之間的連接關(guān)系變得更加直觀易懂，同時(shí)也做到了現(xiàn)實(shí)中無(wú)法做到的抽象物體轉(zhuǎn)換效果。就會(huì)讓玩家感覺(jué)到非常強(qiáng)的視覺(jué)沖擊力，同時(shí)也提升了界面的可理解程度。

但是，這種“奇觀“只有在”被需要“時(shí)才被設(shè)計(jì)出來(lái)。另外，因?yàn)閷?shí)現(xiàn)成本的問(wèn)題，一般會(huì)選擇用更“經(jīng)濟(jì)”的方式去實(shí)現(xiàn)常用功能。“經(jīng)濟(jì)”其實(shí)也是動(dòng)效好用的其中一層意義。

例如上面例子的情況，我們就可以在《看門狗2》中看到一個(gè)不錯(cuò)的直接聯(lián)系解決方案：
?

第一層級(jí)的技能切換時(shí)，會(huì)有圖形間的間接聯(lián)系動(dòng)態(tài)，它們的狀態(tài)非常了然。

利用不同的狀態(tài)，將技能樹(shù)的不同部分的選中態(tài)以動(dòng)態(tài)形式展現(xiàn)，當(dāng)選中某一個(gè)技能時(shí)，它也會(huì)有不同的狀態(tài)：不可升級(jí)、可升級(jí)和不足以升級(jí)。
?

從第一層級(jí)進(jìn)入到技能詳情時(shí)，也是通過(guò)技能樹(shù)的橫移動(dòng)畫來(lái)直接切換頁(yè)面信息。這也是中典型的直接聯(lián)系動(dòng)效。

升級(jí)過(guò)程亦是典型的直接聯(lián)系，從待升級(jí)到升級(jí)過(guò)程再到升級(jí)完成，圖形之間都是直接轉(zhuǎn)換的關(guān)系，讓玩家對(duì)此一目了然：
?

該交互過(guò)程所涉及到的動(dòng)態(tài)設(shè)計(jì)，比較巧妙的避免了高成本的實(shí)現(xiàn)方案。是一種既顧及了效果又顧及到功能的設(shè)計(jì)手段。

在大部分情況下，我們大量使用著間接聯(lián)系和其他各式各樣的銜接方式。

當(dāng)然，每個(gè)動(dòng)效設(shè)計(jì)師都希望能盡可能的設(shè)計(jì)又好看又好用的效果。不過(guò)這里再次提醒，動(dòng)效理應(yīng)先好用再可以談好看。

講究連接，是動(dòng)效的很基礎(chǔ)性的工作，還有更多跟連接相關(guān)的內(nèi)容，我們本系列的下篇再見(jiàn)。

以上。

總結(jié)

以上是生活随笔為你收集整理的动效如何构成连接 篇肆的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。