1

I would like to be able to perform a card flip animation from one half of the device screen to the other when a user taps the screen. I have never used animations before so I am at a loss of how to accomplish this. I referenced http://blogs.msdn.com/b/kevinash/archive/2011/12/21/flipping-card-animation-for-windows-phone-7-using-expression-blend.aspx but I do not know how to modify the solution so appropriately. What I ultimately need is to be able to flip through an entire deck of cards in this manner.

MainPage.xaml

<phone:PhoneApplicationPage.Resources>
    <Storyboard x:Name="Storyboard1">
        <PointAnimation Duration="0:0:2" To="0.5,0.5" Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)" Storyboard.TargetName="cardBack" d:IsOptimized="True"/>
        <DoubleAnimation Duration="0:0:2" To="90" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="cardBack" d:IsOptimized="True"/>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="aceSpades">
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="90"/>
            <EasingDoubleKeyFrame KeyTime="0:0:4" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="aceSpades">
            <DiscreteObjectKeyFrame KeyTime="0:0:2">
                <DiscreteObjectKeyFrame.Value>
                    <Visibility>Visible</Visibility>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</phone:PhoneApplicationPage.Resources>

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="VisualStateGroup">
            <VisualState x:Name="FlipCard" >
                <Storyboard >
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="cardBack">
                        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="cardBack">
                        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="90"/>
                    </DoubleAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="aceSpades">
                        <DiscreteObjectKeyFrame KeyTime="0:0:1">
                            <DiscreteObjectKeyFrame.Value>
                                <Visibility>Visible</Visibility>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="aceSpades">
                        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="90"/>
                        <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationZ)" Storyboard.TargetName="cardBack">
                        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
        <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
        <TextBlock x:Name="PageTitle" Text="flipping card" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>

    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <Image x:Name="aceSpades" Margin="55,20,51,37" Source="AceSpades.png" Stretch="Fill" Visibility="Collapsed">
            <Image.RenderTransform>
                <CompositeTransform/>
            </Image.RenderTransform>
            <Image.Projection>
                <PlaneProjection/>
            </Image.Projection>
        </Image>
        <Image x:Name="cardBack" Margin="55,20,51,37" Source="CardBack.png" Stretch="Fill" Tap="cardBack_Tap">
            <Image.Projection>
                <PlaneProjection/>
            </Image.Projection>
            <Image.RenderTransform>
                <CompositeTransform/>
            </Image.RenderTransform>
        </Image></Grid>
</Grid>

MainPage.xaml.cs

public MainPage()
    {
        InitializeComponent();
    }

    private void cardBack_Tap(object sender, System.Windows.Input.GestureEventArgs e)
    {
        VisualStateManager.GoToState(this,"FlipCard",true);
    }
Matthew
  • 3,976
  • 15
  • 66
  • 130
  • flip as in what? A complete 360 degree flip or just smoothly shifting the position of card? – A.K. Dec 02 '13 at 06:55
  • 180 degrees from showing the back side of the card to the front side of the card, from one half of the page to the other. So for instance, a user would start with a full deck face down, and be able to tap the screen 52 times until the entire deck has been flipped to show the cards face up on the other half of the screen. Basically as if a person in real life would take a card off of a deck (that is face down) and place it face up beside the deck. – Matthew Dec 03 '13 at 03:27

1 Answers1

5

Too complicated methods! There is plane projection pane in VS and Expression Blend. You need just to set 180 degrees and thats it.

Sample:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <Rectangle x:Name="rectangle" Fill="#FF2525CD" HorizontalAlignment="Left" Height="221" Margin="207,182,0,0" Stroke="Black" VerticalAlignment="Top" Width="145">
            <Rectangle.Projection>
                <PlaneProjection/>
            </Rectangle.Projection>
        </Rectangle>

    </Grid>

States:

<VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="VisualStateGroup">
            <VisualStateGroup.Transitions>
                <VisualTransition GeneratedDuration="0:0:0.5"/>
            </VisualStateGroup.Transitions>
            <VisualState x:Name="NotFliped"/>
            <VisualState x:Name="Fliped">
                <Storyboard>
                    <DoubleAnimation Duration="0" To="-180" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

And thats it

Developer
  • 4,158
  • 5
  • 34
  • 66