5

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. enter image description here

  • 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. enter image description here

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.

enter image description here

Animation 2

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

enter image description here

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....

Justin XL
  • 38,763
  • 7
  • 88
  • 133
Kazuhiko Nakayama
  • 801
  • 1
  • 8
  • 24

2 Answers2

6

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

enter image description here

Justin XL
  • 38,763
  • 7
  • 88
  • 133
1

Am I right: you want to repeat this animations? if it is: you can open animation in XAML and set RepeatBehavior="Forever" of your DoubleAnimation or whatever you use.

If I wrong, write what do you want. It would be better if you show you XAML of your Storyboard.

Denis Kosov
  • 697
  • 6
  • 21
  • Thank you !, I found a way to repeat animation : ) in my animation, There is lot of rectangle or circle, Is there a way to repeat animation from 3 second by 4 second period only ? because If we repeat with 0-5 second, in repeating, It is not smooth repeating. – Kazuhiko Nakayama Aug 01 '17 at 10:18
  • in Animation 2, Is this correct way to make this animation ? Is there any better way ? – Kazuhiko Nakayama Aug 01 '17 at 10:20
  • If it's helped you, please mark post as Answer. You can create a few rectangles and create DoubleAnimations for each. Then tune repeating for each rectangle. – Denis Kosov Aug 01 '17 at 10:28
  • 1
    Unfortunately, Answer is not enough for me.... with only repeating, To make this animation is not enough... I need a way to repeat from 2 second by 4 second with 5 second blend animation. and Is this Animation (2) good way to use rectangle ? with a programming, can we make better animation ? or should we copy lot of rectangle ?? and How to apply the "animation(2)" to background wall of UWP ? – Kazuhiko Nakayama Aug 01 '17 at 11:05