代码之家 › 专栏 › 技术社区 › Chris Craft

如何创建Silverlight单摆摆动3D文本效果

windows-phone-7 silverlight

Chris Craft · 技术社区 · 14 年前

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

我已经找到了在flash和javascript中实现这一点的方法,但是没有什么能直接帮助我在Silverlight中实现这一点。

下面是一个效果示例: http://activeden.net/item/pendulum-swing-3d-component-as3/85056

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

任何人都知道一个教程或实现这种效果的方法。我还没能在效果匹配的地方重现,看起来很自然。

1 回复 | 直到 11 年前

AnthonyWJones 14 年前

该动画所需的三维透视外观可以通过动画A实现。 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();
    }