title: WPF Waving images animations
body: <p>I need to create at runtime a series of images on the screen, these images are all letters of the alphabet (PNG, 32x32), these images must look like they are "waving" up and down and rotating slightly too. (Almost like a Mexican wave)</p>
  
  <p>The issue is that the images are NOT all added one after another at start up, but rather when the user hits keys on the keyboard.</p>
  
  <p>For example, I might have the letter "A" (so A.png) on the screen, I would like to animate it so that it rotates from 0 to 20 after 1 second, and 20 to -20 after 2 seconds and back to 0 after 1 more second.</p>
  
  <p>This I can do no worries.</p>
  
  <p>But when the users hit another key on the keyboard ("L" for example), I want to add the "L" to the wave at the right offset and rotation to "A" so that it looks like a nice wave.</p>
  
  <p>At the moment I have this animation, (which I know is not right, and also its defined in XAML which I cannot really do, because this is a runtime based thing)</p>
  
  <pre><code>&lt;Storyboard x:Key="Storyboard1" AutoReverse="False" RepeatBehavior="Forever"&gt;
          &lt;DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"&gt;
              &lt;SplineDoubleKeyFrame KeyTime="00:00:01" Value="0" KeySpline="0,0,0.7,1"/&gt;
          &lt;/DoubleAnimationUsingKeyFrames&gt;
          &lt;DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"&gt;
              &lt;SplineDoubleKeyFrame KeyTime="00:00:01" Value="20" KeySpline="0,0,0.7,1"/&gt;
              &lt;SplineDoubleKeyFrame KeyTime="00:00:03" Value="-20" KeySpline="0.17,0,0.6,1"/&gt;
              &lt;SplineDoubleKeyFrame KeyTime="00:00:04" Value="0" KeySpline="0.16,0,1,1"/&gt;
          &lt;/DoubleAnimationUsingKeyFrames&gt;
          &lt;DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"&gt;
              &lt;SplineDoubleKeyFrame KeyTime="00:00:01" Value="-20" KeySpline="0,0,0.7,1"/&gt;
              &lt;SplineDoubleKeyFrame KeyTime="00:00:03" Value="20" KeySpline="0.17,0,0.6,1"/&gt;
              &lt;SplineDoubleKeyFrame KeyTime="00:00:04" Value="0" KeySpline="0.16,0,1,1"/&gt;
          &lt;/DoubleAnimationUsingKeyFrames&gt;
          &lt;DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image_Copy" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"&gt;
              &lt;SplineDoubleKeyFrame KeyTime="00:00:01.2600000" Value="20" KeySpline="0,0,0.7,1"/&gt;
              &lt;SplineDoubleKeyFrame KeyTime="00:00:03.2600000" Value="-20" KeySpline="0.17,0,0.6,1"/&gt;
              &lt;SplineDoubleKeyFrame KeyTime="00:00:04.2600000" Value="-5" KeySpline="0.16,0,1,1"/&gt;
          &lt;/DoubleAnimationUsingKeyFrames&gt;
          &lt;DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image_Copy" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"&gt;
              &lt;SplineDoubleKeyFrame KeyTime="00:00:01.2600000" Value="-20" KeySpline="0,0,0.7,1"/&gt;
              &lt;SplineDoubleKeyFrame KeyTime="00:00:03.2600000" Value="20" KeySpline="0.17,0,0.6,1"/&gt;
              &lt;SplineDoubleKeyFrame KeyTime="00:00:04.2600000" Value="5" KeySpline="0.16,0,1,1"/&gt;
          &lt;/DoubleAnimationUsingKeyFrames&gt;
          &lt;DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image_Copy1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"&gt;
              &lt;SplineDoubleKeyFrame KeyTime="00:00:01.5200000" Value="20" KeySpline="0,0,0.7,1"/&gt;
              &lt;SplineDoubleKeyFrame KeyTime="00:00:03.5200000" Value="-20" KeySpline="0.17,0,0.6,1"/&gt;
              &lt;SplineDoubleKeyFrame KeyTime="00:00:04.5200000" Value="-10" KeySpline="0.16,0,1,1"/&gt;
          &lt;/DoubleAnimationUsingKeyFrames&gt;
          &lt;DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image_Copy1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"&gt;
              &lt;SplineDoubleKeyFrame KeyTime="00:00:01.5200000" Value="-20" KeySpline="0,0,0.7,1"/&gt;
              &lt;SplineDoubleKeyFrame KeyTime="00:00:03.5200000" Value="20" KeySpline="0.17,0,0.6,1"/&gt;
              &lt;SplineDoubleKeyFrame KeyTime="00:00:04.5200000" Value="10" KeySpline="0.16,0,1,1"/&gt;
          &lt;/DoubleAnimationUsingKeyFrames&gt;
      &lt;/Storyboard&gt;
  </code></pre>
  
  <p>So any help here would be greatly appreciated!</p>
  
  <p>Cheers,
  Mark</p>