如何爲WPF中的圖像內容製作動畫？

我有一個非常基本的用戶控件與一個圖像的按鈕。我想通過將其更改爲不同的圖像來爲按鈕的圖像製作動畫。如何爲WPF中的圖像內容製作動畫？

<UserControl.Resources> 
    <Image x:Key="GlyphDefault" Source="pack://application:,,,/X;component/images/Glyphs_Default.png" Height="8" Width="8" /> 
    <Image x:Key="GlyphClicked" Source="pack://application:,,,/X;component/images/Glyphs_Click.png" Height="8" Width="8" /> 

</UserControl.Resources> 
    <Grid> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup Name="MouseStates"> 
      <VisualState Name="MouseHover" > 
       <Storyboard> 
        <ObjectAnimationUsingKeyFrames 
           Storyboard.TargetName="GlyphButton" 
           Storyboard.TargetProperty="Content" 
           Duration="0:0:1" > 
         <ObjectAnimationUsingKeyFrames.KeyFrames> 
          <DiscreteObjectKeyFrame KeyTime="0:0:1"> 
           <DiscreteObjectKeyFrame.Value="{StaticResource GlyphClicked}" /> 
          </DiscreteObjectKeyFrame> 
         </ObjectAnimationUsingKeyFrames.KeyFrames> 
        </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
      </VisualState> 
      <VisualState Name="MouseNotHover" > 
      </VisualState> 
     </VisualStateGroup> 

    </VisualStateManager.VisualStateGroups> 
    <Button x:Name="GlyphButton" 
      MouseLeave="GlyphButton_MouseLeave" 
      MouseEnter="GlyphButton_MouseEnter" 
      Content="{StaticResource GlyphDefault}" 
      /> 
</Grid>

不幸的是，當我運行這一點，將鼠標懸停在按鈕我得到「可凍結不能被凍結」的例外（鼠標事件處理程序改變狀態）。它似乎試圖凍結當前的圖像，但不能出於某種原因。

我試着做它不使用靜態資源（只是把圖片在線）過，但同樣的錯誤。奇怪的是，我可以找到關於在Content屬性上做動畫的文檔或博客。我不得不想象這將是一種常見的情況。任何想法，我做錯了什麼？

我非常感謝您對這個幫助！

來源

2010-05-06 Kang Su

這可能不是最好的（或最簡單的）的方式來進行此事。 Content屬性絕對不是WPF設計人員爲動畫設計的。下面是我會怎麼做這個：

將Button.Content能夠同時與置於其內的圖像的Grid（因此，彼此覆蓋）。
設置你想成爲最初可見的1.0和0.0的Image最初將被隱藏Image的Opacity。
使用DoubleAnimation而非ObjectAnimation動畫顯示Opacity - 你可以通過動畫一個的不透明度降低到0.0，同時使另一種可達1.0切換圖像。此外，根據持續時間，這會給你一個很好的衰落過渡。

來源

2010-05-06 19:48:54 Charlie

感謝查理。我已經考慮過了，但認爲它感到ha。。有一件事，我正在與WPF學習雖然是有些事情覺得有點hackish實際上是最佳實踐:-) – 2010-05-06 20:08:58

如何爲WPF中的圖像內容製作動畫？

回答

相關問題