原文:[UWP]CompositionLinearGradientBrush加BlendEffect,双倍的快乐

1. 什么是BlendEffect#

上一篇文章介绍了CompositionLinearGradientBrush的基本用法, 这篇文章再结合BlendEffec介绍一些更复杂的玩法。

Microsoft.Graphics.Canvas.Effects命名空间下的BlendEffect 用于组合两张图片(分别是作为输入源的Background和Foreground),它包含多种模式,如下图所示:

其中最简单的是Screen模式,它的计算公式如下

看起来有点复杂, 我的理解是它相当于色轮中Background和Foreground之间拉直线,在直线的中间点的颜色,如下面这张图,红色和蓝色组合成为紫色:

2. 组合CompositionBrush并使用BlendEffect#

许多 CompositionBrushes 使用其他 CompositionBrushes 作为输入。 例如,使用 SetSourceParameter 方法可以将其他 CompositionBrush 设为 CompositionEffectBrush 的输入。这是CompositionBrush最好玩的地方之一。下面的例子介绍了怎么使用BlendEffect创建CompositionBrush。

首先创建两个CompositionLinearGradientBrush:

Copy
var foregroundBrush = compositor.CreateLinearGradientBrush();
foregroundBrush.StartPoint = Vector2.Zero;
foregroundBrush.EndPoint = new Vector2(1.0f);
var redGradientStop = compositor.CreateColorGradientStop();
redGradientStop.Offset = 0f;
redGradientStop.Color = Color.FromArgb(255, 255, 0, 0);
var yellowGradientStop = compositor.CreateColorGradientStop();
yellowGradientStop.Offset = 1f;
yellowGradientStop.Color = Color.FromArgb(255, 0, 178, 255);
foregroundBrush.ColorStops.Add(redGradientStop);
foregroundBrush.ColorStops.Add(yellowGradientStop); var backgroundBrush = compositor.CreateLinearGradientBrush();
backgroundBrush.StartPoint = new Vector2(0, 1f);
backgroundBrush.EndPoint = new Vector2(1f, 0);
var blueGradientStop = compositor.CreateColorGradientStop();
blueGradientStop.Offset = 0f;
blueGradientStop.Color = Color.FromArgb(255, 0, 0, 255);
var greenGradientStop = compositor.CreateColorGradientStop();
greenGradientStop.Offset = 1f;
greenGradientStop.Color = Color.FromArgb(255, 0, 255, 0);
backgroundBrush.ColorStops.Add(blueGradientStop);
backgroundBrush.ColorStops.Add(greenGradientStop);

它们的效果分别如下面两张图片所示:

接下来创建BlendEffect,并将Foreground和Background设置为CompositionEffectSourceParameter

Copy
var blendEffect = new BlendEffect()
{
Mode = BlendEffectMode.Screen,
Foreground = new CompositionEffectSourceParameter("Main"),
Background = new CompositionEffectSourceParameter("Tint"),
};

使用BlendEffect创建Brush,并用SetSourceParameter设置它的Foreground和Background。

Copy
var effectFactory = compositor.CreateEffectFactory(blendEffect);
var blendEffectBrush = effectFactory.CreateBrush();
blendEffectBrush.SetSourceParameter("Main", foregroundBrush);
blendEffectBrush.SetSourceParameter("Tint", backgroundBrush);

最后就是一般的使用这个blendEffectBrush的代码:

Copy
//创建SpriteVisual并设置Brush
var spriteVisual = compositor.CreateSpriteVisual();
spriteVisual.Brush = blendEffectBrush; //将自定义 SpriteVisual 设置为元素的可视化树的最后一个子元素。
ElementCompositionPreview.SetElementChildVisual(Gradient, spriteVisual);

最终运行效果如下:

3. 创建动画#

和上一篇文章一样,我也把这篇文章用到的技术用在了一个番茄钟应用里,,简单地使用ColorKeyFrameAnimationScalarKeyFrameAnimation制作动画:

Copy
private void StartOffsetAnimation(CompositionColorGradientStop gradientOffset, float offset)
{
var offsetAnimation = _compositor.CreateScalarKeyFrameAnimation();
offsetAnimation.Duration = TimeSpan.FromSeconds(1);
offsetAnimation.InsertKeyFrame(1.0f, offset);
gradientOffset.StartAnimation(nameof(CompositionColorGradientStop.Offset), offsetAnimation);
} private void StartColorAnimation(CompositionColorGradientStop gradientOffset, Color color)
{
var colorAnimation = _compositor.CreateColorKeyFrameAnimation();
colorAnimation.Duration = TimeSpan.FromSeconds(2);
colorAnimation.Direction = Windows.UI.Composition.AnimationDirection.Alternate;
colorAnimation.InsertKeyFrame(1.0f, color);
gradientOffset.StartAnimation(nameof(CompositionColorGradientStop.Color), colorAnimation);
}

完整代码在这里,具体运行效果如下:

4. 结语#

上面的动画可以安装我的番茄钟应用试玩一下,安装地址:

一个番茄钟

这篇文章的动画和代码都参考了JustinLiu的代码,感谢他的分享。

使用XAML画笔难以做到这种多向渐变的效果,这都多亏了UWP提供了BlendEffect这个好玩的东西。BlendEffect还有很多其它好玩的模式,大家有空可以多多尝试。

参考#

合成画笔 - Windows UWP applications _ Microsoft Docs

BlendEffect Class

BlendEffectMode Enumeration

CompositionEffectBrush.SetSourceParameter(String, CompositionBrush) Method (Windows.UI.Composition) - Windows UWP applications _ Microsoft Docs

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

源码#

