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++.

According to Microsoft, it's not possible to get the perfect frame rate in the Flipboard scenario without using DirectX and C++. — WiredPrairie, Apr 10 '14 at 11:01

score 3 · Answer 1 · answered Apr 13 '14 at 17:55

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>

How i can handle this through mouse move? Like dragging the page along with my mouse and so on? — Stephan Ronald, Apr 14 '14 at 14:51

score 1 · Accepted Answer · answered Apr 10 '14 at 17:30

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.

Page Flip Animation used in FlipBoard App for windows 8.1

2 Answers2