专栏首页dino.c的专栏[UWP]使用AlphaMaskEffect提升故障艺术动画的性能(顺便介绍怎么使用性能探测器分析UWP程序)

[UWP]使用AlphaMaskEffect提升故障艺术动画的性能(顺便介绍怎么使用性能探测器分析UWP程序)

前几天发布了抄抄《CSS 故障艺术》的动画这篇文章,在这篇文章里介绍了如何使用Win2D绘制文字然后配合BlendEffect制作故障艺术的动画。本来打算就这样收手不玩这个动画了,但后来又发现性能不符合理想。明明只是做做Resize动画和用BlendEffect混合,为什么性能会这么差呢?

1. 分析原因

其实不用分析都知道哪里出问题了,毕竟这个懒是自己偷的,不过这里顺便介绍介绍Visual Studio的性能分析。Visual Studio不停更新它的性能探测器,最近几年我还挺喜欢的的“应用程序时间线”功能,对桌面应用来说这个功能很好用,可以直观地看到帧率、CPU使用、布局消耗、呈现消耗等信息。

要开始性能分析,首先在顶部菜单选择“调试”->“性能探测器”:

在打开的性能探测器配置页面,选中“CPU使用率”和“应用程序时间线”两个工具后点击“开始”按钮:

之后Visual Studio就会启动性能会话并运行程序,切换到打开的应用程序里,一顿操作后关闭程序,稍等一下就可以看到分析报告。

为了凸显性能问题,我复制粘贴了好几个个故障艺术的动画,可以看到后半段的FPS下降了,且“应用程序代码”占了很大的比例。切换到"CPU使用率"选项卡,能看到具体的CPU消耗都在DrawSurfaceCore这个函数附近

双击DrawSurfaceCore这行进去具体代码,这里颜色越红代表CPU占用率越高,并且会在源码左侧显示具体的CPU占用率,很明显这里的代码很糟糕,那么罪魁祸首就是这堆代码了。

2. 使用AlphaMaskEffect优化性能

上面的这段代码是使用Win2D绘制文字和使用GaussianBlurEffect制作阴影。本来这代码性能应该没问题(当然,在这个动画里有优化空间,例如因为我在这里总是使用BlurAmount = 0的阴影所以根本不需要GaussianBlurEffect也不需要DrawImage),但是我使用了Storyboard控制文字的高度,然后每次高度改变都重新调用这个函数绘制文字。从结果上来说我的代码在不停画图,所以小小的动画造成了巨大的性能消耗。

现在我要做什么才可以改善这种状况?当然上面这段代码有很多优化的空间,但最根本要做的是应该少调用这段代码,少重新绘图。一个很复杂的情况是,我需要使用两个这段代码绘制出来的CompositionSurfaceBrush作为BlendEffect的输入,而CompositionSurfaceBrush本质上是一张位图,而作为Brush又没法修改它的尺寸。CompositionSurfaceBrush关联了一个CompositionDrawingSurface,后者虽然有Resize函数,但使用这个函数会令图片在动画过程中移位,明明单独使用Resize效果不错,但用在动画里就总是错,我也没心思去纠结它的原因。

其实要改变Brush的高度,一种很实在的方法是使用遮罩。CompositionApi提供了CompositionMaskBrush,使用它可以实现OpacityMask的效果,复习一下它的源码:

paint-with-a-compositionbrush-with-opacity-mask-applied

Compositor _compositor;
SpriteVisual _maskVisual;
CompositionMaskBrush _maskBrush;

_compositor = Window.Current.Compositor;

_maskBrush = _compositor.CreateMaskBrush();

CompositionLinearGradientBrush _sourceGradient = _compositor.CreateLinearGradientBrush();
_sourceGradient.ColorStops.Add(_compositor.CreateColorGradientStop(0,Colors.Red));
_sourceGradient.ColorStops.Add(_compositor.CreateColorGradientStop(1,Colors.Yellow));
_maskBrush.Source = _sourceGradient;

LoadedImageSurface loadedSurface = LoadedImageSurface.StartLoadFromUri(new Uri("ms-appx:///Assets/circle.png"), new Size(156.0, 156.0));
_maskBrush.Mask = _compositor.CreateSurfaceBrush(loadedSurface);

_maskVisual = _compositor.CreateSpriteVisual();
_maskVisual.Brush = _maskBrush;
_maskVisual.Size = new Vector2(156, 156);

使用CompositionMaskBrush之前首先要有一张作为Mask的图片,用Paint.Net两三下就做好了,比奥特曼打到怪兽还快。

