Perform Flip Animation Entirely Through WPF Code

Question

I am trying to add flip animation to a user control that I created. User control is simple, it has a 87x87 front and rear image and some properties. Suppose I imagine tiles in a game I'm working on for fun. I am trying to animate the click effect of a user who selects tiles from a deck. I feel that I need to do this using code instead of xaml for two reasons: 1. After the tile is rotated, another transformation takes place to rotate the tile (it currently works) 2. After the tile is flipped, I want to detach the event.

The problem I get is only the last animation run after the method exits. I think I need a storyboard, but all the examples I looked at confused me in two ways:

How to change the image in the middle of the story, and what should I install targetProperty? I worked on these two blogs.

http://www.codeguru.com/csharp/csharp/cs_misc/userinterface/article.php/c12221 http://blogs.msdn.com/tess/archive/2009/03/16/silverlight-wpf-flipimage-animation .aspx

public void FlipFront() { DoubleAnimation flipfront = new DoubleAnimation(0, 90, new Duration(new TimeSpan(0, 0, 1))); SkewTransform skew = new SkewTransform(); this.RenderTransform = skew; skew.BeginAnimation(SkewTransform.AngleYProperty, flipfront); } public void FlipBack() { ImageSourceConverter source = new ImageSourceConverter(); this.ImageFace.Source = new BitmapImage(new Uri("Back.jpg", UriKind.Relative)); DoubleAnimation flipfront = new DoubleAnimation(90, 0, new Duration(new TimeSpan(0, 0, 1))); SkewTransform skew = new SkewTransform(); this.RenderTransform = skew; skew.BeginAnimation(SkewTransform.AngleYProperty, flipfront); } public void Flip() { FlipFront(); FlipBack(); } 

I broke flip into two separate methods, because although this will help fix the problem I'm experiencing.

Answer 1

Wow, this has not been updated for a long time ... just in case someone tracks this:

The problem is that you do not wait for the flip front animation to complete before you start to lean back - now, since you basically compress the Y-angle animation right away to 90 degrees, so it doesn't seem to shoot properly way.

There are many ways you can get around this: the first thing that comes to mind is that DoubleAnimation has a CreateClock method on them that will return an AnimationClock object to you. This object has a Completed event that will tell you when this animation will be completed. Attach a handler (remember that you will want to detach it so that you do not leak into the memory), and call the "start dumping back" method. I threw something very inefficient together, but it will show the principle:

 public AnimationClock StartFlipFrontAnimation() { this.ImageFace.Source = _frontFace; DoubleAnimation flipfront = new DoubleAnimation(0, 90, new Duration(new TimeSpan(0, 0, 3))); SkewTransform skew = new SkewTransform(); this.RenderTransform = skew; skew.BeginAnimation(SkewTransform.AngleYProperty, flipfront); return flipfront.CreateClock(); } public AnimationClock StartFlipBackAnimation() { this.ImageFace.Source = _backFace; DoubleAnimation flipfront = new DoubleAnimation(90, 0, new Duration(new TimeSpan(0, 0, 3))); SkewTransform skew = new SkewTransform(); this.RenderTransform = skew; skew.BeginAnimation(SkewTransform.AngleYProperty, flipfront); return flipfront.CreateClock(); } public void BeginFlip() { var frontClk = StartFlipFrontAnimation(); frontClk.Completed += FrontFlipDone; } private void FrontFlipDone(object sender, EventArgs args) { var clk = sender as AnimationClock; if(clk != null) { clk.Completed -= FrontFlipDone; } var backClk = StartFlipBackAnimation(); }