869

Silverlight Image Flip Animation

Question:

In my silverlight app, I have two images of equal dimension.

When the user clicks on the image I would like to animate the transition of one image to the other as if it were a piece of paper being flipped with the first image on the front and the other on the back.

I haven't worked with silverlight animation, yet so I don't know where to begin.

Answer1:

Basically you will need two Storybards to begin with. Each Storyboard will be using <a href="http://msdn.microsoft.com/en-us/library/system.windows.media.planeprojection%28v=vs.95%29.aspx" rel="nofollow">PlaneProjection</a> (in this case I am using RotationX which rotates the images around the x-axis of rotation) to do the flipping animation.

In the following example, I have created FlippingDown and FlippingUp two Storyboards. I attached a ControlStoryboardAction behavior to each of them, they will be triggered when MouseLeftButtonDown is fired.

You'll need to reference System.Windows.Interactivity and Microsoft.Expression.Interactions.

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" mc:Ignorable="d" x:Class="FilppingAnimation.MainPage" Width="640" Height="480"> <UserControl.Resources> <Storyboard x:Name="FlippingDown"> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="Front"> <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="90.0146"/> <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="180"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="Back"> <EasingDoubleKeyFrame KeyTime="0" Value="-180"/> <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-90"/> <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0"/> </DoubleAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Front"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Visibility>Visible</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> <DiscreteObjectKeyFrame KeyTime="0:0:0.3"> <DiscreteObjectKeyFrame.Value> <Visibility>Collapsed</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Back"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Visibility>Visible</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> <DiscreteObjectKeyFrame KeyTime="0:0:0.3"> <DiscreteObjectKeyFrame.Value> <Visibility>Visible</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> <Storyboard x:Name="FlippingUp"> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Front"> <DiscreteObjectKeyFrame KeyTime="0:0:0.3"> <DiscreteObjectKeyFrame.Value> <Visibility>Visible</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> <DoubleAnimation Duration="0:0:0.6" To="0" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="Front" d:IsOptimized="True"/> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="Back"> <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-90.0146"/> <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="-180"/> </DoubleAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Back"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Visibility>Visible</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> <DiscreteObjectKeyFrame KeyTime="0:0:0.3"> <DiscreteObjectKeyFrame.Value> <Visibility>Collapsed</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </UserControl.Resources> <Grid x:Name="LayoutRoot" Background="#FFCC9E9E"> <Image x:Name="Back" HorizontalAlignment="Center" VerticalAlignment="Center" Source="/311438.jpg" Height="226" Width="129"> <i:Interaction.Triggers> <i:EventTrigger EventName="MouseLeftButtonDown"> <ei:ControlStoryboardAction Storyboard="{StaticResource FlippingUp}"/> </i:EventTrigger> </i:Interaction.Triggers> <Image.Projection> <PlaneProjection/> </Image.Projection> </Image> <Image x:Name="Front" HorizontalAlignment="Center" VerticalAlignment="Center" Source="/318549.jpg" Height="226" Width="129" d:IsHidden="True"> <Image.Projection> <PlaneProjection/> </Image.Projection> <i:Interaction.Triggers> <i:EventTrigger EventName="MouseLeftButtonDown"> <ei:ControlStoryboardAction Storyboard="{StaticResource FlippingDown}"/> </i:EventTrigger> </i:Interaction.Triggers> </Image> </Grid> </UserControl>

Hope this helps. :)

Answer2:

You could search for info on Projection animations in Blend. This looks like what you need: <a href="http://www.silverlightbuzz.com/2009/10/14/using-the-3d-tools-to-animate-in-blend/" rel="nofollow">http://www.silverlightbuzz.com/2009/10/14/using-the-3d-tools-to-animate-in-blend/</a>

Recommend

  • Behaviors in UWP (Event trigger command error
  • Why is the brush preventing dc.js barChart toolTips to appear?
  • The name 'InitializeComponent' does not exist in the current context in WPF application
  • Lazy instantiating a UIDynamicAnimator with referenceView - Swift
  • Java threads query
  • How can I run my development action on my Google Home?
  • Interactive Design-Time User Control
  • Bind events to Item ViewModel
  • How to manage state in JAX-RS?
  • Xcode 7 - How to initiate interface recording for UI Testing?
  • Create a link to a web page that runs a Javascript function on the page
  • Compress a file with GZipStream while maintaining its meta-data
  • c++ regex_replace not doing intended substitution
  • powershell Get-Counter -ComputerName parameter on Windows 7
  • Xamarin MonoAndroid Azure mobile service InsertAsync
  • using System.Speech.Synthesis with Windows10 universal app (XAML-C#)
  • Private IP address in reserved subnet range
  • How To Customize ASP.NET Chart Databound To SqlDataSource
  • NUnit 3.0 TestCase const custom object arguments
  • Plotting line graph with factors in R
  • GAE: Way to get reference to an HttpSession from its ID?
  • Spring boot 2.0.0.M4 required a bean named 'entityManagerFactory' that could not be found
  • What is the purpose of TaskExecutor in spring?
  • Can you perform a UNION without a subquery in SQLAlchemy?
  • FFmpeg Conversion Error
  • QLineEdit password safety
  • Nant, Vault & Windows Integrated Authentication
  • C# - Serializing and deserializing static member
  • Bug in WPF DataGrid
  • Sony Xperia Z Tablet not found by adb
  • Validaiting emails with Net.Mail MailAddress
  • Javascript convert timezone issue
  • Why is the timeout on a windows udp receive socket always 500ms longer than set by SO_RCVTIMEO?
  • Timeout for blocking function call, i.e., how to stop waiting for user input after X seconds?
  • jQuery tmpl and DataLink beta
  • How can I estimate amount of memory left with calling System.gc()?
  • Windows forms listbox.selecteditem displaying “System.Data.DataRowView” instead of actual value
  • Proper folder structure for lots of source files
  • How do you join a server to an Active Directory (domain)?
  • How does Linux kernel interrupt the application?