UWP CompositionLinearGradientBrush搭配BlendEffect，双倍效果更炫彩

1. 什么是BlendEffect

在上一篇文章中，我们已经了解了CompositionLinearGradientBrush的基本用法，这篇文章将进一步结合BlendEffect介绍一些更为复杂的应用。

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

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

虽然看起来有点复杂，我的理解是它相当于在色轮中拉出一条直线连接Background和Foreground，然后取直线中间点的颜色。例如，红色和蓝色组合会变成紫色，如下图所示：

2. 组合CompositionBrush并使用BlendEffect

许多CompositionBrushes可以使用其他CompositionBrushes作为输入。例如，使用SetSourceParameter方法可以将其他CompositionBrush设为CompositionEffectBrush的输入。这是CompositionBrush最有趣的地方之一。以下是如何使用BlendEffect创建CompositionBrush的示例。

首先创建两个CompositionLinearGradientBrush：

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：

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

使用BlendEffect创建Brush，并用SetSourceParameter设置它的Foreground和Background：

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

最后，常规使用这个blendEffectBrush的代码如下：

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

最终运行效果如下：

3. 创建动画

与上一篇文章一样，我也将这篇文章中使用的技术应用到了一个番茄钟应用中。通过ColorKeyFrameAnimation和ScalarKeyFrameAnimation简单地制作动画：

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