WPF翻转动画 [英] WPF Flip Animation
本文介绍了WPF翻转动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图创造一个WPF控制，类似于卡，这将势必有两个面的数据。使用下面code，我可以得到它从FIRST NAME翻转姓氏，只是没有回来。一旦翻转，以姓氏和我点击它只是闪烁喜欢它的执行相同的动画，而不是运行相反。任何洞察到这一问题将大大AP preciated。
＆LT;用户控件X：类=WpfApplication2.TileControl
的xmlns =http://schemas.microsoft.com/winfx/2006/xaml/$p$psentation
的xmlns：X =http://schemas.microsoft.com/winfx/2006/xaml＆GT;＆LT; UserControl.Resources＆GT;
＆LT;情节提要X：键=FlipFirst＆GT;
＆LT; DoubleAnimationUsingKeyFrames Storyboard.TargetProperty =（UIElement.Opacity）Storyboard.TargetName =返回＆GT;
＆所述; EasingDoubleKeyFrame KeyTime =0值=0/＆GT;
＆所述; EasingDoubleKeyFrame KeyTime =0：0：0.2值=0/＆GT;
＆所述; EasingDoubleKeyFrame KeyTime =0：0：0.4值=1/＆GT;
＆LT; / DoubleAnimationUsingKeyFrames＆GT;
＆LT; DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=\"(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)\" Storyboard.TargetName =后退＆GT;
＆所述; EasingDoubleKeyFrame KeyTime =0值= - 1/＆GT;
＆所述; EasingDoubleKeyFrame KeyTime =0：0：0.2值=0/＆GT;
＆所述; EasingDoubleKeyFrame KeyTime =0：0：0.4值=1/＆GT;
＆LT; / DoubleAnimationUsingKeyFrames＆GT;
＆LT; DoubleAnimationUsingKeyFrames Storyboard.TargetProperty =（UIElement.Opacity）Storyboard.TargetName =前＆GT;
＆所述; EasingDoubleKeyFrame KeyTime =0：0：0.2值=0/＆GT;
＆LT; / DoubleAnimationUsingKeyFrames＆GT;
＆LT; DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=\"(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)\" Storyboard.TargetName =前＆GT;
＆所述; EasingDoubleKeyFrame KeyTime =0：0：0.2值=0/＆GT;
＆所述; EasingDoubleKeyFrame KeyTime =0：0：0.4值= - 1/＆GT;
＆LT; / DoubleAnimationUsingKeyFrames＆GT;
＆LT; /故事板＆GT;
＆LT;情节提要X：键=FlipLast＆GT;
＆LT; DoubleAnimationUsingKeyFrames Storyboard.TargetProperty =（UIElement.Opacity）Storyboard.TargetName =返回＆GT;
＆所述; SplineDoubleKeyFrame KeyTime =0值=1/＆GT;
＆所述; SplineDoubleKeyFrame KeyTime =0：0：0.2值=0/＆GT;
＆所述; SplineDoubleKeyFrame KeyTime =0：0：0.4值=0/＆GT;
＆LT; / DoubleAnimationUsingKeyFrames＆GT;
＆LT; DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=\"(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)\" Storyboard.TargetName =后退＆GT;
＆所述; SplineDoubleKeyFrame KeyTime =0值=1/＆GT;
＆所述; SplineDoubleKeyFrame KeyTime =0：0：0.2值=0/＆GT;
＆所述; SplineDoubleKeyFrame KeyTime =0：0：0.4值= - 1/＆GT;
＆LT; / DoubleAnimationUsingKeyFrames＆GT;
＆LT; DoubleAnimationUsingKeyFrames Storyboard.TargetProperty =（UIElement.Opacity）Storyboard.TargetName =前＆GT;
＆所述; SplineDoubleKeyFrame KeyTime =0：0：0.2值=0/＆GT;
＆所述; SplineDoubleKeyFrame KeyTime =0：0：0.4值=1/＆GT;
＆LT; / DoubleAnimationUsingKeyFrames＆GT;
＆LT; DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=\"(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)\" Storyboard.TargetName =前＆GT;
＆所述; SplineDoubleKeyFrame KeyTime =0：0：0.2值=0/＆GT;
＆所述; SplineDoubleKeyFrame KeyTime =0：0：0.4值=1/＆GT;
＆LT; / DoubleAnimationUsingKeyFrames＆GT;
＆LT; /故事板＆GT;
＆LT; /UserControl.Resources>
＆LT; UserControl.Triggers＆GT;
＆LT;的EventTrigger RoutedEvent =UIElement.MouseLeftButtonDownSOURCENAME =前＆GT;
＆LT; BeginStoryboard X：NAME =Storyboard_Begin故事板={StaticResource的FlipFirst}/＆GT;
＆LT; /＆的EventTrigger GT;
＆LT;的EventTrigger RoutedEvent =UIElement.MouseLeftButtonDownSOURCENAME =返回＆GT;
＆LT; StopStoryboard BeginStoryboardName =Storyboard_Begin/＆GT;
＆LT; BeginStoryboard X：NAME =Storyboard_Reversed故事板={StaticResource的FlipLast}/＆GT;
＆LT; /＆的EventTrigger GT;
＆LT; /UserControl.Triggers>＆LT;电网X：NAME =LayoutRootWIDTH =280HEIGHT =680＆GT;
＆LT;电网X：NAME =后退的HorizontalAlignment =左HEIGHT =680VerticalAlignment =评出的WIDTH =280背景={DynamicResource {X：静态SystemColors.ActiveCaptionBrushKey}}RenderTransformOrigin =0.5， 0.5＆GT;
＆LT; Grid.RenderTransform＆GT;
＆LT;＆的TransformGroup GT;
＆LT; ScaleTransform /＆GT;
＆LT; SkewTransform /＆GT;
＆LT; RotateTransform /＆GT;
＆LT; TranslateTransform /＆GT;
＆LT; /＆的TransformGroup GT;
＆LT; /Grid.RenderTransform>
＆LT; TextBlock的X：名称=姓氏的HorizontalAlignment =中心TextWrapping =包装VerticalAlignment =中心保证金=0文本=姓氏WIDTH =100HEIGHT =100/＆GT;
＆LT; /网格和GT;
＆LT;电网X：NAME =接待的HorizontalAlignment =左HEIGHT =680VerticalAlignment =评出的WIDTH =280背景={DynamicResource {X：静态SystemColors.ActiveCaptionBrushKey}}RenderTransformOrigin =0.5， 0.5＆GT;
＆LT; Grid.RenderTransform＆GT;
＆LT;＆的TransformGroup GT;
＆LT; ScaleTransform /＆GT;
＆LT; SkewTransform /＆GT;
＆LT; RotateTransform /＆GT;
＆LT; TranslateTransform /＆GT;
＆LT; /＆的TransformGroup GT;
＆LT; /Grid.RenderTransform>
＆LT; TextBlock的X：名称=名字的HorizontalAlignment =中心TextWrapping =自动换行文本=名VerticalAlignment =中心WIDTH =100HEIGHT =100/＆GT;
＆LT; /网格和GT;
＆LT; /网格和GT;
＆LT; /用户控件＆GT;
解决方案
与code中的问题是，当动画运行一次，名为回电网变得对用户和电网命名为正面看到变得透明。但它毕竟是返回网格顶部和捕捉鼠标的全部命中。
因此，当用户再次单击鼠标左键，它是由前格栅没有回电网抓获。
为了解决这个问题，你需要IsHitTestVisible为假时，电网是透明的。
请参见下面的code。
＆LT;用户控件X：类=WpfApplication2.TileControl
的xmlns =http://schemas.microsoft.com/winfx/2006/xaml/$p$psentation
的xmlns：X =http://schemas.microsoft.com/winfx/2006/xaml＆GT; ＆LT; UserControl.Resources＆GT;
＆LT;情节提要X：键=FlipFirst＆GT;
＆LT; DoubleAnimationUsingKeyFrames Storyboard.TargetProperty =（UIElement.Opacity）Storyboard.TargetName =返回＆GT;
＆所述; EasingDoubleKeyFrame KeyTime =0值=0/＆GT;
＆所述; EasingDoubleKeyFrame KeyTime =0：0：0.2值=0/＆GT;
＆所述; EasingDoubleKeyFrame KeyTime =0：0：0.4值=1/＆GT;
＆LT; / DoubleAnimationUsingKeyFrames＆GT;
＆LT; DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=\"(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)\" Storyboard.TargetName =后退＆GT;
＆所述; EasingDoubleKeyFrame KeyTime =0值= - 1/＆GT;
＆所述; EasingDoubleKeyFrame KeyTime =0：0：0.2值=0/＆GT;
＆所述; EasingDoubleKeyFrame KeyTime =0：0：0.4值=1/＆GT;
＆LT; / DoubleAnimationUsingKeyFrames＆GT;
＆LT; DoubleAnimationUsingKeyFrames Storyboard.TargetProperty =（UIElement.Opacity）Storyboard.TargetName =前＆GT;
＆所述; EasingDoubleKeyFrame KeyTime =0：0：0.2值=0/＆GT;
＆LT; / DoubleAnimationUsingKeyFrames＆GT;
＆LT; DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=\"(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)\" Storyboard.TargetName =前＆GT;
＆所述; EasingDoubleKeyFrame KeyTime =0：0：0.2值=0/＆GT;
＆所述; EasingDoubleKeyFrame KeyTime =0：0：0.4值= - 1/＆GT;
＆LT; / DoubleAnimationUsingKeyFrames＆GT;
＆LT; /故事板＆GT;
＆LT;情节提要X：键=FlipLast＆GT;
＆LT; DoubleAnimationUsingKeyFrames Storyboard.TargetProperty =（UIElement.Opacity）Storyboard.TargetName =返回＆GT;
＆所述; SplineDoubleKeyFrame KeyTime =0值=1/＆GT;
＆所述; SplineDoubleKeyFrame KeyTime =0：0：0.2值=0/＆GT;
＆所述; SplineDoubleKeyFrame KeyTime =0：0：0.4值=0/＆GT;
＆LT; / DoubleAnimationUsingKeyFrames＆GT;
＆LT; DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=\"(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)\" Storyboard.TargetName =后退＆GT;
＆所述; SplineDoubleKeyFrame KeyTime =0值=1/＆GT;
＆所述; SplineDoubleKeyFrame KeyTime =0：0：0.2值=0/＆GT;
＆所述; SplineDoubleKeyFrame KeyTime =0：0：0.4值= - 1/＆GT;
＆LT; / DoubleAnimationUsingKeyFrames＆GT;
＆LT; DoubleAnimationUsingKeyFrames Storyboard.TargetProperty =（UIElement.Opacity）Storyboard.TargetName =前＆GT;
＆所述; SplineDoubleKeyFrame KeyTime =0：0：0.2值=0/＆GT;
＆所述; SplineDoubleKeyFrame KeyTime =0：0：0.4值=1/＆GT;
＆LT; / DoubleAnimationUsingKeyFrames＆GT;
＆LT; DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=\"(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)\" Storyboard.TargetName =前＆GT;
＆所述; SplineDoubleKeyFrame KeyTime =0：0：0.2值=0/＆GT;
＆所述; SplineDoubleKeyFrame KeyTime =0：0：0.4值=1/＆GT;
＆LT; / DoubleAnimationUsingKeyFrames＆GT;
＆LT; /故事板＆GT;
＆LT; /UserControl.Resources>
＆LT; UserControl.Triggers＆GT;
＆LT;的EventTrigger RoutedEvent =UIElement.MouseLeftButtonDownSOURCENAME =前＆GT;
＆LT; BeginStoryboard X：NAME =Storyboard_Begin故事板={StaticResource的FlipFirst}/＆GT;
＆LT; /＆的EventTrigger GT;
＆LT;的EventTrigger RoutedEvent =UIElement.MouseLeftButtonDownSOURCENAME =返回＆GT;
＆LT; StopStoryboard BeginStoryboardName =Storyboard_Begin/＆GT;
＆LT; BeginStoryboard X：NAME =Storyboard_Reversed故事板={StaticResource的FlipLast}/＆GT;
＆LT; /＆的EventTrigger GT;
＆LT; /UserControl.Triggers> ＆LT;电网X：NAME =LayoutRootWIDTH =280HEIGHT =680＆GT;
＆LT; Grid.Resources＆GT;
＆LT;风格的TargetType =网格＆GT;
＆LT; setter属性=IsHitTestVisibleVALUE =真/＆GT;
＆LT; Style.Triggers＆GT;
＆LT;触发属性=透明度VALUE =0＆GT;
＆LT; setter属性=IsHitTestVisibleVALUE =FALSE/＆GT;
＆LT; /触发＆GT;
＆LT; /Style.Triggers>
＆LT; /样式和GT;
＆LT; /Grid.Resources>
＆LT;电网X：NAME =后退的HorizontalAlignment =左HEIGHT =680VerticalAlignment =评出的WIDTH =280背景={DynamicResource {X：静态SystemColors.ActiveCaptionBrushKey}}RenderTransformOrigin =0.5， 0.5＆GT;
＆LT; Grid.RenderTransform＆GT;
＆LT;＆的TransformGroup GT;
＆LT; ScaleTransform /＆GT;
＆LT; SkewTransform /＆GT;
＆LT; RotateTransform /＆GT;
＆LT; TranslateTransform /＆GT;
＆LT; /＆的TransformGroup GT;
＆LT; /Grid.RenderTransform>
＆LT; TextBlock的X：名称=姓氏的HorizontalAlignment =中心TextWrapping =包装VerticalAlignment =中心保证金=0文本=姓氏WIDTH =100HEIGHT =100/＆GT;
＆LT; /网格和GT;
＆LT;电网X：NAME =接待的HorizontalAlignment =左HEIGHT =680VerticalAlignment =评出的WIDTH =280背景={DynamicResource {X：静态SystemColors.ActiveCaptionBrushKey}}RenderTransformOrigin =0.5， 0.5＆GT;
＆LT; Grid.RenderTransform＆GT;
＆LT;＆的TransformGroup GT;
＆LT; ScaleTransform /＆GT;
＆LT; SkewTransform /＆GT;
＆LT; RotateTransform /＆GT;
＆LT; TranslateTransform /＆GT;
＆LT; /＆的TransformGroup GT;
＆LT; /Grid.RenderTransform>
＆LT; TextBlock的X：名称=名字的HorizontalAlignment =中心TextWrapping =自动换行文本=名VerticalAlignment =中心WIDTH =100HEIGHT =100/＆GT;
＆LT; /网格和GT;
＆LT; /网格和GT;
＆LT; /用户控件＆GT;
I'm trying to create a control in WPF, similar to a card, that will have bound data on both "sides". Using the following code I can get it to flip from FIRST NAME to LAST NAME, just not back. Once it flips to LAST NAME and I click it just flashes like it's performing the same animation and not running the reverse. Any insight into this problem would be greatly appreciated.
<UserControl x:Class="WpfApplication2.TileControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<UserControl.Resources>
<Storyboard x:Key="FlipFirst">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Back">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Back">
<EasingDoubleKeyFrame KeyTime="0" Value="-1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Front">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Front">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="FlipLast">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Back">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Back">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="-1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Front">
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Front">
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="UIElement.MouseLeftButtonDown" SourceName="Front">
<BeginStoryboard x:Name="Storyboard_Begin" Storyboard="{StaticResource FlipFirst}"/>
</EventTrigger>
<EventTrigger RoutedEvent="UIElement.MouseLeftButtonDown" SourceName="Back">
<StopStoryboard BeginStoryboardName="Storyboard_Begin" />
<BeginStoryboard x:Name="Storyboard_Reversed" Storyboard="{StaticResource FlipLast}" />
</EventTrigger>
</UserControl.Triggers>
<Grid x:Name="LayoutRoot" Width="280" Height="680">
<Grid x:Name="Back" HorizontalAlignment="Left" Height="680" VerticalAlignment="Top" Width="280" Background="{DynamicResource {x:Static SystemColors.ActiveCaptionBrushKey}}" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<TextBlock x:Name="LastName" HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Center" Margin="0" Text="LAST NAME" Width="100" Height="100"/>
</Grid>
<Grid x:Name="Front" HorizontalAlignment="Left" Height="680" VerticalAlignment="Top" Width="280" Background="{DynamicResource {x:Static SystemColors.ActiveCaptionBrushKey}}" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<TextBlock x:Name="FirstName" HorizontalAlignment="Center" TextWrapping="Wrap" Text="FIRST NAME" VerticalAlignment="Center" Width="100" Height="100"/>
</Grid>
</Grid>
</UserControl>
解决方案
The problem with the code is that first time when animation is run, the grid named "back" becomes visible to the user and grid named "front" becomes transparent. But still it is on the top of "Back" grid and capturing all the mouse hit. So, when user again left click the mouse, it is captured by front grid not the back grid. To solve this problem, You need to IsHitTestVisible to false when grid is transparent. See the below code.
<UserControl x:Class="WpfApplication2.TileControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<UserControl.Resources>
<Storyboard x:Key="FlipFirst">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Back">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Back">
<EasingDoubleKeyFrame KeyTime="0" Value="-1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Front">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Front">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="FlipLast">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Back">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Back">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="-1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Front">
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Front">
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="UIElement.MouseLeftButtonDown" SourceName="Front">
<BeginStoryboard x:Name="Storyboard_Begin" Storyboard="{StaticResource FlipFirst}"/>
</EventTrigger>
<EventTrigger RoutedEvent="UIElement.MouseLeftButtonDown" SourceName="Back">
<StopStoryboard BeginStoryboardName="Storyboard_Begin" />
<BeginStoryboard x:Name="Storyboard_Reversed" Storyboard="{StaticResource FlipLast}" />
</EventTrigger>
</UserControl.Triggers>
<Grid x:Name="LayoutRoot" Width="280" Height="680">
<Grid.Resources>
<Style TargetType="Grid">
<Setter Property="IsHitTestVisible" Value="True" />
<Style.Triggers>
<Trigger Property="Opacity" Value="0">
<Setter Property="IsHitTestVisible" Value="False"/>
</Trigger>
</Style.Triggers>
</Style>
</Grid.Resources>
<Grid x:Name="Back" HorizontalAlignment="Left" Height="680" VerticalAlignment="Top" Width="280" Background="{DynamicResource {x:Static SystemColors.ActiveCaptionBrushKey}}" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<TextBlock x:Name="LastName" HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Center" Margin="0" Text="LAST NAME" Width="100" Height="100"/>
</Grid>
<Grid x:Name="Front" HorizontalAlignment="Left" Height="680" VerticalAlignment="Top" Width="280" Background="{DynamicResource {x:Static SystemColors.ActiveCaptionBrushKey}}" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<TextBlock x:Name="FirstName" HorizontalAlignment="Center" TextWrapping="Wrap" Text="FIRST NAME" VerticalAlignment="Center" Width="100" Height="100"/>
</Grid>
</Grid>
</UserControl>
这篇关于WPF翻转动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
