[UWP] use CompositionLinearGradientBrush achieve a gradual brush and animation

1. What is CompositionBrush

CompositionBrush (Synthesis pen) for drawing operation visualization layer SpriteVisual  brush area.

So that the application can choose to use UWP XAML brush or CompositionBrush (Synthesis pen) drawn UIElement. Many times XAML brush and synthetic brushes can achieve the same effect, in official documents using XAML brush vs. CompositionBrush This section describes in detail the contrast.

CompositionBrush better performance and do more complex animation. Ability XAML Brush is a limit, I learned from a brief career which UWP one thing, the more playing XAML Brush animation, the animation, the more likely because the situation did not expect to fail ...... unless beyond XAML Brush. So I do not do XAML Brush animated friends.

2. 使用CompositionLinearGradientBrush

CompositionLinearGradientBrush is a linear gradient brush, brush it is one of the most basic, you can achieve similar LinearGradientBrush effect. The basic use of the following steps:

1. CompositionLinearGradientBrush created by Compositor;
2. By Compositor create and configure CompositionColorGradientStop, then add to CompositionLinearGradientBrush of ColorStops years;
3. Creating SpriteVisual and its Brush set CompositionLinearGradientBrush;
4. Use ElementCompositionPreview.SetElementChildVisual to SpriteVisual provided to a visualization layer UIElement's.

Specific code as follows:

<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;
};

Operating results are as follows:

I write so much code and the final effect is actually the same as the following 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>

So far nothing seems CompositionBrush advantage.

3. The use of synthetic animation

In fact CompositionBrush a place where fun is flexible synthetic animation.

To use synthetic animation, it is simply three steps:

1. Creating CompositionAnimation;
2. Configuration CompositionAnimation;
3. Calls on the animated CompositionObject to achieve their attributes startAnimation ;

The following code is CompositionColorGradientStop of Offsetanimated properties:

//创建动画
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);

In the complete code here , the following specific operational effects:

4. Conclusion

In fact, the above animation can also brush with XAML and Storyboard achieved, but these technologies have an old married couple, and have nothing to go play with passion, so I want to play something new. Pomodoro has recently been engaged in the application, what new ideas will go into, you can be installed in the following address:

Pomodoro

5. Reference

合成画笔 - 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. Source

OnePomodoro_Gradients.xaml.cs at master