Question

我试图在WPF中使用XAML制作翻转动画，但不是我想要的，我无法找到所需的答案。我唯一能做的就是缩放图像（XAML代码在下面），但它看起来不像翻转。请告诉我Flip Animation需要什么。

<Rectangle x:Name="Image" Fill="DarkSeaGreen" RenderTransformOrigin="0.5,0.5" Height="150" Width="200" Canvas.Left="150" Canvas.Top="150">
            <Rectangle.RenderTransform>
                <ScaleTransform ScaleY="-1" />
            </Rectangle.RenderTransform>
            <Rectangle.Triggers>
                <EventTrigger RoutedEvent="Window.Loaded">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard x:Name="ImageFlip">
                                <DoubleAnimation From="-1" To="1" BeginTime="0:0:1" Duration="0:0:2" Storyboard.TargetName="Image" Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Rectangle.Triggers>
        </Rectangle>

Answer 1

Y轴的比例变换需要从1到-1运行。我的WPF-fu已经过时了，所以我无法为你提供精确的XAML变换。

Answer 2

如果你希望它看起来像翻转那么你需要歪斜物体，那么最远边缘会变窄像这样：

    <Rectangle x:Name="Image" Fill="DarkSeaGreen"
               RenderTransformOrigin="0.5,0.5" Height="150" Width="200">
        <Rectangle.RenderTransform>
            <TransformGroup>
                <ScaleTransform  />
                <SkewTransform/>
            </TransformGroup>
        </Rectangle.RenderTransform>
        <Rectangle.Triggers>
            <EventTrigger RoutedEvent="Window.Loaded">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard x:Name="ImageFlip">
                            <DoubleAnimationUsingKeyFrames   Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                                <SplineDoubleKeyFrame KeyTime="00:00:00.0" Value="1" />
                                <SplineDoubleKeyFrame KeyTime="00:00:00.09" Value="0.3" />
                                <SplineDoubleKeyFrame KeyTime="00:00:00.12" Value="0.6" />
                                <SplineDoubleKeyFrame KeyTime="00:00:00.15" Value="0.8" />
                                <SplineDoubleKeyFrame KeyTime="00:00:00.18" Value="1" />
                                <SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1" />
                            </DoubleAnimationUsingKeyFrames>

                            <DoubleAnimationUsingKeyFrames  Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                                <SplineDoubleKeyFrame KeyTime="00:00:00.0" Value="1" />
                                <SplineDoubleKeyFrame KeyTime="00:00:00.09" Value="0.9" />
                                <SplineDoubleKeyFrame KeyTime="00:00:00.18" Value="1" />
                                <SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1" />
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames   Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)">
                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                                <SplineDoubleKeyFrame KeyTime="00:00:00.06" Value="-10" />
                                <SplineDoubleKeyFrame KeyTime="00:00:00.09" Value="-20" />
                                <SplineDoubleKeyFrame KeyTime="00:00:00.1" Value="20" />
                                <SplineDoubleKeyFrame KeyTime="00:00:00.18" Value="0" />
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
        </Rectangle.Triggers>
    </Rectangle>

您可能会觉得这很有趣： https://archive.codeplex.com/?p=flipcontrol

Answer 3

<UserControl x:Class="FlipControl.FlipControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <UserControl.Resources>
        <Storyboard x:Key="StoryFlip">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(AxisAngleRotation3D.Angle)"
                                           Storyboard.TargetName="rot">
                <SplineDoubleKeyFrame KeyTime="00:00:01" KeySpline="0,0,0,1" Value="180"></SplineDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(AxisAngleRotation3D.Angle)"
                                           Storyboard.TargetName="rot2">
                <SplineDoubleKeyFrame KeyTime="00:00:01" KeySpline="0,0,0,1" Value="360"></SplineDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

        <Storyboard x:Key="StoryFlipBack">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(AxisAngleRotation3D.Angle)"
                                           Storyboard.TargetName="rot">
                <SplineDoubleKeyFrame KeyTime="00:00:01" KeySpline="0,0,0,1" Value="0"></SplineDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(AxisAngleRotation3D.Angle)"
                                           Storyboard.TargetName="rot2">
                <SplineDoubleKeyFrame KeyTime="00:00:01" KeySpline="0,0,0,1" Value="180"></SplineDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>

    <Viewport3D>
        <Viewport3D.Camera>
            <PerspectiveCamera Position="0, 0, 4"/>
        </Viewport3D.Camera>

        <Viewport2DVisual3D x:Name="Side1">
            <!-- Rotation definieren -->
            <Viewport2DVisual3D.Transform>
                <RotateTransform3D>
                    <RotateTransform3D.Rotation>
                        <AxisAngleRotation3D x:Name="rot" Angle="0" Axis="1, 0, 0" />
                    </RotateTransform3D.Rotation>
                </RotateTransform3D>
            </Viewport2DVisual3D.Transform>

            <!-- Geometry und Material für das Viewport2DVisual3D -->
            <Viewport2DVisual3D.Geometry>
                <MeshGeometry3D Positions="-1,1,0 -1,-1,0 1,-1,0 1,1,0"
                          TextureCoordinates="0,0 0,1 1,1 1,0" 
                          TriangleIndices="0 1 2 0 2 3" />
            </Viewport2DVisual3D.Geometry>
            <Viewport2DVisual3D.Material>
                <DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True" Brush="White"/>
            </Viewport2DVisual3D.Material>

        </Viewport2DVisual3D>

        <Viewport2DVisual3D x:Name="Side2">
            <!-- Rotation definieren -->
            <Viewport2DVisual3D.Transform>
                <RotateTransform3D>
                    <RotateTransform3D.Rotation>
                        <AxisAngleRotation3D x:Name="rot2" Angle="180" Axis="1, 0, 0" />
                    </RotateTransform3D.Rotation>
                </RotateTransform3D>
            </Viewport2DVisual3D.Transform>

            <!-- Geometry und Material für das Viewport2DVisual3D -->
            <Viewport2DVisual3D.Geometry>
                <MeshGeometry3D Positions="-1,1,0 -1,-1,0 1,-1,0 1,1,0"
                          TextureCoordinates="0,0 0,1 1,1 1,0" 
                          TriangleIndices="0 1 2 0 2 3" />
            </Viewport2DVisual3D.Geometry>
            <Viewport2DVisual3D.Material>
                <DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True" Brush="White"/>
            </Viewport2DVisual3D.Material>

            <!-- Steuerelemente in 3D-Look -->

        </Viewport2DVisual3D>

        <!-- Licht -->
        <ModelVisual3D>
            <ModelVisual3D.Content>
                <AmbientLight Color="White" />
            </ModelVisual3D.Content>
        </ModelVisual3D>
    </Viewport3D>

