2009
09.04
VN:F [1.9.10_1130]
Rating: 10.0/10 (1 vote cast)


I have seen this question come up a lot and did not come accross a simple answer. Perhaps i just wasnt looking hard enough ! But any how i thought i would share my experience. This was the very first thing i tried to do in silverlight and although i knew what i needed to do conceptually i struggled finding my way arround a little however i got there after a couple of hours. Hopefully this will get people going a lot quicker than i did !

If you want to see the code and run the sample you can download the solution from here!

So i started by creating a user control in blend which i encapsulated all my behavior into. I then created my mouse enter storyboard which i will not go into in too much detail the xaml is below:


<Storyboard x:Name="flipforward" Duration="00:00:03">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="userControl"
 Storyboard.TargetProperty="(UIElement.Projection)
.(PlaneProjection.RotationY)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="45"/>
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="25"/>
<SplineDoubleKeyFrame KeyTime="00:00:03" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>

I then used blend to create a copy of this and used the reverse command in blend to, you guessed it, reverse the storyboard ! Which looks like this :

<Storyboard x:Name="flipback" Duration="00:00:03">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="userControl"
Storyboard.TargetProperty="(UIElement.Projection)
.(PlaneProjection.RotationY)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:02" Value="25"/>
<SplineDoubleKeyFrame KeyTime="00:00:03" Value="45"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>

In My code behind of my usercontrol (of course you should try to avoid using code behind in production code !) i override the mouse enter and leave events with the following code :


protected override void OnMouseEnter(MouseEventArgs e)
{
   var flipstoryboard = Resources["flipforward"]
    as Storyboard;
   if (flipstoryboard != null) flipstoryboard.Begin();
}

protected override void OnMouseLeave(MouseEventArgs e)
{
  var forwardstoryboard = Resources["flipforward"]
    as Storyboard;
  var flipstoryboard = Resources["flipback"] as Storyboard;
  if (flipstoryboard != null &&
  forwardstoryboard != null)
  {
    var duration = flipstoryboard.Duration;
    flipstoryboard.Begin();
    flipstoryboard.Seek(
      duration.TimeSpan -
      forwardstoryboard.GetCurrentTime());
  }
}

The mouse enter event simply gets a reference to my enter storyboard and begins it. The mouse leave event needs to do a bit more since we want the reverse animation to be smooth. If we just called the Begin method the reverse animation would play from the start which would make it look jumpy if you moved the mouse away before the first storyboard completed. What we need to do is find out where the first storyboard currently is and fast forward the reverse animation to the same point.

I hope this was helpfull.

VN:F [1.9.10_1130]
Rating: 10.0/10 (1 vote cast)
VN:F [1.9.10_1130]
Rating: -3 (from 3 votes)
Silverlight : Creating a simple smooth reverse storyboard animation on mouse enter and leave, 10.0 out of 10 based on 1 rating

No Comment.

Add Your Comment