Silverlight圖像翻轉動畫

在我的silverlight應用程序中，我有兩個等維度的圖像。Silverlight圖像翻轉動畫

當用戶點擊圖像時，我想將一個圖像轉換爲另一個圖像，就好像它是一張紙，正面和背面的第一張圖像被翻轉一樣。

我還沒有使用silverlight動畫，但我不知道從哪裏開始。

2011-12-07 Ronnie Overby

基本上你需要兩個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>

希望這有助於。 :)

來源

2011-12-08 07:06:26

您可以搜索混合中投影動畫的信息。這看起來像你所需要的：http://www.silverlightbuzz.com/2009/10/14/using-the-3d-tools-to-animate-in-blend/

來源

2011-12-08 07:06:30

Silverlight圖像翻轉動畫

回答

相關問題