Silverlight Image Flip Animation

Question

私の銀色のアプリで、私は等しい次元の2つの画像を持っています。

ユーザーが画像をクリックすると、最初の画像が前面に、もう一方が背面に反転しているように、ある画像を別の画像にアニメーション化したいと思います。

私は銀色のアニメーションで作業していませんが、まだどこから始めるべきかわかりません。

Answer 1

基本的には、最初に2つのStorybardsが必要です。それぞれStoryboardはPlaneProjectionを使用します（この場合、回転のx軸を中心に画像を回転させるRotationXを使用しています）。

次の例では、FlippingDownとFlippingUpの2つの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

ブレンドでプロジェクションアニメーションに関する情報を検索できます。これは必要なもののようです：http://www.silverlightbuzz.com/2009/10/14/using-the-3d-tools-to-animate-in-blend/