如何创建Silverlight Pendulum Pendulum 3D文本效果

Question

最近，我在大量的商业广告和网站上看到了这种文本效果。

我已经找到了在闪存和JavaScript中实现它的方法，但没有任何方法可以直接帮助我在Silverlight中实现它。

这里有一个效果的例子：http://activeden.net/item/pendulum-swing-3d-component-as3/85056

基本上，这个想法是文本在广告牌上，如果翻转到视图中，沿着顶部的水平轴。

任何人都知道实现此效果的教程或方法。我还没能把它重现到效果匹配的地方，而且看起来很自然。

Answer 1

此动画所需的3D透视外观可以通过动画PlaneProjection获得。“钟摆”的超调和后摆可能可以使用BackEase缓和函数来近似。

这是一个粗略的尝试，它接近了，但你可能需要更巧妙地处理数字以获得更平滑的结果(最终结算不是很正确)：

<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();
    }