Comment créer un effet de texte 3D Silverlight Pendulum Swing

Question

Je vois cet effet de texte dans des tonnes de publicités et de sites Web récemment.

Et j'ai trouvé des façons de le faire en Flash, et JavaScript, mais rien qui m'aiderait directement à le faire dans Silverlight.

Voici un exemple de l'effet: http://activeden.net/item/pendulum-swing-3d-component-as3/85056

Fondamentalement, l'idée est que le texte est sur un panneau d'affichage et si en vue le long basculée l'axe horizontal supérieur. Tout le monde connaît un tutoriel ou une approche pour atteindre cet effet.

Je n'ai pas été capable de le recréer là où l'effet correspond et semble naturel.

Answer 1

L'apparence de la perspective 3D requise par cette animation peut être obtenue par animation PlaneProjection. Le dépassement puis le retour du "pendule" peuvent probablement être approximés en utilisant une fonction d'accélération BackEase.

Voici une tentative grossière, sa fin, mais vous aurez probablement besoin de finesse les chiffres un peu plus pour obtenir un résultat plus lisse (décantation finale n'est pas tout à fait raison): -

<Grid x:Name="LayoutRoot" Background="White"> 
    <Grid.Resources> 
     <Storyboard x:Name="Swing"> 
      <DoubleAnimationUsingKeyFrames Duration="0:0:1" Storyboard.TargetName="Notice" 
       Storyboard.TargetProperty="(Border.Projection).(PlaneProjection.RotationX)"> 
       <EasingDoubleKeyFrame KeyTime="0:0:0.75" Value="15"> 
        <EasingDoubleKeyFrame.EasingFunction> 
         <BackEase EasingMode="EaseOut" Amplitude="1.3" /> 
        </EasingDoubleKeyFrame.EasingFunction> 
       </EasingDoubleKeyFrame> 
       <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"> 
        <EasingDoubleKeyFrame.EasingFunction> 
         <BackEase EasingMode="EaseOut" Amplitude="2" /> 
        </EasingDoubleKeyFrame.EasingFunction> 
       </EasingDoubleKeyFrame> 
      </DoubleAnimationUsingKeyFrames> 
     </Storyboard> 

    </Grid.Resources> 
    <Border x:Name="Notice" Background="Orange" CornerRadius="5" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10" > 
     <Border.Projection> 
      <PlaneProjection RotationX="90" CenterOfRotationY="0" /> 
     </Border.Projection> 
     <TextBlock FontSize="24" FontWeight="Bold" Foreground="Yellow">NICE EFFECT?</TextBlock> 
    </Border> 
    <Button Content="Go" Height="35" HorizontalAlignment="Left" Margin="214,13,0,0" Name="button1" VerticalAlignment="Top" Width="142" Click="button1_Click" /> 
</Grid> 

Code: -

private void button1_Click(object sender, RoutedEventArgs e) 
    { 
     ((PlaneProjection)Notice.Projection).RotationX = 90; 
     Swing.Begin(); 
    }