Page Flip Animation used in FlipBoard App for windows 8.1

Question

I want to make page flip effect same as . Flip Board app for windows 8.1

Previously i tried to port page turn animation of Windows Phone to Winrt and i dropped the same because of not support to PathGeometry clipping.

Here is the details

I am trying for a solution that works on WinRT (XAML - C#). Because i don't have much knowledge in Direct X & C++.

Answer 1

You can use the PlaneProjection as Projection property and easily do the transforms you need. Play with the transform with blend and you should see how that works. One thing you need to do first is split your UI into two surfaces and you can use RenderTargetBitmap.Render() method to do that - render all you are transitioning from into one bitmap and what you are transitioning to into another and then appropriately combine the bitmaps.

Answer 2

Hope this helps : I have used eventrigger for Loaded event.

Using PlaneProjection : I am using RotationX which rotates the images around the x-axis of rotation.

  <Grid >
    <Grid.Triggers>
        <EventTrigger>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimationUsingKeyFrames  Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="Flip1">
                        <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="Flip2">
                        <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="Flip1">
                        <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="Flip2">
                        <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>
            </BeginStoryboard>
        </EventTrigger>
    </Grid.Triggers>
    <Rectangle x:Name="Flip1"  Fill="Aqua" Height="50" Width="50">
        <Rectangle.Projection>
            <PlaneProjection x:Name="PlaneProjection1"></PlaneProjection>
        </Rectangle.Projection>
    </Rectangle>
    <Rectangle x:Name="Flip2"  Fill="Aqua" Height="50" Width="50">
        <Rectangle.Projection>
            <PlaneProjection x:Name="PlaneProjection2"></PlaneProjection>
        </Rectangle.Projection>
    </Rectangle>
</Grid>

Using ScaleTransform : Changing horizontal scale from 1 to -1 has the same rotating effect and you can animate ScaleX property to get rotating effect. You should also change it's Visibility from Visible to Hidden and vice versa. To make image disappearing after rotating 90 degrees.

   <Rectangle x:Name="Flip3" Fill="Red" Height="50" RenderTransformOrigin="0.5,.5"  Width="50">
        <Rectangle.RenderTransform>
            <ScaleTransform x:Name="st" ScaleX="1"  ScaleY="0.1"></ScaleTransform>
        </Rectangle.RenderTransform>
        <Rectangle.Triggers>
            <EventTrigger>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation  Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" Storyboard.TargetName="Flip3" From="1" To="-1" Duration="0:0:0.5">
                            <DoubleAnimation.EasingFunction>
                                <ExponentialEase EasingMode="EaseOut"></ExponentialEase>
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Rectangle.Triggers>
    </Rectangle>