Uwp advanced animations

Question

I want to create advanced animation with C# UWP.

Animation that would look like this:

Any idea how to achieve this?

Answer 1

I'm not so sure what is under your blur effect. Looks like it is a wave related animation. So let's make your animation to two parts:

1. See Justin's answer on the following thread, the answer will tell you how you can create a wave animation.
2. As mentioned above by Jet Chopper, we can add blur brush(CompositionBackdropBrush) based on sample code from this MS doc

So to understand this in a simple way, you can:

1. Download Justin's sample from here
2. Add BackdropBlurBrush to his project
3. Write the following code in MainPage XAML:

  <local:WaveProgressControl x:Name="WaveProgressControl" />

    <Rectangle Width="200" Height="200" Stroke="Red" StrokeThickness="3" >
        <Rectangle.Fill>
            <blureffect:BackdropBlurBrush BlurAmount="10"/>
        </Rectangle.Fill>
    </Rectangle>

The blureffect above refer to the namespace which include your BackdropBlurBrush. In this way you have a basic sample that looks like what you want. You can modify your project based on this.