OnePomodoro_GradientsWithBlend.xaml.cs at master

[UWP]CompositionLinearGradientBrush加BlendEffect,双倍的快乐的更多相关文章

  1. [UWP]用Win2D和CompositionAPI实现文字的发光效果,并制作动画

    1. 成果 献祭了周末的晚上,成功召唤出了上面的番茄钟.正当我在感慨"不愧是Shadow大人,这难道就是传说中的五彩斑斓的黑?" "那才不是什么阴影效果,那是发光效果.& ...

  2. [UWP]组合CompositionBrush并使用BlendEffect

    1. 什么是BlendEffect 上一篇文章介绍了CompositionLinearGradientBrush的基本用法, 这篇文章再结合BlendEffec介绍一些更复杂的玩法. Microsof ...

  3. UWP开发细节记录:加载图像文件到D2D位图和D3D纹理

    在UWP中加载文件一般先创建 StorageFile 对象,然后调用StorageFile.OpenReadAsync 方法得到一个IRandomAccessStream 接口用来读取数据: Stor ...

  4. [UWP]推荐一款很Fluent Design的bilibili UWP客户端 : 哔哩

    UWP已经有好几个Bilibili的客户端,最近有多了一个: 哔哩 - Microsoft Store 作者云之幻是一位很擅长设计的UWP开发者,我也从他那里学到了很多设计方面的技巧.它还是一位Bil ...

  5. win10 uwp 让焦点在点击在页面空白处时回到textbox中

    在网上 有一个大神问我这样的问题:在做UWP的项目,怎么能让焦点在点击在页面空白处时回到textbox中? 虽然我的小伙伴认为他这是一个 xy 问题,但是我还是回答他这个问题. 首先需要知道什么是空白 ...

  6. win10 uwp 获得Slider拖动结束的值

    原文:win10 uwp 获得Slider拖动结束的值 本文讲的是如何获得Slider移动结束的值,也就是触发移动后的值.如果我们监听ValueChanged,在我们鼠标放开之前,只要拖动不放,那么就 ...

  7. 2019-11-25-win10-uwp-通过命令行脚本开启旁加载

    原文:2019-11-25-win10-uwp-通过命令行脚本开启旁加载 title author date CreateTime categories win10 uwp 通过命令行脚本开启旁加载 ...

  8. 迁移桌面程序到MS Store(5)——.NET Standard

    接下来的几篇,我想讨论下迁移桌面程序到MS Store,可以采用的比较常见.通用性比较强的实施步骤和分层架构. 通常商业项目一般都是不断的迭代,不太可能突然停止更新现有的桌面版本,然后花很长时间从头来 ...

  9. 2018BNU校赛总决赛

    题解是qls的题解我就懒得写了23333 A塞特斯玛斯塔 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言65536K 64bit IO Format: %lld ...

随机推荐

  1. Python学习:Python设计模式-单例模式

    一.单例模式存在的意义 在这里的单例就是只有一个实例(这里的实例就像在面向对象的时候,创建了一个对象也可以说创建了一个实例),只用一个实例进行程序设计,首先我们可以了解一下什么时候不适合使用单例模式, ...

  2. UVa 1601 || POJ 3523 The Morning after Halloween (BFS || 双向BFS && 降维 && 状压)

    题意 :w*h(w,h≤16)网格上有n(n≤3)个小写字母(代表鬼).要求把它们分别移动到对应的大写字母里.每步可以有多个鬼同时移动(均为往上下左右4个方向之一移动),但每步结束之后任何两个鬼不能占 ...

  3. 【bzoj2763】[JLOI2011]飞行路线

    *题目描述: Alice和Bob现在要乘飞机旅行,他们选择了一家相对便宜的航空公司.该航空公司一共在n个城市设有业务,设这些城市分别标记为0到n-1,一共有m种航线,每种航线连接两个城市,并且航线有一 ...

  4. Python黑科技:在家远程遥控公司电脑,python+微信一键连接!

    有时候需要远程家里的台式机使用,因为我平时都是用 MAC 多,但是远程唤醒只能针对局域网,比较麻烦,于是我想用微信实现远程唤醒机器. 准备工作 本程序主要是实现远程管理 Windows10操作系统的开 ...

  5. Vue 中 使用v-show

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 190707select和selector模块

    一.select模块 Python select socket server代码示例 # Author:Li Dongfei import select, socket, sys, queue ser ...

  7. ACM ICPC 2011-2012 Northeastern European Regional Contest(NEERC)A ASCII Area

    A: 给你一个矩阵求'/' 和 '\' 围成的图形,简单签到题,有一些细节要考虑. 题解:一行一行的跑,遇到'/'和'\' 就加0.5, 在面积里面的'.' 就加1.用一个flag来判断是否在围住的图 ...

  8. legend3---Windows 7/8/10 系统下Laravel框架的开发环境安装及部署详解(Vagrant + Homestead)

    legend3---Windows 7/8/10 系统下Laravel框架的开发环境安装及部署详解(Vagrant + Homestead) 一.总结 一句话总结: 1.安装的话就是下载好git,va ...

  9. 微信小程序 API 界面(1)

    界面 有关屏幕的api 交互: wx.showToast() 显示消息提示框 参数:object object的属性: title:类型 字符串 提示的内容(文本最多7个汉字) icon:类型 字符串 ...

  10. 惠普DL360G6安装ESXi主机后设置多块网卡

    需要先把服务器的网线连接到路由器 然后打开esxi设置网络的netwoork adapters 选中多块网卡,点确定保持 然后在到esxi客户端操作: 直接下一步 这里填上路由器分配的网段ip即可了