UWP , What skill Do I need to make the 2 animation?

Question

Here is my next project for 2 sensor monitor. I designed a simple UI to display sensor values.

I need advice about direction of development. Especially Animation.

Here is my designed UI.

• Left is normal status. Both Sensor value is good.
• Right is warning status. Right sensor value is too high , I want to add 2 animation on UI.

Animation 1

First animation is like this.

I made this with Blend-VS2017. but Today is my first day with UWP animation ..... I really worry my skill.

with Blend, I make like this.... but To continue this animation , it is not good. because This is only 5 second animation. if I repeat this only, it is not beautiful. because At Repeating point, User found animation is repeated.

Animation 2

It is background flowing...Red + Orange color.

I made it with blend, but To repeat it, I have no idea.. I can not copy lot of rectangle.

To make this 2 animation, What class/function do I need ? or should I use a Blend function ?

Before I start the development, I need advice what I should learn....

Answer 1

There are a few ways you can create these two animations, but given that you just got your hands dirty with Blend, let's keep the solution as simple as possible - expect to do 99% of the work in Blend alone!

Background animation

To create a repeatable background animation, all you need to do is to animate your striped background's translate by

(The distance between two rectangles + The height of rectangle) x Math.Sqrt(2)

Assuming the angle of your background is 45 degrees.

So if you define a 32xn rectangle with a margin of 16, the translate would be (32 + 16 *2) * 1.414 = 90.5. Then your background animation would be something like the following

<Storyboard x:Name="BackgroundAnimation"
            RepeatBehavior="Forever">
    <DoubleAnimation Duration="0:0:2"
                     To="-90.5"
                     Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
                     Storyboard.TargetName="RectGroups"
                     d:IsOptimized="True" />
    <DoubleAnimation Duration="0:0:2"
                     To="-90.5"
                     Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
                     Storyboard.TargetName="RectGroups"
                     d:IsOptimized="True" />
</Storyboard>

Circle spreading animation

This one is even simpler. All you have to do is to duplicate your animation, and delay the start of the second one by half a second, given each spreading animation duration is one second.

Have a look at this little sample I just created. Hope you will find it helpful. Good luck!

Sample result