Professional, Software

User logic between steps in animation

For the ImageView  control, to get the flip effect, I needed to do following…

  1. Rotate the image 90 degrees.
  2. Swap the image with new image
  3. Rotate the image again 90%

Creating Flip Animation is pretty easy…

<Storyboard x:Name="flip"> 
  <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="imageDetail" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"> 
      <SplineDoubleKeyFrame KeyTime="00:00:00" Value="-1"/> 
    <SplineDoubleKeyFrame KeyTime="00:00:00.2500000" Value="0"/> 
    <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1"/> 
  </DoubleAnimationUsingKeyFrames> 
</Storyboard>

But the problem is I need to get some event after step 1 so that I can change the source uri for the image element. Storyboard, only gives events after it is completed. So the two ways I could see this working was…

  1. Create two storyboards. First one does step 1 and second one does step2. On first Storyboard completed event, I swap images
  2. Create two storyboards. First one does the whole animation, Step1 and Step3. Second one does not do anything but it is half as long as the first one. In Second storyboard’s completed event, I swap images.
<Storyboard x:Name="flip"> 
  <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="imageDetail" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"> 
      <SplineDoubleKeyFrame KeyTime="00:00:00" Value="-1"/> 
    <SplineDoubleKeyFrame KeyTime="00:00:00.2500000" Value="0"/> 
    <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1"/> 
  </DoubleAnimationUsingKeyFrames> 
</Storyboard> 
<Storyboard x:Name="fakeFlip"> 
  <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="txtDetail" Storyboard.TargetProperty="(UIElement.Opacity)"> 
    <SplineDoubleKeyFrame KeyTime="00:00:00.2500000" Value="0"/> 
  </DoubleAnimationUsingKeyFrames> 
</Storyboard>

void fakeFlip_Completed(object sender, EventArgs e) 
{ 
    imageDetail.Source = _source; 
}

I went with 2 because I had thought of that one first. Ideally what I would love to see is KeyFrameCompleted event so that I can just create one storyboard. Have one keyframe half way through and use that KeyFrameCompleted event to swap the image source uri.

Advertisements
Standard

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s