Question

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

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

这是我设计的用户界面。

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

动画1

第一个动画是这样的。

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

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

动画2

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

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

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

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

Answer 1

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

背景动画

要创建可重复的背景动画，您需要做的就是通过

为条纹背景的翻译设置动画。

（两个矩形之间的距离 + 矩形的高度） x Math.Sqrt(2) < / p>

假设您的背景角度为45度。

因此，如果您定义边距为16的32xn矩形，则翻译将为(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。希望你会发现它很有帮助。祝你好运！

示例结果

Answer 2

我是对的：你想重复这个动画吗？如果是：您可以在XAML中打开动画并设置DoubleAnimation的RepeatBehavior =“Forever”或您使用的任何内容。

如果我错了，写下你想要的东西。如果你向你展示你的故事板的XAML会更好。

UWP，制作2动画需要什么技能？

2 个答案: