合成动画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.

作为 Windows UI 平台的基本构建基块,CompositionAnimations 提供了一种强大而高效的方法,可在应用程序的 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:

  • 性能-而不是传统的 UI 线程绑定动画,Windows 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 的所有属性都是动画处理。Not all properties of a CompositionObject are animatable. 请参阅各个 CompositionObject 的文档,以确定属性是否为动画处理。Refer to the documentation of the individual CompositionObject to determine whether a property is animatable.

备注

字词_subchannel_引用属性的组件形式。The term subchannel refers to a component form of a property. 例如,System.numerics.vector2 偏移量属性的 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.
通过 NaturalMotionAnimations 的基于物理学的运动Physics-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)