Flip Animation in Xaml Wpf - wpf

Question

I was trying to make Flip Animation in XAML in WPF but was not as I wanted and I am not able to find the required answer. Only thing I could make was Scale the Image(XAML code is below) but it was not looking like flip. Please tell me what is needed for Flip Animation.
<Rectangle x:Name="Image" Fill="DarkSeaGreen" RenderTransformOrigin="0.5,0.5" Height="150" Width="200" Canvas.Left="150" Canvas.Top="150">
<Rectangle.RenderTransform>
<ScaleTransform ScaleY="-1" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard x:Name="ImageFlip">
<DoubleAnimation From="-1" To="1" BeginTime="0:0:1" Duration="0:0:2" Storyboard.TargetName="Image" Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>

Answer 1

If you want it to look like it's flipping then you need to skew the object so what would be the furthest edge is narrower
Like this:
<Rectangle x:Name="Image" Fill="DarkSeaGreen"
RenderTransformOrigin="0.5,0.5" Height="150" Width="200">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform/>
</TransformGroup>
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard x:Name="ImageFlip">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<SplineDoubleKeyFrame KeyTime="00:00:00.0" Value="1" />
<SplineDoubleKeyFrame KeyTime="00:00:00.09" Value="0.3" />
<SplineDoubleKeyFrame KeyTime="00:00:00.12" Value="0.6" />
<SplineDoubleKeyFrame KeyTime="00:00:00.15" Value="0.8" />
<SplineDoubleKeyFrame KeyTime="00:00:00.18" Value="1" />
<SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrame KeyTime="00:00:00.0" Value="1" />
<SplineDoubleKeyFrame KeyTime="00:00:00.09" Value="0.9" />
<SplineDoubleKeyFrame KeyTime="00:00:00.18" Value="1" />
<SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
<SplineDoubleKeyFrame KeyTime="00:00:00.06" Value="-10" />
<SplineDoubleKeyFrame KeyTime="00:00:00.09" Value="-20" />
<SplineDoubleKeyFrame KeyTime="00:00:00.1" Value="20" />
<SplineDoubleKeyFrame KeyTime="00:00:00.18" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
You might find this interesting:
https://archive.codeplex.com/?p=flipcontrol

Answer 2

You need a scale transform for Y-axis running from 1 to -1. My WPF-fu is pretty outdated so I can't give you the exact transform XAML.

Answer 3

<UserControl x:Class="FlipControl.FlipControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<UserControl.Resources>
<Storyboard x:Key="StoryFlip">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(AxisAngleRotation3D.Angle)"
Storyboard.TargetName="rot">
<SplineDoubleKeyFrame KeyTime="00:00:01" KeySpline="0,0,0,1" Value="180"></SplineDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(AxisAngleRotation3D.Angle)"
Storyboard.TargetName="rot2">
<SplineDoubleKeyFrame KeyTime="00:00:01" KeySpline="0,0,0,1" Value="360"></SplineDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="StoryFlipBack">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(AxisAngleRotation3D.Angle)"
Storyboard.TargetName="rot">
<SplineDoubleKeyFrame KeyTime="00:00:01" KeySpline="0,0,0,1" Value="0"></SplineDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(AxisAngleRotation3D.Angle)"
Storyboard.TargetName="rot2">
<SplineDoubleKeyFrame KeyTime="00:00:01" KeySpline="0,0,0,1" Value="180"></SplineDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<Viewport3D>
<Viewport3D.Camera>
<PerspectiveCamera Position="0, 0, 4"/>
</Viewport3D.Camera>
<Viewport2DVisual3D x:Name="Side1">
<!-- Rotation definieren -->
<Viewport2DVisual3D.Transform>
<RotateTransform3D>
<RotateTransform3D.Rotation>
<AxisAngleRotation3D x:Name="rot" Angle="0" Axis="1, 0, 0" />
</RotateTransform3D.Rotation>
</RotateTransform3D>
</Viewport2DVisual3D.Transform>
<!-- Geometry und Material für das Viewport2DVisual3D -->
<Viewport2DVisual3D.Geometry>
<MeshGeometry3D Positions="-1,1,0 -1,-1,0 1,-1,0 1,1,0"
TextureCoordinates="0,0 0,1 1,1 1,0"
TriangleIndices="0 1 2 0 2 3" />
</Viewport2DVisual3D.Geometry>
<Viewport2DVisual3D.Material>
<DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True" Brush="White"/>
</Viewport2DVisual3D.Material>
</Viewport2DVisual3D>
<Viewport2DVisual3D x:Name="Side2">
<!-- Rotation definieren -->
<Viewport2DVisual3D.Transform>
<RotateTransform3D>
<RotateTransform3D.Rotation>
<AxisAngleRotation3D x:Name="rot2" Angle="180" Axis="1, 0, 0" />
</RotateTransform3D.Rotation>
</RotateTransform3D>
</Viewport2DVisual3D.Transform>
<!-- Geometry und Material für das Viewport2DVisual3D -->
<Viewport2DVisual3D.Geometry>
<MeshGeometry3D Positions="-1,1,0 -1,-1,0 1,-1,0 1,1,0"
TextureCoordinates="0,0 0,1 1,1 1,0"
TriangleIndices="0 1 2 0 2 3" />
</Viewport2DVisual3D.Geometry>
<Viewport2DVisual3D.Material>
<DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True" Brush="White"/>
</Viewport2DVisual3D.Material>
<!-- Steuerelemente in 3D-Look -->
</Viewport2DVisual3D>
<!-- Licht -->
<ModelVisual3D>
<ModelVisual3D.Content>
<AmbientLight Color="White" />
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D>
</UserControl>
Add properties
public Visual FrontSide
{
get
{
return Side1.Visual;
}
set
{
UIElement Elem;
Storyboard Animation;
Side1.Visual = value;
Elem = Side1.Visual as UIElement;
if (Elem != null)
{
Elem.MouseEnter += (sender, e) =>
{
Animation = this.Resources["StoryFlip"] as Storyboard;
if (Animation != null)
{
Animation.Begin();
}
};
}
}
}
public Visual BackSide
{
get
{
return Side2.Visual;
}
set
{
UIElement Elem;
Storyboard Animation;
Side2.Visual = value;
Elem = Side2.Visual as UIElement;
if (Elem != null)
{
Elem.MouseLeave += (sender, e) =>
{
Animation = this.Resources["StoryFlipBack"] as Storyboard;
if (Animation != null)
{
Animation.Begin();
}
};
}
}
}
add front ad flip side
Mario Meir-Huber</TextBlock>
You can do a lot of</TextBlock>
Things with this Control!</TextBlock>-->
<flip:FlipControl.BackSide>
<StackPanel>
<Border BorderThickness="2" BorderBrush="Red">
<Button Height="20" Width="40"></Button>
</Border>
<!--<TextBlock>You want to send me an E-Mail?</TextBlock>
<TextBox Height="80" AcceptsReturn="True"></TextBox>
<Button>Just do it!</Button>
<TextBlock>mario#meirhuber.de</TextBlock>-->
</StackPanel>
</flip:FlipControl.BackSide>
</flip:FlipControl>
</Border>
<Border Width="150" Height="150">
<flip:FlipControl MouseEnter="FlipControl_MouseEnter" MouseLeave="FlipControl_MouseLeave" Name="FlipMe1">
<flip:FlipControl.FrontSide>
<StackPanel Height="20" Width="40">
<Border BorderThickness="2" BorderBrush="Green">
<Button Height="20" Width="40"></Button>
</Border>
<!--<TextBlock FontSize="16" Foreground="Blue">Mario Meir-Huber</TextBlock>
<Line X1="0" X2="130" StrokeThickness="2" Stroke="Black" />
<TextBlock FontSize="6">You can do a lot of</TextBlock>
<TextBlock FontSize="6">Things with this Control!</TextBlock>-->
</StackPanel>
</flip:FlipControl.FrontSide>
<flip:FlipControl.BackSide>
<StackPanel>
<Border BorderThickness="2" BorderBrush="Red">
<Button Height="20" Width="40"></Button>
</Border>
<!--<TextBlock>You want to send me an E-Mail?</TextBlock>
<TextBox Height="80" AcceptsReturn="True"></TextBox>
<Button>Just do it!</Button>
<TextBlock>mario#meirhuber.de</TextBlock>-->
</StackPanel>
</flip:FlipControl.BackSide>
</flip:FlipControl>
</Border>
<Border Width="150" Height="150">
<flip:FlipControl MouseEnter="FlipControl_MouseEnter" MouseLeave="FlipControl_MouseLeave" Name="FlipMe2">
<flip:FlipControl.FrontSide>
<StackPanel Height="20" Width="40">
<Border BorderThickness="2" BorderBrush="Green">
<Button Height="20" Width="40"></Button>
</Border>
<!--<TextBlock FontSize="16" Foreground="Blue">Mario Meir-Huber</TextBlock>
<Line X1="0" X2="130" StrokeThickness="2" Stroke="Black" />
<TextBlock FontSize="6">You can do a lot of</TextBlock>
<TextBlock FontSize="6">Things with this Control!</TextBlock>-->
</StackPanel>
</flip:FlipControl.FrontSide>
<flip:FlipControl.BackSide>
<StackPanel>
<Border BorderThickness="2" BorderBrush="Red">
<Button Height="20" Width="40"></Button>
</Border>
<!--<TextBlock>You want to send me an E-Mail?</TextBlock>
<TextBox Height="80" AcceptsReturn="True"></TextBox>
<Button>Just do it!</Button>
<TextBlock>mario#meirhuber.de</TextBlock>-->
</StackPanel>
</flip:FlipControl.BackSide>
</flip:FlipControl>
</Border>
</WrapPanel>