UWP风向标 - 使用全新的 Composition API 来呈现可视元素与演示动画

注意:以下内容仅适用于 10240 SDK

Composition API 概述

Composition API 是一组全新的用于 UWP 呈现与演示的 API。这组 API 能够从为可视元素提供较为底层的控制。因此在性能上面可能会好于传统的 XAML 呈现。

Composition API 位于 Windows.UI.Composition 命名空间。目前这组 API 并不完善,所以还处于在预览状态。如果需要在项目中使用该 API 需要修改项目的包清单,否则将会没有访问 Composition API 的权限。

在包清单文件 Package.appxmanifest 中的 Capabilities 节点中加入下面的元素,以便添加访问 Composition API 的权限。

<rescap:Capability xmlns:rescap="http://schemas.microsoft.com/appx/manifest/foundation/windows10/restrictedcapabilities" Name="previewUiComposition"/>  

注意:由于 Composition API 仍然是预览状态,添加了该元素后的应用程序包将无法上传至应用商店。

类视图

Composition API 总体分为三个部分,用于管理的工厂类,用于呈现元素的 Visual 类,用于动画的 Animation 类。这些类都是派生自 CompositionObject

Visual 可视元素

Visual 是 Composition API 中最为基本的可视元素,且会呈现在屏幕上。我们可以把任何一个 XAML 可视元素都理解为一个 Visual,事实上也正是如此,所有的 UIElement 都能找到其一一对应的 Visual。所以我们也能够通过操作 Visual 来操作传统的 XAML 可视元素,但是这些操作只会影响 XAML 可视元素的呈现效果,不会更改操作区域与交互相关的内容。

Visual 元素有些基本的呈现相关属性,这些属性都能使用 Composition API 的动画 API 来演示动画。

  • Opacity 表示 Visual 的透明度。

  • Offset 表示 Visual 相对于其父 Visual 的位置偏移量。

  • Clip 表示 Visual 裁剪区域。

  • CenterPoint 表示 Visual 的中心点。

  • TransformMatrix 表示 Visual 的变换矩阵。

  • Size 表示 Visual 的尺寸大小。

  • Scale 表示 Visual 的缩放大小。

  • RotationAxis 表示 Visual 的旋转轴。

  • RotationAngle 表示 Visual 的旋转角度。

有 4 个类派生自 Visual,他们分别对应了不同种类的 Visual,分别是:

  • ContainerVisual 表示容器 Visual,可能有子节点的 Visual,大部分的 XAML 可视元素基本都是该 Visual,其他的 Visual 都也是派生自该类。

  • EffectVisual 表示通过特效来呈现内容的 Visual,可以通过配合 Win2D 的支持 Composition 的 Effects 来呈现丰富多彩的内容。

  • ImageVisual 表示通过图片来呈现内容的 Visual,可以用于呈现图片。

  • SolidColorVisual 表示一个纯色矩形的 Visual 元素。

获取 Xaml 可视元素对应的 Visual 元素下面的代码演示了如何获取 Xaml 可视元素对应的 Visual 元素。

void GetVisualFormUIElement(UIElement xamlUIElement)  
{
    var visual = (ContainerVisual)ElementCompositionPreview.GetContainerVisual(xamlUIElement);
}

Animation 演示动画

Composition API 还包含了一组用于 Visual 的演示动画 API,正如上面所述,这些 API 可以用于为 Visual 的呈现相关属性提供演示动画。

Composition API 的所有动画都集成自 CompositionAnimation 基类,并向下派生两个大类,分别是:

  • ExpressionAnimation 表示表达式来提供动画值的动画,这个动画只有两帧,初始帧与结束帧,通过表达式来提供结束帧的值。

  • KeyFrameAnimation

    表示通过关键帧来提供动画值的动画,这个动画拥有完整的时间线表达,可以设定动画的长度,并添加关键帧,而且支持缓动函数。

    另外有 4 种 不同类型的 KeyFrameAnimation 派生自此类型,分别为标量,二维向量,三维向量,四维向量的属性值提供动画。

为 Visual 元素添加动画下面的代码演示了为 Visual 元素的 Opacity 属性添加 ExpressionAnimation 动画。

void AddAniamtion(UIElement xamlUIElement)  
{
    var visual = (ContainerVisual)ElementCompositionPreview.GetContainerVisual(xamlUIElement);
    var expressionAnimation = visual .Compositor.CreateExpressionAnimation("0.5");
    visual.ConnectAnimation("Opacity", expressionAnimation ).Start();
}

Composition Helper

这是一个开源项目,为开发者能够用更熟悉与简洁的方式能够调用到 Composition API,现在已经基本完成了动画 API 的封装,现在也能使用类似于 StoryBoard 的 XAML 语法构建 Composition 动画。例如:

<Page  
    x:Class="MoePic.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MoePic"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:anime="using:MoePic.Toolkit.Media.Animation"
    xmlns:effect="using:MoePic.Toolkit.Media.Effects"
    mc:Ignorable="d">
    <Page.Resources>
        <anime:Storyboard x:Key="Storyboard">
            <anime:Vector3AnimationUseKeyFrame Property="Offset" TargetName="Button">
                <anime:Vector3AnimationUseKeyFrame.Parameters>
                    <anime:Vector3Parameter Name="delta" Value="100,100,100"/>
                </anime:Vector3AnimationUseKeyFrame.Parameters>
                <anime:ExpressionKeyFrame Expression="this.StartingValue + delta" Progress="1.0">
                    <anime:ExpressionKeyFrame.EasingFunction>
                        <anime:CubicBezierEasingFunction ControlPoint1="0.5,0" ControlPoint2="1,1"/>
                    </anime:ExpressionKeyFrame.EasingFunction>
                </anime:ExpressionKeyFrame>
            </anime:Vector3AnimationUseKeyFrame>
        </anime:Storyboard>
    </Page.Resources>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Image x:Name="Image" UseLayoutRounding="True"></Image>
        <ProgressBar x:Name="ProgressBar" VerticalAlignment="Bottom"></ProgressBar>
        <Button  x:Name="Button" Content="Click Me" Click="Button_Click">
        </Button>
    </Grid>
</Page>  

欢迎大家贡献代码,项目地址: https://github.com/higankanshi/CompositionHelper

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章