Silverlight图像翻转动画

在我的silverlight应用程序中，我有两个尺寸相等的图像

当用户单击图像时，我想设置一个图像到另一个图像的过渡动画，就像一张纸被翻转一样，第一个图像在前面，另一个在后面

---

我还没有使用silverlight动画，所以我不知道从哪里开始。

基本上，你需要两个

故事吟游诗人来开始。每个
情节提要
都将使用（在本例中，我使用的是
RotationX
，它围绕旋转的x轴旋转图像）来制作翻转动画

在下面的示例中，我创建了
FlippingDown
和
FlippingUp
两个
故事板
。我为它们每个都附加了一个
ControlStoryboardAction
行为，它们将在触发
MouseLeftButtonDown
时被触发

您需要参考
System.Windows.interactive
和
Microsoft.Expression.Interactions

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" mc:Ignorable="d" x:Class="FilppingAnimation.MainPage" Width="640" Height="480">

    <UserControl.Resources>
        <Storyboard x:Name="FlippingDown">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="Front">
                <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="Back">
                <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="Front">
                <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="Back">
                <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>
        <Storyboard x:Name="FlippingUp">
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Front">
                <DiscreteObjectKeyFrame KeyTime="0:0:0.3">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <DoubleAnimation Duration="0:0:0.6" To="0" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="Front" d:IsOptimized="True"/>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="Back">
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-90.0146"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="-180"/>
            </DoubleAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Back">
                <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>
        </Storyboard>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="#FFCC9E9E">
        <Image x:Name="Back" HorizontalAlignment="Center" VerticalAlignment="Center" Source="/311438.jpg" Height="226" Width="129">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseLeftButtonDown">
                    <ei:ControlStoryboardAction Storyboard="{StaticResource FlippingUp}"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
            <Image.Projection>
                <PlaneProjection/>
            </Image.Projection>
        </Image>
        <Image x:Name="Front" HorizontalAlignment="Center" VerticalAlignment="Center" Source="/318549.jpg" Height="226" Width="129" d:IsHidden="True">
            <Image.Projection>
                <PlaneProjection/>
            </Image.Projection>
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseLeftButtonDown">
                    <ei:ControlStoryboardAction Storyboard="{StaticResource FlippingDown}"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Image>
    </Grid>
</UserControl>


看得见的
崩溃
看得见的
看得见的
看得见的
看得见的
崩溃

希望这有帮助。：）
 您可以在Blend中搜索有关投影动画的信息。这看起来像是您需要的：