WPF 翻转动画答案

【问题标题】：WPF Flip AnimationWPF 翻转动画
【发布时间】：2013-10-30 17:59:55
【问题描述】：

我正在尝试在 WPF 中创建一个类似于卡片的控件，该控件将在“两侧”都有绑定数据。使用下面的代码，我可以让它从 FIRST NAME 翻转到 LAST NAME，而不是返回。一旦它翻转到 LAST NAME 并且我单击它，它就会闪烁，就像它正在执行相同的动画而不是反向运行一样。对此问题的任何见解将不胜感激。

<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>

【问题讨论】：

Josh Smith already did this for you. Check it out
我尝试了一些类似这样的操作，但我可能错了，但我似乎记得我必须添加一个StopStoryboard 才能停止第二个Storyboard，你的Storyboard_Reversed.. . 不知何故，它干扰了另一个。
@HighCore Thriple 的问题在于，它仅在您的控件为方形时才有效。我的控制是 280 X 680，它会扭曲内容。我尝试使用 Thriple 和 PerspectiveCamera 的结果并不理想。任何其他建议将不胜感激。

标签： c# wpf animation flip

【解决方案1】：

代码的问题是第一次运行动画时，名为“back”的网格对用户可见，而名为“front”的网格变为透明。但它仍然位于“后退”网格的顶部并捕获所有鼠标点击。因此，当用户再次左键单击鼠标时，它被前网格而不是后网格捕获。要解决此问题，您需要在网格透明时将 IsHitTestVisible 设置为 false。请参阅下面的代码。

<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>

【讨论】：