橢圓圖WPF動畫

Question

我正在開發一個矩形區域的控件，並在發生觸發時在矩形區域繪製一個橢圓。此控件將能夠託管其他控件，如文本框，按鈕等，以便在觸發時圈出它們。我想要這個圓圈被畫成一個動畫，就像你用鋼筆在內部控制旋轉一樣。

我的問題是最好的辦法來完成這個。我一直在做一些研究，我可以使用WPF動畫，或者我可以使用GDI +來完成任務。我是WPF動畫的新手，所以這就是我問這個問題的原因。

Answer 1

WPF動畫使得這非常容易。這裏是基本技術：

1. 使用任何WPF功能，你喜歡（形狀，路徑，幾何形狀，畫筆，圖紙，照片等），創建橢圓形的外觀。這可以是一個簡單的橢圓或您的圖形設計師創建的一個奇特的圖形，或其中任何東西。

2. 應用由單橢圓虛線組成的不透明度蒙板和單個零長度虛線。由於短劃線長度爲零，整個自定義樣式的橢圓將不可見。

3. 動畫顯示短劃線的長度。當它變得更長時，橢圓的部分將變得不透明（因此它將被可見），直到它全部可見。默認情況下，您的橢圓將從0到1平滑地進行動畫製作，但您可以通過動畫參數控制和改變橢圓出現的速率，例如，您可以先開始慢速然後加速。

的解決方案

下面整體結構是基本控件模板結構：

<ControlTemplate TargetType="MyCustomControl"> 
    <Grid> 

    <Rectangle Fill="{StaticResource EllipseVisualAppearance}"> 
     <Rectangle.OpacityMask> 
     <VisualBrush> 
      <VisualBrush.Visual> 
      <Ellipse 
       x:Name="opacityEllipse" 
       StrokeDashArray="0 10" 
       Stroke="Black" StrokeThickness="0.5" 
       Width="1" Height"1" /> 
      </VisualBrush.Visual> 
     </VisualBrush> 
     </Rectangle.OpacityMask> 
    </Rectangle> 

    <ContentPresenter /> <!-- This presents the actual content --> 

    </Grid> 
</ControlTemplate> 

創建你的橢圓形的視覺

WPF是令人難以置信的豐富，在表達的視覺效果，所以當涉及到你的橢圓形時，天空是極限 看起來像。

使用任何WPF繪圖技術完全按照您希望顯示的方式繪製橢圓。根據您從橢圓你能做到多少「藝術風格」想要一個簡單的（和乏味）撫摸橢圓形或任何隨意幻想，如：

• 行程，大約有一個橢圓形，但沒有關閉，也許路徑燃燒了。
• 填寫一個由圖形設計師創建的路徑，開始就好像一個畫筆正在做它，也許隨着你四處走動並在一個blob中結束。
• 在Expression Design（或Adobe Illustrator）中創建矢量繪圖，將其轉換爲XAML繪圖。
• 創建的位圖圖像（注意相比矢量附圖，在一般的位圖具有保真度和性能的缺點）
• 使用表達混合

下面是一個最終簡單橢圓上繪製一個帆布多個形狀：

<VisualBrush x:Key="EllipseVisualAppearance"> 
    <VisualBrush.Visual> 
    <Ellipse StrokeThickness="0.1" Stroke="Blue" /> 
    </VisualBrush.Visual> 
</VisualBrush> 

動畫您橢圓

這裏也有一個巨大的變種取決於您希望動畫的外觀如何，您可以做到這一點。對於一個簡單的0到360的動畫的DoubleAnimation是可以簡單爲：

<DoubleAnimation 
    StoryBoard.TargetName="opacityEllipse" 
    StoryBoard.TargetProperty="StrokeDashArray[0]" 
    From="0" To="3.1416" Duration="0:0:0.5" /> 

常數3.1416是略高於PI，這是直徑1的圓的圓周上這意味着橢圓將是完全可見只是在動畫持續時間結束時。

另一種解決方案

StackOverflow的用戶Simon Fox已發佈包含鏈接到this article by Charles Petzold一個答案，但他的回答消失了幾分鐘後。我想他刪除了它。 Petzold代碼顯示了使用PathGeometry和ArcSegment進行此操作的更簡單的方法。如果你想要的只是一個簡單的橢圓而沒有多餘的元素，那麼在他的例子中對你的代碼進行建模可能是一條可行的路。