利用到的方法可以簡單的分成兩個層次：基本層面上，利用科技感的基本動態形式閃爍和生長；第二個層面上，則要遵守動效設計的普遍規律，即根據控件的具體位置、功能和視覺特點去合理分配它的動態節奏以至于動態曲線設計。

這次我們再看一個示例，既不是界面中的某個局部，也并非獨立的控件。

下圖的這個圖形是一個完整界面中的功能控件組，它并不是整個界面中的部分單個控件，而是由多個控件組成的多結構控件。也不是獨立的控件組，并不負責表現強烈的視覺信息或情感元素。
?

也就是說，相對于單個控件的結構它要更復雜一些；相對獨立控件，它又不具備獨立的功能表現和情感表現。而且它依然是界面的一部分，需要配合界面中的其他部分設計入場動畫。

首先根據整個控件組的型體特征，我們觀察到它是一個放射狀的布局。而且這個控件組不需要過度強烈的動態樣式表現，因此可以為它設定中心開花式的展開形式。

也就是說，它的動作是從中心向四周梯次展開的形式。具體的設計就可以從中心圖形開始，先為中心的圓盤圖形組合設計如下動畫：
?

這里的圓盤與中心的圖標并不要設計為同時展開，圓盤與外圍的兩個圓環也需要進行時間錯層設計。

它們的時間關系與圖形結構相關：

中心的黑色圓形是上層三角形的托底，因此需要最先出現，而后才是三角形的出現。而外圍圓環是中心圓形的外圍伴隨圖形，所以應該依照黑色圓形的時間節奏依次展開。

這能構造出一個初步的時間節奏。

接著就是為更外圍的環狀圖形設計動畫，這些圖形可以制造出中心圖形展開后的第二波次動態節奏：
?

它們可以被看作是中心圖形展開后的一個動作回響。你可以將其理解為中心圖形在一個空間內展開瞬間所制造的一個沖擊波，但這個沖擊波一定要在中心展開后間隔一定時間出現才會具備相應的視覺感受。

此時，就該輪到設計最外圍的三腳架型圖標陣列結構了。我們可以將它們分成兩層結構設計，依然遵照它們原有的圖形結構，即先有枝后有葉的展開邏輯，首先是“枝”的動作：
?

這里依然需要注意“枝”的動作開啟點一定要在前序圖形展開動畫的開啟點之后，制造時間上的錯層。

接著就是最后一步：“葉”的展開。二手手游賬號這一步除了需要注意它們與“枝”的時間錯層設計之外，還要注意展開的順序，一定得是由中心向外圍的次序。只有這樣才會符合整體控件組展開的整體趨勢：

這時候，整個控件組的設計就完成了。最后再檢查下整體的效果，補充一個動作反饋效果：
?

這樣，整個動畫就設計完成了。之后將它們與界面的其他部分進行排布和設計，就能完成這個特殊頁面的入場動畫了：
?

整個設計過程中，我們都只提及了通用性的設計手段。但這些手段必須建立在一個基礎之上，那就是科技感圖形的表現形式。在這里的具體形式表達就是各種圖形的生長動畫，以及在細節處插入的閃爍效果。如果說用別的形式細節去表現，比如彈動效果，那么整體趨勢設計不變的情況下，這個圖形的動效將完全是另外一種風格了。

如果還想知道更多關于科技感動態設計的內容，請關注本系列文章的下一篇。

歡迎你嘗試這種方法，并期待你的反饋。

以上。

總結

以上是生活随笔為你收集整理的科技感的动态设计方法-2的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。