UWP,制作2动画需要什么技巧？

Question

这是我的2个传感器监视器的下一个项目.我设计了一个简单的UI来显示传感器值.

我需要有关发展方向的建议.特别是动画.

这是我设计的UI.

• 左边是正常状态.两个传感器值都很好.
• 右边是警告状态.右传感器值太高,我想在UI上添加2个动画.

动画1

第一个动画是这样的.

我用Blend-VS2017做了这个.但今天是我用UWP动画的第一天..... 我真的很担心我的技能.

和Blend一样,我这样做....但要继续这个动画,它并不好.因为这只是5秒动画.如果我只重复这个,那就不美了.因为在重复点,用户发现动画重复.

动画2

它是背景流动的......红色+橙色.

我用混合制作它,但重复一遍,我不知道..我不能复制很多矩形.

要制作这个2动画,我需要什么类/功能？或者我应该使用混合功能？

在开始开发之前,我需要建议我应该学习的东西....

Answer 1

有几种方法可以创建这两个动画,但考虑到你只是弄脏了Blend,让我们尽可能简化解决方案 - 期望在Blend中完成99%的工作!

背景动画

要创建可重复的背景动画,您需要做的就是为条纹背景的翻译设置动画

(两个矩形之间的距离 + 矩形的高度) x Math.Sqrt(2)

假设你的背景角度是45度.

因此,如果您定义一个32xn边距为16 的矩形,则翻译将是(32 + 16 *2) * 1.414 = 90.5.然后你的背景动画将如下所示

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

圈传播动画

这个更简单.所有你需要做的就是复制你的动画,并将第二个动画的开始延迟半秒,因为每个传播动画的持续时间是一秒.

看看我刚刚创建的这个小样本.希望你会发现它很有帮助.祝好运!

样本结果