Question

我想使页面翻转效果相同。 Flip Board app for windows 8.1

之前我试图将Windows Phone的页面转动动画移植到Winrt，因为不支持PathGeometry剪辑，我放弃了相同的操作。

我正在尝试一种适用于WinRT（XAML - C＃）的解决方案。因为我对Direct X＆amp; C ++。

Answer 1

希望这会有所帮助：我使用了偶数触发来加载Loaded事件。

使用PlaneProjection： 我正在使用RotationX，它围绕x轴旋转图像。

  <Grid >
    <Grid.Triggers>
        <EventTrigger>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimationUsingKeyFrames  Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="Flip1">
                        <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="90.0146"/>
                        <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="180"/>
                    </DoubleAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames  Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="Flip2">
                        <EasingDoubleKeyFrame KeyTime="0" Value="-180"/>
                        <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-90"/>
                        <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0"/>
                    </DoubleAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Flip1">
                        <DiscreteObjectKeyFrame KeyTime="0">
                            <DiscreteObjectKeyFrame.Value>
                                <Visibility>Visible</Visibility>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                        <DiscreteObjectKeyFrame KeyTime="0:0:0.3">
                            <DiscreteObjectKeyFrame.Value>
                                <Visibility>Collapsed</Visibility>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Flip2">
                        <DiscreteObjectKeyFrame KeyTime="0">
                            <DiscreteObjectKeyFrame.Value>
                                <Visibility>Visible</Visibility>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                        <DiscreteObjectKeyFrame KeyTime="0:0:0.3">
                            <DiscreteObjectKeyFrame.Value>
                                <Visibility>Visible</Visibility>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Grid.Triggers>
    <Rectangle x:Name="Flip1"  Fill="Aqua" Height="50" Width="50">
        <Rectangle.Projection>
            <PlaneProjection x:Name="PlaneProjection1"></PlaneProjection>
        </Rectangle.Projection>
    </Rectangle>
    <Rectangle x:Name="Flip2"  Fill="Aqua" Height="50" Width="50">
        <Rectangle.Projection>
            <PlaneProjection x:Name="PlaneProjection2"></PlaneProjection>
        </Rectangle.Projection>
    </Rectangle>
</Grid>

使用ScaleTransform：将水平刻度从1更改为-1具有相同的旋转效果，您可以设置ScaleX属性的动画以获得旋转效果。您还应该将其可见性从可见变为隐藏，反之亦然。旋转90度后使图像消失。

   <Rectangle x:Name="Flip3" Fill="Red" Height="50" RenderTransformOrigin="0.5,.5"  Width="50">
        <Rectangle.RenderTransform>
            <ScaleTransform x:Name="st" ScaleX="1"  ScaleY="0.1"></ScaleTransform>
        </Rectangle.RenderTransform>
        <Rectangle.Triggers>
            <EventTrigger>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation  Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" Storyboard.TargetName="Flip3" From="1" To="-1" Duration="0:0:0.5">
                            <DoubleAnimation.EasingFunction>
                                <ExponentialEase EasingMode="EaseOut"></ExponentialEase>
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Rectangle.Triggers>
    </Rectangle>

Answer 2

您可以使用PlaneProjection作为Projection属性，轻松完成所需的转换。使用混合进行变换，你应该看看它是如何工作的。首先需要做的一件事是将UI拆分为两个表面，然后可以使用RenderTargetBitmap.Render()方法执行此操作 - 将要转换的所有内容转换为一个位图，将要转换的内容转换为另一个位图，然后适当地合并位图。

用于Windows 8.1的FlipBoard App中使用的页面翻转动画

2 个答案: