Silverlight 图像翻转动画

Question

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

当用户单击图像时，我想动画化一个图像到另一个图像的过渡，就好像它是一张被翻转的纸，第一个图像在前面，另一个在后面。

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

Answer 1

基本上你需要两个Storybards 才能开始。每个Storyboard 都将使用PlaneProjection（在本例中我使用RotationX，它围绕x 轴旋转图像）来执行翻转动画。

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

您需要引用System.Windows.Interactivity 和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>

希望这会有所帮助。 :)

Answer 2

您可以在 Blend 中搜索有关投影动画的信息。这看起来像您需要的：http://www.silverlightbuzz.com/2009/10/14/using-the-3d-tools-to-animate-in-blend/