組合動畫Composition animations

Windows.UI.Composition API 可讓您在整合 API 層中針對撰寫器物件,執行建立、產生動畫效果、轉換以及操控等作業。The Windows.UI.Composition APIs allows you to create, animate, transform and manipulate compositor objects in a unified API layer. 組合動畫提供了功能強大且具效率的方式,可讓您在應用程式 UI 中執行動畫。Composition animations provide a powerful and efficient way to run animations in your application UI. 其經過徹底從頭開始的全新設計,確保讓動畫無論 UI 執行緒為何皆能以 60 FPS 運作,此外並提供優異操作彈性以協助您打造令人驚艷的使用體驗,您不僅可運用時間,更可運用輸入和其他屬性來驅動動畫。They have been designed from the ground up to ensure that your animations run at 60 FPS independent of the UI thread and to give you the flexibility to build amazing experiences using not only time, but input and other properties, to drive animations.

Windows 中的動作Motion in Windows

可以將動作設計想成電影。Think of motion design like a movie. 順暢的轉場能讓您專注於故事本身,讓體驗與生活結合。Seamless transitions keep you focused on the story, and bring experiences to life. 我們可以將這種感覺納入我們的設計中,使用電影的輕鬆感帶領人們從一個工作移往下一項工作。We can invite that feeling into our designs, leading people from one task to the next with cinematic ease. 動作通常是使用者介面與使用者體驗之間的區別因素。Motion is often the differentiating factor between a User Interface and a User Experience.

CompositionAnimations 是 Windows UI 平臺的基本建立組塊,提供強大且有效率的方式,在應用程式的 UI 中建立動作體驗。As a fundamental building block of the Windows UI Platform, CompositionAnimations provide a powerful and efficient way to create motion experiences in your application’s UI. 動畫引擎已從頭開始設計,以確保您的動作會在 60 FPS 執行,與 UI 執行緒無關。The animation engine has been designed from the ground up to ensure that your motion runs at 60 FPS, independent of the UI thread. 這些動畫的設計目的是為了根據時間、輸入和其他屬性,提供彈性來建立創新的行動體驗。These animations are designed to provide the flexibility to build innovative motion experiences based on time, input, and other properties.

動作範例Examples of motion

以下為一些應用程式中的動作範例。Here are some examples of motion in an app.

在此,應用程式使用連接動畫讓項目有動畫效果,因為它會「持續」成為下一頁標題的一部分。Here, an app uses a connected animation to animate an item image as it “continues” to become part of the header of the next page. 此效果有助於維持整個轉換過程的使用者內容。The effect helps maintain user context across the transition.

連接的動畫範例

在此,視覺視差效果會在 UI 捲動或平移時以不同的速率移動不同的物件,以產生深度、透視和移動的感覺。Here, a visual parallax effect moves different objects at different rates when the UI scrolls or pans to create a feeling of depth, perspective, and movement.

一個帶有背景影像和清單的視差範例

使用 CompositionAnimations 建立動作Using CompositionAnimations to create Motion

若要在 UI 中產生動作,開發人員可以存取 XAML 或視覺效果層中的動畫。To generate motion in UI, developers can access animations in either XAML or the Visual Layer. 視覺階層式動畫為開發人員提供一系列的優點:Animations at the Visual Layer provide developers with a series of benefits:

  • 效能– Windows UI 平臺上的動畫不是傳統的 UI 執行緒系結動畫,而是在獨立的執行緒上操作 60 FPS,以實現順暢的運動體驗。Performance – instead of the traditional UI Thread-bound animation, animations on the Windows UI platform operate on an independent thread at 60 FPS, enabling smooth motion experiences.
  • 範本化模型– Windows UI 層中的動畫是範本,這表示可以在多個物件上使用單一動畫,並調整屬性或參數,而不需要擔心先前的用法。Templating Model – animations in the Windows UI layer are templates, meaning can use a single animation on multiple objects and tweak properties or parameters without worrying of obstructing previous uses.
  • 自訂– Windows UI 層不僅可讓您輕鬆地製作美觀的 UI,還能使用完整的動畫類型,透過自訂漸層來建立全新且驚人的體驗Customization – the Windows UI layer not only makes it easy to make beautiful UI, but with a full range of animation types, possible to create new and amazing experiences with a gradient of customizations

身為開發人員在 Windows UI 層建立經驗,您可以存取各種動畫概念,讓您的設計變得更生動。As a developer creating experiences at the Windows UI layer, you have access to a variety of animation concepts to bring your designs to life. 您可以使用任何一種概念,以動畫顯示任何 CompositionObject 的屬性或 subchannel 元件(如果適用)。You can use any of these concepts to animate a property or subchannel component (when applicable) of any CompositionObject.

注意

並非 CompositionObject 的所有屬性都是 animatable。Not all properties of a CompositionObject are animatable. 請參閱個別 CompositionObject 的檔,以判斷屬性是否為 animatable。Refer to the documentation of the individual CompositionObject to determine whether a property is animatable.

注意

「詞彙」( subchannel )一詞指的是屬性(property)的元件形式。The term subchannel refers to a component form of a property. 例如,Vector3 Offset 屬性的 X 或 XY subchannel。For example, the X, or XY subchannel of a Vector3 Offset property.

動畫概念Animation concept 描述Description
以時間為基礎的 KeyFrameAnimations 動作Time-based motion with KeyFrameAnimations KeyFrameAnimations 是用來直接控制一段時間內的整個動作體驗。KeyFrameAnimations are used to directly control the entirety of a motion experience over a period of time. 程式開發人員以傳統的 keyframed 方式來描述動作的開始、結束、插補,以及持續時間。Developers describing a motion’s start, end, interpolation in between, and duration in a traditional keyframed fashion.
ExpressionAnimations 的相對運動Relative motion with ExpressionAnimations ExpressionAnimations 是用來描述某個物件屬性的動作如何相對於另一個物件的屬性來驅動。ExpressionAnimations are used to describe how a motion of one object’s property should be driven relative to another object’s property. 開發人員會定義數學方程式,以定義以參考為基礎的關聯性。Developers define a mathematical equation that defines the reference-based relationship.
ImplicitAnimationsImplicitAnimations 這些動畫是以觸發程式為基礎,並與核心應用程式邏輯分開定義。These animations are trigger-based and are defined separately from core app logic. ImplicitAnimations 是用來描述動畫發生的方式和時機,做為直接屬性變更的回應。ImplicitAnimations are used to describe how and when animations occur as a response to direct property changes.
具有輸入動畫的輸入導向動作Input-driven motion with Input Animations 輸入動畫涵蓋一組案例,可讓開發人員透過觸控或其他輸入形式來描述以操作為基礎的動作。Input Animations covers a set of scenarios that enable developers to describe manipulation-based motion via touch or other input modalities. 這些動畫是根據作用中的使用者輸入或手勢來驅動。These animations are driven based on active user input or gestures.
以物理為基礎的動作與 NaturalMotionAnimationsPhysics-based motion with NaturalMotionAnimations NaturalMotionAnimations 是用來根據實際的強制導向動作來描述自然且熟悉的動作體驗。NaturalMotionAnimations are used to describe natural and familiar motion experiences based on real-world force driven motion. 開發人員不會定義時間,而是定義動作的特性(例如,彈簧的阻尼比例)Rather than defining time, developers define characteristics of the motion (for example, damping ratio for Springs)