如何执行卡片翻转动画 [英] How to Perform a Card Flip Animation

查看：146
本文介绍了如何执行卡片翻转动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我希望能够从设备屏幕的一半进行卡翻转动画到另一个当用户点击屏幕。我从来没有使用动画之前，让我在如何做到这一点的损失。我引用<一个href=\"http://blogs.msdn.com/b/kevinash/archive/2011/12/21/flipping-card-animation-for-windows-phone-7-using-ex$p$pssion-blend.aspx\" rel=\"nofollow\">http://blogs.msdn.com/b/kevinash/archive/2011/12/21/flipping-card-animation-for-windows-phone-7-using-ex$p$pssion-blend.aspx但我不知道如何让适当修改的解决方案。我最终需要的是能够通过卡整个甲板以这种方式翻转。

MainPage.xaml中

 ＆LT;电话：PhoneApplicationPage.Resources＆GT;
    ＆LT;情节提要X：NAME =Storyboard1＆GT;
        ＆LT; PointAnimation持续时间=0：0：2=0.5,0.5Storyboard.TargetProperty =（UIElement.RenderTransformOrigin）Storyboard.TargetName =cardBackD​​：IsOptimized =真/＆GT;
        ＆LT; D​​oubleAnimation是持续时间=0：0：2=90Storyboard.TargetProperty =。（UIElement.Projection）（PlaneProjection.RotationY）Storyboard.TargetName =cardBackD​​：IsOptimized =真/＆GT ;
        ＆LT; D​​oubleAnimationUsingKeyFrames Storyboard.TargetProperty =。（UIElement.Projection）（PlaneProjection.RotationY）Storyboard.TargetName =aceSpades＆GT;
            ＆LT; EasingDoubleKeyFrame KeyTime =0：0：2VALUE =90/＆GT;
            ＆所述; EasingDoubleKeyFrame KeyTime =0：0：4值=0/＆GT;
        ＆LT; / DoubleAnimationUsingKeyFrames＆GT;
        ＆LT; ObjectAnimationUsingKeyFrames Storyboard.TargetProperty =（UIElement.Visibility）Storyboard.TargetName =aceSpades＆GT;
            ＆所述; DiscreteObjectKeyFrame KeyTime =0：0：2＆GT;
                ＆LT; D​​iscreteObjectKeyFrame.Value＆GT;
                    ＆LT;能见度和GT;可见的LT; /能见度和GT;
                ＆LT; /DiscreteObjectKeyFrame.Value>
            ＆LT; / DiscreteObjectKeyFrame＆GT;
        ＆LT; / ObjectAnimationUsingKeyFrames＆GT;
    ＆LT; /故事板＆GT;
