[UWP]使用CompositionLinearGradientBrush實作漸變畫筆并制作影片

1. 什么是 CompositionBrush

CompositionBrush(合成畫筆)是操作可視化層時用于繪制 SpriteVisual 區域的畫筆，

使UWP 應用時可以選擇使用 XAML 畫筆或 CompositionBrush(合成畫筆) 繪制 UIElement，很多時候XAML畫筆和合成畫筆都能實作同樣的效果，在官方檔案 使用 XAML 畫筆 vs，CompositionBrush 這一節中有詳細的對比介紹，

CompositionBrush性能更好且能做更復雜的影片，XAML Brush的能力是有極限的，我從短暫的UWP生涯當中學到一件事，XAML Brush越是玩弄影片，影片就越可能因為沒有料到的事態而失敗……除非超越XAML Brush，所以我不做XAML Brush影片啦，

2. 使用CompositionLinearGradientBrush

CompositionLinearGradientBrush 是線性漸變畫筆，它是最基本的畫筆之一，可以實作類似 LinearGradientBrush的效果，基本使用步驟如下：

1. 通過Compositor創建CompositionLinearGradientBrush；
2. 通過Compositor創建并配置CompositionColorGradientStop，然后添加到CompositionLinearGradientBrush的ColorStops里；
3. 創建SpriteVisual并將它的Brush設定為CompositionLinearGradientBrush；
4. 使用ElementCompositionPreview.SetElementChildVisual 將SpriteVisual設定到某個UIElement的可視化層里，

具體代碼如下：

<Rectangle x:Name="Gradient"/>

var compositor = Window.Current.Compositor;

//創建 CompositionLinearGradientBrush，
var gradientBrush = compositor.CreateLinearGradientBrush();
gradientBrush.StartPoint = Vector2.Zero;
gradientBrush.EndPoint = new Vector2(1.0f);

var blueGradientStop = compositor.CreateColorGradientStop();
blueGradientStop.Offset = 0f;
blueGradientStop.Color = Color.FromArgb(255, 43, 210, 255);
var redGradientStop = compositor.CreateColorGradientStop();
redGradientStop.Offset = 1f;
redGradientStop.Color = Color.FromArgb(255, 255, 43, 136);
gradientBrush.ColorStops.Add(blueGradientStop);
gradientBrush.ColorStops.Add(redGradientStop);

//創建SpriteVisual并設定Brush
var backgroundVisual = compositor.CreateSpriteVisual();
backgroundVisual.Brush = gradientBrush;

//將自定義 SpriteVisual 設定為元素的可視化樹的最后一個子元素，
ElementCompositionPreview.SetElementChildVisual(Gradient, backgroundVisual);

Gradient.SizeChanged += (s, e) =>
{
    if (e.NewSize == e.PreviousSize)
        return;

    //設定gradientBrush的尺寸
    backgroundVisual.Size = e.NewSize.ToVector2();
    gradientBrush.CenterPoint = backgroundVisual.Size / 2;
};

運行效果如下：

寫了這么多代碼，最終的效果其實和下面的XAML一樣，

<Rectangle x:Name="Gradient">
    <Rectangle.Fill>
        <LinearGradientBrush EndPoint="1,1" StartPoint="0,0">
            <GradientStop Color="#FFFF2B88" Offset="1"/>
            <GradientStop Color="#FF2BD2FF" Offset="0"/>
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

到目前為止看起來CompositionBrush沒什么優勢，

3. 使用合成影片

其實CompositionBrush其中一個好玩的地方是靈活的合成影片，

要使用合成影片，簡單來說就是三個步驟：

1. 創建CompositionAnimation；
2. 配置CompositionAnimation；
3. 在要實作影片效果的CompositionObject及其屬性上呼叫StartAnimation;

下面這段代碼是對CompositionColorGradientStop的Offset屬性進行影片：

//創建影片
var relaxGradientStopOffsetAnimation = _compositor.CreateScalarKeyFrameAnimation();
//配置影片
relaxGradientStopOffsetAnimation.Duration = TimeSpan.FromSeconds(1);
relaxGradientStopOffsetAnimation.InsertKeyFrame(1.0f, ViewModel.IsInPomodoro ?1.0f : 0.75f);
//運行影片
_relaxGradientStop.StartAnimation(nameof(_relaxGradientStop.Offset), relaxGradientStopOffsetAnimation);

完整代碼在 這里，具體運行效果如下：

4. 結語

其實上面的影片也可以用XAML畫刷及Storyboard實作，但和這些技術已經老夫老妻了，再玩下去也沒什么激情，所以想要玩點新花樣，最近一直在搞番茄鐘應用，有什么新的想法都會塞進去，可以在下面地址安裝：

一個番茄鐘

5. 參考

合成畫筆 - Windows UWP applications _ Microsoft Docs
合成影片 - Windows UWP applications _ Microsoft Docs
CompositionLinearGradientBrush Class (Windows.UI.Composition) - Windows UWP applications _ Microsoft Docs
SpriteVisual Class (Windows.UI.Composition) - Windows UWP applications _ Microsoft Docs
ElementCompositionPreview.SetElementChildVisual(UIElement, Visual) Method (Windows.UI.Xaml.Hosting) - Windows UWP applications _ Microsoft Docs

6. 原始碼

OnePomodoro_Gradients.xaml.cs at master

標籤：UWP

上一篇：UWP使用TreeView

下一篇：[UWP]CompositionLinearGradientBrush加BlendEffect，雙倍的快樂