</UserControl>

添加属性公共视觉前端 { 得到 { 返回Side1.Visual; } 组 { UIElement Elem; 故事板动画；

            Side1.Visual = value;
            Elem = Side1.Visual as UIElement;

            if (Elem != null)
            {
                Elem.MouseEnter += (sender, e) =>
                {
                    Animation = this.Resources["StoryFlip"] as Storyboard;

                    if (Animation != null)
                    {
                        Animation.Begin();
                    }
                };
            }

        }
    }

    public Visual BackSide
    {
        get
        {
            return Side2.Visual;
        }
        set
        {
            UIElement Elem;
            Storyboard Animation;

            Side2.Visual = value;
            Elem = Side2.Visual as UIElement;

            if (Elem != null)
            {
                Elem.MouseLeave += (sender, e) =>
                {
                    Animation = this.Resources["StoryFlipBack"] as Storyboard;

                    if (Animation != null)
                    {
                        Animation.Begin();
                    }
                };
            }

        }
    }

添加正面广告反面

马里奥·梅尔·休伯（Mario Meir-Huber）您可以做很多带有此控件的东西！->

        <flip:FlipControl.BackSide>
            <StackPanel>
                <Border BorderThickness="2" BorderBrush="Red">
                    <Button Height="20" Width="40"></Button>
                </Border>
                <!--<TextBlock>You want to send me an E-Mail?</TextBlock>
                <TextBox Height="80" AcceptsReturn="True"></TextBox>
                <Button>Just do it!</Button>
                <TextBlock>mario@meirhuber.de</TextBlock>-->
            </StackPanel>
        </flip:FlipControl.BackSide>

    </flip:FlipControl>
    </Border>

    <Border Width="150" Height="150">
        <flip:FlipControl MouseEnter="FlipControl_MouseEnter" MouseLeave="FlipControl_MouseLeave" Name="FlipMe1">
            <flip:FlipControl.FrontSide>
                <StackPanel Height="20" Width="40">
                    <Border BorderThickness="2" BorderBrush="Green">
                        <Button Height="20" Width="40"></Button>
                    </Border>
                    <!--<TextBlock FontSize="16" Foreground="Blue">Mario Meir-Huber</TextBlock>
                <Line X1="0" X2="130" StrokeThickness="2" Stroke="Black" />
                <TextBlock FontSize="6">You can do a lot of</TextBlock>
                <TextBlock FontSize="6">Things with this Control!</TextBlock>-->
                </StackPanel>
            </flip:FlipControl.FrontSide>

            <flip:FlipControl.BackSide>
                <StackPanel>
                    <Border BorderThickness="2" BorderBrush="Red">
                        <Button Height="20" Width="40"></Button>
                    </Border>
                    <!--<TextBlock>You want to send me an E-Mail?</TextBlock>
                <TextBox Height="80" AcceptsReturn="True"></TextBox>
                <Button>Just do it!</Button>
                <TextBlock>mario@meirhuber.de</TextBlock>-->
                </StackPanel>
            </flip:FlipControl.BackSide>

        </flip:FlipControl>
    </Border>

    <Border Width="150" Height="150">
        <flip:FlipControl MouseEnter="FlipControl_MouseEnter" MouseLeave="FlipControl_MouseLeave" Name="FlipMe2">
            <flip:FlipControl.FrontSide>
                <StackPanel Height="20" Width="40">
                    <Border BorderThickness="2" BorderBrush="Green">
                        <Button Height="20" Width="40"></Button>
                    </Border>
                    <!--<TextBlock FontSize="16" Foreground="Blue">Mario Meir-Huber</TextBlock>
                <Line X1="0" X2="130" StrokeThickness="2" Stroke="Black" />
                <TextBlock FontSize="6">You can do a lot of</TextBlock>
                <TextBlock FontSize="6">Things with this Control!</TextBlock>-->
                </StackPanel>
            </flip:FlipControl.FrontSide>

            <flip:FlipControl.BackSide>
                <StackPanel>
                    <Border BorderThickness="2" BorderBrush="Red">
                        <Button Height="20" Width="40"></Button>
                    </Border>
                    <!--<TextBlock>You want to send me an E-Mail?</TextBlock>
                <TextBox Height="80" AcceptsReturn="True"></TextBox>
                <Button>Just do it!</Button>
                <TextBlock>mario@meirhuber.de</TextBlock>-->
                </StackPanel>
            </flip:FlipControl.BackSide>

        </flip:FlipControl>
    </Border>
</WrapPanel>

在Xaml Wpf中翻转动画

3 个答案: