c# - 优化渐变框动画

Question

我正在尝试为我的 WPF 应用程序构建交互式背景。从下面的屏幕截图中可以看出，它由分散在整个背景中的各个矩形组成，我希望它们分别淡入和淡出。

我正在根据用户机器的虚拟屏幕尺寸计算所需的矩形数量(例如，我的是 3200x1200)。这样最大化和最小化窗口将显示更多背景。如前所述，对于我的解决方案，我将需要 3220 个矩形。

我现在实现这个的方式是将所有矩形添加到具有随机生成的 alpha 值的 Canvas 中。然后我延迟开始自动循环动画(见下文)。不幸的是，这导致我的应用程序极其缓慢(理所当然)。无论如何我可以实现这种效果并获得更好的性能吗？

<Storyboard x:Key="uiStoryboardTile" AutoReverse="True" RepeatBehavior="Forever">
    <ColorAnimationUsingKeyFrames
        Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
        <EasingColorKeyFrame KeyTime="0:0:2" Value="Transparent"/>
    </ColorAnimationUsingKeyFrames>
</Storyboard>

Answer 1

以下是我将如何提高性能:

1) 只创建在背景中可见的矩形。

2) 将每个 Rectangle 的 Fill 属性随机绑定(bind)到多个预定义颜色的 StaticResources 之一(10-20 应该可以解决问题)。

3) 创建一个为这些 StaticResources 设置动画的 Storyboard。

您会失去每个 Rectangle 的个性，但它应该在不杀死您的应用程序的情况下进行动画处理。

编辑 - 代码示例

例如，添加一些资源来制作动画(它们是矩形，因为您不能直接制作 SolidColorBrush 的动画):

<Window.Resources>
        <Rectangle x:Key="Color0" Fill="#FFFFCFFF" />
        <Rectangle x:Key="Color1" Fill="#FFFFC2C2" />
        <Rectangle x:Key="Color2" Fill="#FFFFEFD2" />
        ...
</Window.Resources>

你的 Storyboard 看起来像这样:

    <Storyboard x:Key="BackgroundAnimation" AutoReverse="True" RepeatBehavior="Forever">
        <ColorAnimationUsingKeyFrames Storyboard.Target="{StaticResource Color0}"
                                      Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                                      BeginTime="0:0:0:0"
                                      AutoReverse="True"
                                      Duration="00:00:03.00">
            <ColorKeyFrameCollection>
                <EasingColorKeyFrame Value="Transparent" />
            </ColorKeyFrameCollection>
        </ColorAnimationUsingKeyFrames>

     <!-- Add keyframes for each color, varying start and duration -->
      ...
</Storyboard>

在生成所有矩形的代码隐藏中，您需要绑定(bind)到资源。所以在循环的某个地方，你需要添加:

 // I'll leave the implementation of GetRandomColorId to you
 resourceId = GetRandomColorId(MAX_COLORS);

 Shape source = (Shape)this.FindResource("Color" + resourceId);
                    Binding binding = new Binding
                                          {
                                              Path = new PropertyPath("Fill"),
                                              Source = source
                                          };

                    rect.SetBinding(Shape.FillProperty, binding);

最后，您所要做的就是启动 BackgroundAnimation。