Question

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

我已经找到了在Flash和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();
    }

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

1 个答案: