使用 C# 在 windows phone 8 中动态翻转动画

Question

我有一个要求涉及在 windows phone 8 中翻转多个网格单元格。

我正在使用如下网格布局。

-------------------------  
|  A  |  B  |  C  |  D  |
+-----+-----+-----+-----+  
|  A  |  B  |  C  |  D  |
+-----+-----+-----+-----+  
|  A  |  B  |  C  |  D  |
+-----+-----+-----+-----+ 
|  A  |  B  |  C  |  D  |
------------------------- 

当我点击第一行中的| A |时，它会水平翻转并出现| A' |。同样，我需要为上面存在的所有单元格添加翻转动画。有什么简单的方法可以使用 C# 来实现这一点。目前我正在使用以下方式来做到这一点。

<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="180"/>
        </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.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="180"/>
                    </DoubleAnimationUsingKeyFrames>

                </Storyboard>
            </VisualState>

            <VisualState x:Name="FlipCardBack" >
                <Storyboard >
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="aceSpades">
                        <EasingDoubleKeyFrame KeyTime="0" Value="180"/>
                        <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="cardBack">
                        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="90"/>
                        <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>



// adding one more visual state group for another rectangle cell.


        <VisualStateGroup x:Name="VisualStateGroup1">
        <VisualState x:Name="FlipCard1" >
            <Storyboard >
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="cardBack1">
                    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="90"/>
                </DoubleAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="aceSpades1">
                    <DiscreteObjectKeyFrame KeyTime="0:0:1">
                        <DiscreteObjectKeyFrame.Value>
                            <Visibility>Visible</Visibility>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="aceSpades1">
                    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="90"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:2" Value="180"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </VisualState>

        <VisualState x:Name="FlipCardBack1" >
            <Storyboard >
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="aceSpades1">
                    <EasingDoubleKeyFrame KeyTime="0" Value="180"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="90"/>
                </DoubleAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="aceSpades1">
                    <DiscreteObjectKeyFrame KeyTime="0:0:1">
                        <DiscreteObjectKeyFrame.Value>
                            <Visibility>Visible</Visibility>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="cardBack1">
                    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="90"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </VisualState>

        </VisualStateGroup>  
          <!--   <VisualStateGroup x:Name="VisualStateGroup2"> ......
             ....
             .....
             ...... (same repeats for other rectangle cell with different IDs)
        <   -->
    </VisualStateManager.VisualStateGroups>
    <Grid.RowDefinitions>

        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>

        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <!--TitlePanel contains the name of the application and page title-->


    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="0" Grid.Column="0"  Margin="12,0,12,0">
        <Rectangle x:Name="aceSpades"  Fill="Tomato" Stretch="Fill" Tap="cardBack_Tap" Visibility="Collapsed">
            <Rectangle.RenderTransform>
                <CompositeTransform/>
            </Rectangle.RenderTransform>
            <Rectangle.Projection>
                <PlaneProjection/>
            </Rectangle.Projection>
        </Rectangle>
        <Rectangle x:Name="cardBack" Fill="Tan" Stretch="Fill" Tap="cardBack_Tap">
            <Rectangle.Projection>
                <PlaneProjection/>
            </Rectangle.Projection>
            <Rectangle.RenderTransform>
                <CompositeTransform/>
            </Rectangle.RenderTransform>
        </Rectangle></Grid>


//adding another cell here


     <Grid x:Name="ContentPanel1" Grid.Row="0" Grid.Column="1"  Margin="12,0,12,0">
        <Rectangle x:Name="aceSpades1"  Fill="Aqua" Stretch="Fill" Tap="cardBack_Tap" Visibility="Collapsed">
            <Rectangle.RenderTransform>
                <CompositeTransform/>
            </Rectangle.RenderTransform>
            <Rectangle.Projection>
                <PlaneProjection/>
            </Rectangle.Projection>
        </Rectangle>
        <Rectangle x:Name="cardBack1"  Fill="Brown" Stretch="Fill" Tap="cardBack_Tap">
            <Rectangle.Projection>
                <PlaneProjection/>
            </Rectangle.Projection>
            <Rectangle.RenderTransform>
                <CompositeTransform/>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Grid>

  <!--  <Grid x:Name="ContentPane3" Grid.Row="1" Grid.Column="0"  Margin="12,0,12,0">
        ......
        ...... (untill how many cells we wish to have)
    </Grid>-->
</Grid>

但是如果我这样加起来，我会得到很大的线条，我不确定这是否是添加的方式。我想检查是否有任何方法可以使用 c# 代码添加相同的内容。

虽然我可以手动添加子网格视图，但不确定如何使用代码添加 Visualstatemanager 对象并将其附加到情节提要。

请帮忙。

Answer 1

我建议你学习Microsoft Reversy game sample。有很多很棒的 VisualState 示例，它们的工作方式与您想要的基本相同。我已经使用它们构建了我自己的翻转单元格的游戏；）此示例适用于 Windows 应用商店应用程序，但 VisualState 样式无需修改即可在 Windows Phone 中使用。