優化淡入淡出框動畫

我正在嘗試爲我的WPF應用程序構建交互式背景。從下面的截圖中可以看出，它由分散在整個背景中的單個矩形組成，我希望它們逐漸淡入和淡出。優化淡入淡出框動畫

我正在計算基於用戶機器的虛擬屏幕大小（例如，我的是3200x1200）所需的矩形數量。這種方式最大化和最小化窗口將揭示更多的背景。如上所述，對於我的決議，我將需要3220個矩形。

現在我已經實現了這種方式，所有矩形都被添加到隨機生成的alpha值的畫布上。然後我延遲 - 開始一個自動循環動畫（見下文）。 Unfrtunatly這導致我的應用程序非常緩慢（正確如此）。無論如何，我可以實現這種類型的效果，並有更好的表現？

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

Fading Boxes

來源

2011-11-01 Dave

這裏就是我會做，以提高性能：

1）創建僅是在後臺可見的矩形。

2）將每個Rectangle的Fill屬性隨機綁定到預定義顏色的一個StaticResources（10-20應該可以做到這一點）。

3）創建一個動畫這些靜態資源的故事板。

你會失去每個矩形的個性，但它應該動畫而不會殺死你的應用程序。

編輯 - 代碼示例

例如，添加一些資源以動畫（他們是矩形，因爲你不能直接動畫化的SolidColorBrush）：

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

你的故事板看起來會像：

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

在你的代碼隱藏你產生所有的矩形，你需要綁定到資源。因此，在循環的某個地方，您需要添加：

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

來源

2011-11-01 16:03:26 SergioL

我想你仍然可以使用'ObjectAnimationUsingKeyFrames'爲'Brushes'製作動畫？ –

有幾個選項：

一個。不要使用這麼多的矩形。我知道這是顯而易見的，但嚴重的是，有三千件動畫是A LOT，即使是高性能的機器。

b。嘗試動畫不同矩形的不透明度，而不是填充筆的顏色。根據我的野驢猜測（WAG）理論，這可能會產生積極影響。

c。嘗試手動調整每個矩形的不透明度/顏色，而不是使用故事板來調整顏色。例如：

// Disclaimer: This code was written in the SO text editor. Might not be correct. 
foreach (MyRect rect in MyRectangles) 
{ 
    if (rect.FadingIn) 
    { 
    rect.Opacity += 0.1; 
    if (rect.Opacity >= 1) { rect.FadingIn = false; } 
    } 
    else 
    { 
    rect.Opacity -= 0.1; 
    if (rect.Opacity <= 0) { rect.FadingIn = true; } 
    } 
}

您會注意到一個特殊的類，它有一些額外的信息可滿足您的需求。

class MyRect 
{ 
    public Shape Rectangle; 
    public bool FadingIn; 

    public double Opacity 
    { 
    get { return Rectangle.Opacity; } 
    set { Rectangle.Opacity = value } 
    } 

    //... etc. 
}

當然還有一些更多的支持代碼，你將要投入的地方，如讓你的矩形給他們的主人，等等，但它聽起來就像你已經得到那麼遠你自己。

來源

2011-11-01 12:24:13

您是否嘗試過將它們分組？雖然你可能有1000多個矩形，也許你可以將它們分成組，並且只有10個左右的動畫同時運行。如果塊間隔正確，它應該仍然具有隨機動畫矩形的外觀。

這可以通過創建塊圖層來完成，其中每個圖層都是透明的，只有圖塊可見。將圖層堆疊在一起，併爲每個圖層的alpha生成動畫。

來源

2011-11-01 16:35:41

優化淡入淡出框動畫

回答

相關問題