WPF揮動圖像動畫

Question

我需要在運行時在屏幕上創建一系列圖像，這些圖像都是字母表（PNG，32x32）的字母，這些圖像必須看起來像它們「上下揮動」並旋轉也是。 （幾乎像墨西哥波）

問題是，在啓動時圖像並不是全部相繼添加，而是當用戶在鍵盤上擊鍵時。例如，我可能在屏幕上有字母「A」（所以A.png），我想動畫它，以便它在1秒後從0旋轉到20，並且在2之後從20旋轉到-20秒後，再在1秒後回到0。

這個我可以不用擔心。

但是，當用戶擊中鍵盤上的另一個鍵（例如「L」）時，我想將「L」添加到右側偏移處的波形並旋轉到「A」，以便它看起來像一個不錯的波。

目前，我有這樣的動畫，（我知道是不正確的，同時也是它在XAML，我真的不能做的定義，因爲這是一個基於運行時的事情）

<Storyboard x:Key="Storyboard1" AutoReverse="False" RepeatBehavior="Forever"> 
     <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"> 
      <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0" KeySpline="0,0,0.7,1"/> 
     </DoubleAnimationUsingKeyFrames> 
     <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"> 
      <SplineDoubleKeyFrame KeyTime="00:00:01" Value="20" KeySpline="0,0,0.7,1"/> 
      <SplineDoubleKeyFrame KeyTime="00:00:03" Value="-20" KeySpline="0.17,0,0.6,1"/> 
      <SplineDoubleKeyFrame KeyTime="00:00:04" Value="0" KeySpline="0.16,0,1,1"/> 
     </DoubleAnimationUsingKeyFrames> 
     <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"> 
      <SplineDoubleKeyFrame KeyTime="00:00:01" Value="-20" KeySpline="0,0,0.7,1"/> 
      <SplineDoubleKeyFrame KeyTime="00:00:03" Value="20" KeySpline="0.17,0,0.6,1"/> 
      <SplineDoubleKeyFrame KeyTime="00:00:04" Value="0" KeySpline="0.16,0,1,1"/> 
     </DoubleAnimationUsingKeyFrames> 
     <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image_Copy" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"> 
      <SplineDoubleKeyFrame KeyTime="00:00:01.2600000" Value="20" KeySpline="0,0,0.7,1"/> 
      <SplineDoubleKeyFrame KeyTime="00:00:03.2600000" Value="-20" KeySpline="0.17,0,0.6,1"/> 
      <SplineDoubleKeyFrame KeyTime="00:00:04.2600000" Value="-5" KeySpline="0.16,0,1,1"/> 
     </DoubleAnimationUsingKeyFrames> 
     <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image_Copy" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"> 
      <SplineDoubleKeyFrame KeyTime="00:00:01.2600000" Value="-20" KeySpline="0,0,0.7,1"/> 
      <SplineDoubleKeyFrame KeyTime="00:00:03.2600000" Value="20" KeySpline="0.17,0,0.6,1"/> 
      <SplineDoubleKeyFrame KeyTime="00:00:04.2600000" Value="5" KeySpline="0.16,0,1,1"/> 
     </DoubleAnimationUsingKeyFrames> 
     <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image_Copy1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"> 
      <SplineDoubleKeyFrame KeyTime="00:00:01.5200000" Value="20" KeySpline="0,0,0.7,1"/> 
      <SplineDoubleKeyFrame KeyTime="00:00:03.5200000" Value="-20" KeySpline="0.17,0,0.6,1"/> 
      <SplineDoubleKeyFrame KeyTime="00:00:04.5200000" Value="-10" KeySpline="0.16,0,1,1"/> 
     </DoubleAnimationUsingKeyFrames> 
     <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image_Copy1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"> 
      <SplineDoubleKeyFrame KeyTime="00:00:01.5200000" Value="-20" KeySpline="0,0,0.7,1"/> 
      <SplineDoubleKeyFrame KeyTime="00:00:03.5200000" Value="20" KeySpline="0.17,0,0.6,1"/> 
      <SplineDoubleKeyFrame KeyTime="00:00:04.5200000" Value="10" KeySpline="0.16,0,1,1"/> 
     </DoubleAnimationUsingKeyFrames> 
    </Storyboard> 

因此，任何幫助這裏將不勝感激！

乾杯， 馬克

Answer 1

你確實需要解決這個問題在C＃，而不是XAML。動畫是使用相同的命名類定義的。

您可以考慮的方法是放置一個StackPanel水平定位。當用戶鍵入一個字母，你需要採取幾個步驟：

• 添加Image包含新信StackPanel。
• 創建一個動畫序列，一個單一的Storyboard，將執行一個波浪序列。

創建動畫將通過StackPanel.Children每個控制循環的問題，創建基於它是什麼元素正確的偏移量，並把它添加到Storyboard。

添加新字母時，需要停止上一個動畫。將其保存到本地變量並適當地停止它。爲了順利過渡到下一個字母，您可以完成當前的「通過」，然後更改RepeatBehavior，以便它不再是「永遠」。完成後，開始合併新信的新故事板。

// ... Once you've added a new letter ... 
storyboard.RepeatBehavior = new RepeatBehavior(0); 
storyboard.Completed += storyboardCompleted; 

private void storyboardCompleted(object o, EventArgs e) 
{ 
    // Stop the storyboard, and start your new storyboard. 
}