[UWP]抄抄《CSS 故障艺术》的动画

1. 前言

什么是故障艺术（Glitch Art 风）？我们熟知的抖音的 LOGO 正是故障艺术其中一种表现形式。它有一种魔幻的感觉，看起来具有闪烁、震动的效果，很吸引人眼球。故障艺术它模拟了画面信号出现故障导致成像错误的感觉。青色色块与红色色块无法重合就是这种故障的体现。从胶片时代开始到今天的数码时代，这种故障一直是观众非常熟悉的现象。

上个月看到CSS 故障艺术这篇文章，最近想转换心情于是开始抄它的动画了（顺便为博客园的UWP板块吊命）。CSS的mix-blend-mode好像很好用，这次用UWP中Win2D的BlendEffect模仿它的玩法。

2. 什么是BlendEffect

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

要使用BlendEffect，需要为它设置Mode，并将Foreground和Background设置为CompositionEffectSourceParameter：

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

然后使用这个BlendEffect创建Brush，并用SetSourceParameter设置它的Foreground和Background为需要混合的两个CompositionBrush：

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