＆LT; /电话：PhoneApplicationPage.Resources＆GT;＆LT;！ -  LayoutRoot是所有页面内容放在根格 - ＆GT;
＆LT;电网X：NAME =LayoutRoot背景=透明＆GT;
    ＆LT; VisualStateManager.VisualStateGroups＆GT;
        ＆LT; VisualStateGroup X：NAME =VisualStateGroup＆GT;
            ＆LT;的VisualState X：NAME =活页片＆GT;
                ＆LT;情节提要＆GT;
                    ＆LT; D​​oubleAnimationUsingKeyFrames Storyboard.TargetProperty =。（UIElement.Projection）（PlaneProjection.RotationX）Storyboard.TargetName =cardBack＆GT;
                        ＆所述; EasingDoubleKeyFrame KeyTime =0值=0/＆GT;
                        ＆所述; EasingDoubleKeyFrame KeyTime =0：0：1值=0/＆GT;
                    ＆LT; / DoubleAnimationUsingKeyFrames＆GT;
                    ＆LT; D​​oubleAnimationUsingKeyFrames Storyboard.TargetProperty =。（UIElement.Projection）（PlaneProjection.RotationY）Storyboard.TargetName =cardBack＆GT;
                        ＆所述; EasingDoubleKeyFrame KeyTime =0值=0/＆GT;
                        ＆LT; EasingDoubleKeyFrame KeyTime =0：0：1VALUE =90/＆GT;
                    ＆LT; / DoubleAnimationUsingKeyFrames＆GT;
                    ＆LT; ObjectAnimationUsingKeyFrames Storyboard.TargetProperty =（UIElement.Visibility）Storyboard.TargetName =aceSpades＆GT;
                        ＆所述; DiscreteObjectKeyFrame KeyTime =0：0：1＆GT;
                            ＆LT; D​​iscreteObjectKeyFrame.Value＆GT;
                                ＆LT;能见度和GT;可见的LT; /能见度和GT;
                            ＆LT; /DiscreteObjectKeyFrame.Value>
                        ＆LT; / DiscreteObjectKeyFrame＆GT;
                    ＆LT; / ObjectAnimationUsingKeyFrames＆GT;
                    ＆LT; D​​oubleAnimationUsingKeyFrames Storyboard.TargetProperty =。（UIElement.Projection）（PlaneProjection.RotationY）Storyboard.TargetName =aceSpades＆GT;
                        ＆LT; EasingDoubleKeyFrame KeyTime =0：0：1VALUE =90/＆GT;
                        ＆所述; EasingDoubleKeyFrame KeyTime =0：0：2值=0/＆GT;
                    ＆LT; / DoubleAnimationUsingKeyFrames＆GT;
                    ＆LT; D​​oubleAnimationUsingKeyFrames Storyboard.TargetProperty =。（UIElement.Projection）（PlaneProjection.RotationZ）Storyboard.TargetName =cardBack＆GT;
                        ＆所述; EasingDoubleKeyFrame KeyTime =0值=0/＆GT;
                        ＆所述; EasingDoubleKeyFrame KeyTime =0：0：1值=0/＆GT;
                    ＆LT; / DoubleAnimationUsingKeyFrames＆GT;
                ＆LT; /故事板＆GT;
            ＆LT; /＆的VisualState GT;
        ＆LT; / VisualStateGroup＆GT;
    ＆LT; /VisualStateManager.VisualStateGroups>
    ＆LT; Grid.RowDefinitions＆GT;
        ＆LT; RowDefinition高度=自动/＆GT;
        ＆LT; RowDefinition高度=*/＆GT;
    ＆LT; /Grid.RowDefinitions>    ＆LT;！ -  TitlePanel包含应用程序和页面标题的名字 - ＆GT;
    ＆LT; StackPanel的X：名称=TitlePanelGrid.Row =0利润=12,17,0,28＆GT;
        ＆LT; TextBlock的X：名称=ApplicationTitle文本=我的申请风格={StaticResource的PhoneTextNormalStyle}/＆GT;
        ＆LT; TextBlock的X：名称=的PageTitle文本=翻牌保证金=9，-7,0,0风格={StaticResource的PhoneTextTitle1Style}/＆GT;
    ＆LT; / StackPanel的＆GT;    ＆LT;！ - 的ContentPanel  - 在这里放置其他内容 - ＆GT;
    ＆LT;电网X：名称=的ContentPanelGrid.Row =1保证金=12,0,12,0＆GT;
        ＆lt;图像X：NAME =aceSpades保证金=55,20,51,37来源=AceSpades.png拉伸=填充能见度=折叠＆GT;
            ＆LT; Image.RenderTransform＆GT;
                ＆LT; CompositeTransform /＆GT;
            ＆LT; /Image.RenderTransform>
            ＆LT; Image.Projection＆GT;
                ＆LT; PlaneProjection /＆GT;
            ＆LT; /Image.Projection>
        ＆LT; /图像＆GT;
        ＆lt;图像X：NAME =cardBack保证金=55,20,51,37来源=CardBack.png拉伸=填充点击=cardBack_Tap＆GT;
            ＆LT; Image.Projection＆GT;
                ＆LT; PlaneProjection /＆GT;
            ＆LT; /Image.Projection>
            ＆LT; Image.RenderTransform＆GT;
                ＆LT; CompositeTransform /＆GT;
            ＆LT; /Image.RenderTransform>
        ＆LT; /图像＆GT;＆LT; /网格和GT;
＆LT; /网格和GT;

MainPage.xaml.cs中

 公开的MainPage（）
    {
        的InitializeComponent（）;
    }    私人无效cardBack_Tap（对象发件人，System.Windows.Input.GestureEventArgs E）
    {
        VisualStateManager.GoToState（这一点，活页片，真正的）;
    }


解决方案

太复杂的方法！有一个在VS和Ex pression混合平面投影窗格。你只需要设置180度，这就是它。

示例：

 ＆LT;电网X：名称=的ContentPanelGrid.Row =1保证金=12,0,12,0＆GT;
        ＆LT;矩形X：NAME =矩形填充=＃FF2525CD的Horizo​​ntalAlignment =左HEIGHT =221保证金=207,182,0,0行程=黑VerticalAlignment =评出的WIDTH =145 ＆GT;
            ＆LT; Rectangle.Projection＆GT;
                ＆LT; PlaneProjection /＆GT;
            ＆LT; /Rectangle.Projection>
        ＆LT; /矩形＆GT;    ＆LT; /网格和GT;

美国：

 ＆LT; VisualStateManager.VisualStateGroups＆GT;
        ＆LT; VisualStateGroup X：NAME =VisualStateGroup＆GT;
            ＆LT; VisualStateGroup.Transitions＆GT;
                ＆所述; VisualTransition GeneratedDuration =0：0：0.5/＆GT;
            ＆LT; /VisualStateGroup.Transitions>
            ＆LT;的VisualState X：NAME =NotFliped/＆GT;
            ＆LT;的VisualState X：NAME =Fliped＆GT;
                ＆LT;情节提要＆GT;
                    ＆LT; D​​oubleAnimation是持续时间=0= -  180Storyboard.TargetProperty =（UIElement.Projection）（PlaneProjection.RotationY）。Storyboard.TargetName =矩形D：IsOptimized =真/＆GT;
                ＆LT; /故事板＆GT;
            ＆LT; /＆的VisualState GT;
        ＆LT; / VisualStateGroup＆GT;
    ＆LT; /VisualStateManager.VisualStateGroups>

和多数民众赞成它

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);
    }

解决方案

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

这篇关于如何执行卡片翻转动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