xaml - UWP , 制作 2 动画需要什么技能？

Question

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

我需要有关发展方向的建议。尤其是动画。

这是我设计的用户界面。

左边是正常状态。两个传感器值都很好。

右边是警告状态。右传感器值太高，我想在 UI 上添加 2 个动画。

动画 1

第一个动画是这样的。


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

使用 Blend，我是这样制作的.... 但是要继续这个动画，效果不好。因为这只是 5 秒动画。如果我只重复这一点，它就不美了。因为在重复点，用户发现动画被重复。



动画 2

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



我用混合做的，但重复一遍，我不知道..我不能复制很多矩形。

要制作这 2 个动画，我需要什么类/函数？还是应该使用混合功能？

在我开始开发之前，我需要建议我应该学习什么......

Answer 1

有几种方法可以创建这两个动画，但考虑到您刚刚接触 Blend，让我们保持解决方案尽可能简单 - 期望仅在 Blend 中完成 99% 的工作!

背景动画

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

(The distance between two rectangles + The height of rectangle) 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>

圆形传播动画

这个就更简单了。您所要做的就是复制您的动画，并将第二个动画的开始延迟 半秒 ，假设每个传播动画持续时间为一秒。

看看这个小 sample我刚刚创建。希望你会发现它有帮助。祝你好运!

样本结果