UWP, What do I need to make 2 animations?

Question

Here is my next project for 2 touch monitors. I developed a simple user interface for displaying sensor values.

I need advice on the direction of development. Especially animation.

Here is my developed user interface.

• On the left is the normal status. Both sensor values ​​are good.
• Right is the warning status. The value of the right sensor is too large, I want to add 2 animations to the user interface.

Animation 1

The first animation is this.

I did this with Blend-VS2017. but today is my first day with UWP animations ..... I really relive my skill.

with Blend, I do like this .... but To continue this animation, this is not good. because it’s just 5 seconds of animation. if I repeat it only, it is not beautiful. because at the repetition point, the user-found animation is repeated.

Animation 2

This is the background, the current ... Red + Orange.

I did this with a blend, but to repeat it, I have no idea. I can not copy a lot of rectangle.

To make this 2 animation, what class / function do I need? or should i use the blend function?

Before starting development, I need advice that I should study ...

Answer 1

There are several ways to create these two animations, but given that you have just tricked Blend's hands, let this make the problem as simple as possible - expect 99% of the work in Blend!

Background animation

To create a repeatable background animation, all you need to do is animate your striped background translation to

(Distance between two rectangles + Rectangle height) x Math.Sqrt(2)

Assuming the background angle is 45 degrees.

So, if you define a 32xn rectangle with an edge of 16, the translation will be (32 + 16 *2) * 1.414 = 90.5 . Then your background animation will look something like this:

 <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 spread animation

It is even easier. All you have to do is duplicate the animation and delay the start of the second by half a second , given that each duration of the propagation animation is one second.

Look at this little sample that I just created. I hope you will like it. Good luck

Result Example

Answer 2

I'm right: do you want to repeat this animation? if so: you can open the animation in XAML and set RepeatBehavior = "Forever" to your DoubleAnimation or whatever you use.

If I'm wrong, write what you want. It would be better if you show you the XAML of your storyboard.