透過SwiftUI呈現Futuristic UI設計 / Achieve Futuristic UI by SwiftUI
Published in
Mar 6, 2022
有在看科幻電影Si-fi film或玩電玩Gaming的朋友應該常會在內容場景中看到充滿科幻感的介面風格，這種充滿未來感的介面風格稱為FUI，可以稱作是科幻使用者介面(Fantasy User Interface)或是未來使用者介面(Futuristic User Interfaces)。
Hard to present the FUI style by pure coding
FUI雖然很絢麗，但其3D動態的視覺效果很難透過程式來完成，以往只能透過動態設計師(Motion Designer)透過影像繪圖軟體如：After Effect, Cinema 4D等，配合劇情與場景需求一步一步的刻畫。
Rotation3DEffect modifier powered by SwiftUI
SwiftUI的rotation3DEffect修飾符讓3D旋轉物件變得相當容易，即使是旋轉簡單的圓形動畫，也能呈現動感的視覺，這樣的效果就適合應用在如設定智慧裝置過程中的過場動畫。
以下控制以上旋轉效果的參數說明：
- angle：視圖旋轉的角度
- axis：指定旋轉軸的 x、y 和 z
然而rotation3DEffect提供的參數不止於此，透過以下參數的定義將可使平面的視圖立體化：
- anchor：用於定義 3D 空間中圍繞其錨定旋轉的點
- anchorZ：用於定義 3D 空間中圍繞其錨定旋轉的點
- perspective：相對消失點
Not only fantasy but also hierarchy and visualized information
對身為設計師的我而言，FUI所展示的空間感不只是只有酷炫的效果，當資訊能被有效地階層化與視覺化呈現，將可使人們更容易閱讀大量的數據。尤其是隨著AI將更能自動化地執行我們周遭的機器運作時，快速監控大量數據變化就顯得相當重要。以下就是透過rotation3DEffect來呈現Futuristic UI的設計範例。
