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

Question

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

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

这是我设计的UI。

左边是正常状态。两个传感器值都不错。
右边是警告状态。右传感器值太高，我想在 UI.

动画1

第一个动画是这样的。

我用 Blend-VS2017 制作了这个。但是今天是我第一天用UWP动画.....我的技术好担心

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

动画2

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

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

要制作这 2 个动画，我需要什么 class/function？还是应该使用 Blend 函数？

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

Answer 1

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

如果我错了，写你想要什么。如果你给你看你的故事板 XAML 就更好了。

Answer 2

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

背景动画

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

为条纹背景的平移设置动画

(The distance between two rectangles + The height of rectangle) x Math.Sqrt(2)

假设您的背景角度为 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 这个小东西。希望你会发现它有帮助。祝你好运！

样本结果

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

UWP , What skill Do I need to make the 2 animation?

xaml

animation

uwp

uwp-xaml

blend