Fatal编程技术网
  • csharp/
  • C# 如何执行卡片翻转动画

C# 如何执行卡片翻转动画

c# xaml windows-phone-7 animation windows-phone-8

C# 如何执行卡片翻转动画,c#,xaml,windows-phone-7,animation,windows-phone-8,C#,Xaml,Windows Phone 7,Animation,Windows Phone 8,我想能够执行一个卡翻转动画从一个设备屏幕的一半到另一个当用户点击屏幕。我以前从未使用过动画，所以我不知道如何完成这一点。我引用了，但我不知道如何如此恰当地修改解决方案。我最终需要的是能够以这种方式翻阅整副牌 MainPage.xaml <phone:PhoneApplicationPage.Resources> <Storyboard x:Name="Storyboard1"> <PointAnimation Duration="0:0:2"

我想能够执行一个卡翻转动画从一个设备屏幕的一半到另一个当用户点击屏幕。我以前从未使用过动画，所以我不知道如何完成这一点。我引用了，但我不知道如何如此恰当地修改解决方案。我最终需要的是能够以这种方式翻阅整副牌

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>
太复杂了！VS和Expression Blend中有平面投影窗格。你只需要设置180度就可以了

样本：

<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>
国家：

<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>
这就是太复杂的方法了！VS和Expression Blend中有平面投影窗格。你只需要设置180度就可以了

样本：

<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>
国家：

<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>
就这样

翻成什么样子？完全360度翻转或只是将卡片的位置平滑地移动？从显示卡片背面到卡片正面180度，从页面的一半到另一半。例如，一个用户可以从一个正面朝下的整副牌开始，然后可以轻触屏幕52次，直到整个牌组翻转到屏幕的另一半，使卡片正面朝上。基本上就像一个人在现实生活中会从一副牌上取下一张牌（面朝下），然后将它面朝上放在牌的旁边？完全360度翻转或只是将卡片的位置平滑地移动？从显示卡片背面到卡片正面180度，从页面的一半到另一半。例如，一个用户可以从一个正面朝下的整副牌开始，然后可以轻触屏幕52次，直到整个牌组翻转到屏幕的另一半，使卡片正面朝上。基本上就像一个人在现实生活中会从一副牌上取下一张牌（面朝下），然后将它面朝上放在牌的旁边。