視覺層

視覺層提供高效能、保留模式的 API 來處理圖形、效果和動畫，而且是所有 Windows 裝置的 UI 基礎。 您會以宣告式方式定義 UI，而視覺層依賴圖形硬體加速，以確保內容、效果和動畫會以順暢無誤的方式呈現，不受應用程式的 UI 執行緒影響。

需要注意的重點：

• 熟悉的 WinRT API
• 針對更動態的 UI 和互動而架構
• 概念與設計工具一致
• 可擴縮性呈線性改變而沒有突然的效能落差

您的 Windows UWP 應用程式已透過其中一個 UI 架構在使用視覺層。 您也可以直接利用視覺層，只需投入少少的心力，即可完成自訂轉譯、效果和動畫。

視覺層中有哪些功能？

視覺層的主要功能如下：

1. 內容：自訂繪製內容的輕量撰寫
2. 效果：即時 UI 效果系統，其效果可以產生動畫效果、加以鏈接和進行自訂
3. 動畫：生動且無關架構的動畫，獨立於 UI 執行緒而執行

Content

內容由動畫和效果系統使用視覺功能來裝載、轉換和提供使用。 在類別階層的基底是 Visual 類別，這是應用程式程序內一種輕量型敏捷執行緒的 Proxy，用於撰寫器中的視覺狀態。 Visual 的子類別包括 ContainerVisual，可讓子系建立包含內容的視覺和 SpriteVisual 的樹狀結構，而且可以使用純色、自訂繪製內容或視覺效果來繪製。 這些視覺類型共同組成 2D UI 的視覺化樹狀結構，並支援最顯著的 XAML FrameworkElements。

如需詳細資訊，請參閱組合視覺效果概觀。

效果

視覺層中的效果系統可讓您將篩選和透明度效果的鏈結，套用至視覺或視覺樹狀結構。 這是 UI 效果系統，請勿與影像和媒體效果混淆。 效果會與動畫系統搭配運作，讓使用者能達成順暢且動態的效果屬性動畫，且轉譯獨立於 UI 執行緒。 視覺層中的效果提供可結合和產生動畫的創意建構元素，來築構量身打造的互動體驗。

除了可產生動畫的效果鏈之外，視覺層也支援光源模型，可讓視覺功能透過回應可動畫表現之光源，來模擬材質屬性。 視覺也可投下陰影。 光源和陰影可以結合在一起，以產生深度和現實的感知。

如需詳細資訊，請參閱組合效果概觀。

動畫

視覺層中的動畫系統可讓您移動視覺、動畫效果，並且驅動轉換、剪輯片段和其他屬性。  它是一個與架構無關的系統，從零開始設計，並以效能為念。  它的執行獨立於 UI 執行緒之外，以確保順暢度和可擴縮性。  雖然它可讓您使用熟悉的 KeyFrame 動畫來驅動屬性變更，但也可讓您設定不同屬性之間的數學關聯性，包括使用者輸入，讓您直接打造順暢的編排體驗。

如需詳細資訊，請參閱組合動畫概觀。

使用 XAML UWP 應用程式

您可以使用 Windows.UI.Xaml.Hosting 中的 ElementCompositionPreview 類別，取得 XAML 架構所建立的視覺效果，並且支援顯著的 FrameworkElement。 請注意，架構為您建立的視覺具有一些自訂限制。 這是因為架構正在管理位移、轉換和存留期。 不過，您可以建立自己的視覺效果，並透過 ElementCompositionPreview 將它們附加至現有的 XAML 元素，或將其新增至視覺化樹狀結構中某個位置的現有 ContainerVisual。

如需詳細資訊，請參閱使用視覺層搭配 XAML 概觀。

使用電腦版應用程式

您可以使用視覺層來增強 WPF、Windows Forms 和 C++ Win32 電腦版應用程式的外觀、風格和功能。 您可遷移內容島來使用視覺層，並將其餘的 UI 保留在其現有的架構中。 這表示您可對您的應用程式 UI 進行重大更新和增強，而不需要對現有的程式碼庫進行大量變更。

如需詳細資訊，請參閱使用視覺層讓您的傳統型應用程式現代化。

其他資源

• API 的完整參考文件
• Windows 組合範例 GitHub 中的進階 UI 和組合範例。
• Windows.UI.Composition 範例庫
• @windowsui Twitter 摘要
• 閱讀 Kenny Kerr 介紹此 API 的 MSDN 文章：圖形與動畫 - Windows Composition 轉戰 Windows 10