2010-10-17 38 views
1

我看到這種文字效果噸廣告和最近的網站。如何創建一個Silverlight擺擺動3D文本效果

我已經找到了在Flash和JavaScript中實現它的方法,但沒有什麼能直接幫助我在Silverlight中實現它。

下面的效果的例子: http://activeden.net/item/pendulum-swing-3d-component-as3/85056

基本上想法是文本是廣告牌上,如果翻轉到視圖沿着頂部水平軸。

任何人都知道一個教程或一種方法來實現這種效果。我無法將它重新創建到效果匹配的位置,並且看起來很自然。

+0

可能重複的[在Silverlight擺錘狀動畫。](http://stackoverflow.com/questions/3859126/pendulum-like-animation-in-silverlight) – ctacke 2010-10-17 15:32:45

回答

3

此動畫需要的3D透視外觀可以通過動畫獲得PlaneProjection。 「擺」的過沖然後回擺可以近似使用緩動功能。

這裏是一個粗略的嘗試,它的接近,但你可能會需要巧妙的人數多一點,以獲得更平滑的結果(最終沉澱是不完全正確): -

<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> 

代碼: -

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