Xaml Wpf中的翻转动画_Wpf_Xaml

Xaml Wpf中的翻转动画

wpf xaml

Xaml Wpf中的翻转动画,wpf,xaml,Wpf,Xaml,我曾试图在WPF中用XAML制作翻转动画，但并不是我想要的，我无法找到所需的答案。我唯一能做的就是缩放图像（下面是XAML代码），但它看起来不像翻转。请告诉我翻转动画需要什么 <Rectangle x:Name="Image" Fill="DarkSeaGreen" RenderTransformOrigin="0.5,0.5" Height="150" Width="200" Canvas.Left="150" Canvas.Top="150"> <R

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

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

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

对于从1到-1的Y轴，需要进行缩放变换。我的WPF fu已经过时了，所以我不能给你精确的转换XAML。

如果你想让它看起来像是在翻转，那么你需要倾斜对象，这样最远的边会更窄

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

像这样：

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

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

您可能会发现这很有趣：

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

添加正面广告反面

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

马里奥·梅尔·胡伯你可以做很多事情使用此控件进行操作！-->

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

是的，我知道，但看起来还是不太像翻页，也许3D变换会更好。难道不可能通过2D动画实现吗。我也在考虑使用skew，但我找不到如何用它制作梯形动画。它仅使用1个侧链设置动画。这就是我想要的。我得调查一下这件事