CODEWITHSUNDEEP
wpfxaml
Stiffen
Stiffen

Reputation: 13

Flip Animation in Xaml Wpf

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>

Upvotes: 1

Views: 2916

Answers (3)

Suhas Bothe
Suhas Bothe

Reputation: 1

<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>[email protected]</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>[email protected]</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>[email protected]</TextBlock>-->
                </StackPanel>
            </flip:FlipControl.BackSide>

        </flip:FlipControl>
    </Border>
</WrapPanel>

Upvotes: 0

Andy
Andy

Reputation: 12276

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

Upvotes: 3

Tanveer Badar
Tanveer Badar

Reputation: 5523

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.

Upvotes: 0

Related Questions