接下来只要用显示文字的CompositionSurfaceBrush作为CompositionMaskBrush的Source,用上面这张图片制作的CompositionSurfaceBrush作为Mask,再对Mask做Scale的动画,高度改变的动画就…………

就报错了。

好吧,我想起来了文档里就说明了CompositionMaskBrush不能玩BlendEffect。

不过幸运的是Win2D本来就提供了AlphaMaskEffect这个类,它的作用几乎和CompositionMaskBrush一样,我之前都没想到会有使用它的一天。使用它的代码大同小异,两三下就写完了:

private (CompositionBrush, CompositionSurfaceBrush) CreateMaskedBrush(CompositionBrush source)
{
    var compositor = Window.Current.Compositor;
    var effect = new AlphaMaskEffect()
    {
        Source = new CompositionEffectSourceParameter("Source"),
        AlphaMask = new CompositionEffectSourceParameter("Mask"),
    };

    var opacityMaskSurface = LoadedImageSurface.StartLoadFromUri(new Uri("ms-appx:///Assets/Images/mask.Png"));
    var opacityBrush = Compositor.CreateSurfaceBrush(opacityMaskSurface);
    opacityBrush.Stretch = CompositionStretch.UniformToFill;

    var effectFactory = compositor.CreateEffectFactory(effect);
    var compositionBrush = effectFactory.CreateBrush();
    compositionBrush.SetSourceParameter("Source", source);
    compositionBrush.SetSourceParameter("Mask", opacityBrush);
    return (compositionBrush, opacityBrush);
}

3. 结果

左边是旧的代码(每次改变高度重新绘图),右边是新的代码(对作为Mask的CompositionSurfaceBrush进行Scale动画),可以看到……嗯,好像新动画是刘畅了些。

看起来再玩大些都还撑得住,GPU占用率还算满意,CPU占用率也不高。其实还有不少优化空间,但我还是完全想不到这个动画实际应用场景(恕我想象力贫乏),所以就到吃为止吧。

4. 参考

CompositionMaskBrush Class (Windows.UI.Composition) - Windows UWP applications Microsoft Docs

AlphaMaskEffect Class

合成画笔 - UWP applications Microsoft Docs

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [UWP]使用CompositionAPI的翻转动画

    在 使用GetAlphaMask和ContainerVisual制作长阴影(Long Shadow) 这篇文章里我介绍了一个包含长阴影的番茄钟,这个番茄钟在状态...

    dino.c
  • [UWP]使用SpringAnimation创建有趣的动画

    最近用弹簧动画(SpringAnimation)做了两个番茄钟,关于弹簧动画官方文档已经介绍得够详细了,这篇文章就摘录一些官方文档核心内容。

    dino.c
  • [WPF自定义控件库]了解WPF的布局过程,并利用Measure为Expander添加动画

    这篇文章介绍WPF UI元素的两步布局过程,并且通过Resizer控件介绍只使用Measure可以实现些什么内容。

    dino.c
  • mysql 数据库 简单存储过程游标使用

    BEGIN #Routine body goes here... DECLARE no_more_record INT DEFAULT 0; DECLA...

    大道七哥
  • 【配置文件提取】

    很多小伙伴反馈说之前发布的两个小工具(参数查询、活动保障方案自动输出),不知道如何提取现网站点的配置文件,下面就详细说一下在华为U2000网管中如何提取站点的配...

    用户6184845
  • 配置文件提取

    很多小伙伴反馈说之前发布的两个小工具(参数查询、活动保障方案自动输出),不知道如何提取现网站点的配置文件,下面就详细说一下在华为U2000网管中如何提取站点的配...

    用户6184845
  • Microsoft Sync Framework 2.1 软件开发包 (SDK)

    Sync Framework 2.1 引入了新功能,这些功能支持您计算机上的 SQL Server 或 SQL Server Compact 数据库与 SQL ...

    张善友
  • PHP中文处理工具函数的用法总结

    string GBspace(string) --------- 每个中文字之间加空格

    用户7657330
  • HTTP协议入门教程,一文就够了!

    HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传...

    辉哥
  • C++数组与指针

    不知道在通过前面的内容学习后,是否有很多小伙伴都会认为数组和指针是等价的,数组名表示数组的首地址呢?不幸的是,这是一种非常危险的想法,并不完全正确,前面我们将数...

    老九学堂-小师弟

扫码关注云+社区

领取腾讯云代金券