[UWP]使用CompositionLinearGradientBrush實(shí)現(xiàn)漸變畫筆并制作動(dòng)畫

1. 什么是 CompositionBrush

CompositionBrush(合成畫筆)是操作可視化層時(shí)用于繪制 SpriteVisual?區(qū)域的畫筆。

在做網(wǎng)站、成都網(wǎng)站建設(shè)過程中，需要針對客戶的行業(yè)特點(diǎn)、產(chǎn)品特性、目標(biāo)受眾和市場情況進(jìn)行定位分析，以確定網(wǎng)站的風(fēng)格、色彩、版式、交互等方面的設(shè)計(jì)方向。成都創(chuàng)新互聯(lián)公司還需要根據(jù)客戶的需求進(jìn)行功能模塊的開發(fā)和設(shè)計(jì)，包括內(nèi)容管理、前臺展示、用戶權(quán)限管理、數(shù)據(jù)統(tǒng)計(jì)和安全保護(hù)等功能。

使UWP 應(yīng)用時(shí)可以選擇使用 XAML 畫筆或 CompositionBrush(合成畫筆) 繪制 UIElement。很多時(shí)候XAML畫筆和合成畫筆都能實(shí)現(xiàn)同樣的效果，在官方文檔 使用 XAML 畫筆 vs。CompositionBrush 這一節(jié)中有詳細(xì)的對比介紹。

CompositionBrush性能更好且能做更復(fù)雜的動(dòng)畫。XAML Brush的能力是有極限的，我從短暫的UWP生涯當(dāng)中學(xué)到一件事，XAML Brush越是玩弄?jiǎng)赢?，?dòng)畫就越可能因?yàn)闆]有料到的事態(tài)而失敗……除非超越XAML Brush。所以我不做XAML Brush動(dòng)畫啦。

2. 使用CompositionLinearGradientBrush

CompositionLinearGradientBrush 是線性漸變畫筆，它是最基本的畫筆之一，可以實(shí)現(xiàn)類似 LinearGradientBrush的效果?；臼褂貌襟E如下：

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

具體代碼如下：

<Rectangle x:Name="Gradient"/>

var compositor = Window.Current.Compositor;

//創(chuàng)建 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);

//創(chuàng)建SpriteVisual并設(shè)置Brush
var backgroundVisual = compositor.CreateSpriteVisual();
backgroundVisual.Brush = gradientBrush;

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

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

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

運(yùn)行效果如下：

寫了這么多代碼，最終的效果其實(shí)和下面的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沒什么優(yōu)勢。

3. 使用合成動(dòng)畫

其實(shí)CompositionBrush其中一個(gè)好玩的地方是靈活的合成動(dòng)畫。

要使用合成動(dòng)畫，簡單來說就是三個(gè)步驟：

1. 創(chuàng)建CompositionAnimation；
2. 配置CompositionAnimation；
3. 在要實(shí)現(xiàn)動(dòng)畫效果的CompositionObject及其屬性上調(diào)用StartAnimation;

下面這段代碼是對CompositionColorGradientStop的Offset屬性進(jìn)行動(dòng)畫：

//創(chuàng)建動(dòng)畫
var relaxGradientStopOffsetAnimation = _compositor.CreateScalarKeyFrameAnimation();
//配置動(dòng)畫
relaxGradientStopOffsetAnimation.Duration = TimeSpan.FromSeconds(1);
relaxGradientStopOffsetAnimation.InsertKeyFrame(1.0f, ViewModel.IsInPomodoro ?1.0f : 0.75f);
//運(yùn)行動(dòng)畫
_relaxGradientStop.StartAnimation(nameof(_relaxGradientStop.Offset), relaxGradientStopOffsetAnimation);

完整代碼在 這里，具體運(yùn)行效果如下：

4. 結(jié)語

其實(shí)上面的動(dòng)畫也可以用XAML畫刷及Storyboard實(shí)現(xiàn)，但和這些技術(shù)已經(jīng)老夫老妻了，再玩下去也沒什么激情，所以想要玩點(diǎn)新花樣。最近一直在搞番茄鐘應(yīng)用，有什么新的想法都會(huì)塞進(jìn)去，可以在下面地址安裝：

一個(gè)番茄鐘

5. 參考

合成畫筆 - Windows UWP applications _ Microsoft Docs
合成動(dòng)畫 - 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

網(wǎng)站題目：[UWP]使用CompositionLinearGradientBrush實(shí)現(xiàn)漸變畫筆并制作動(dòng)畫
文章位置：http://muchs.cn/article18/jpepdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、網(wǎng)站制作、服務(wù)器托管、外貿(mào)網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)