Как создать текстовый эффект Silverlight Pendulum Swing 3D

Question

В последнее время я вижу этот текстовый эффект в тоннах рекламы и на веб-сайтах.

И я нашел способы сделать это во Flash и JavaScript, но ничего, что напрямую помогло бы мне достичь этого в Silverlight.

Вот пример эффекта: http://activeden.net/item/pendulum-swing-3d-component-as3/85056

По сути, идея заключается в том, что текст находится на рекламном щите и отображается в виде горизонтальной оси.

Любой знает учебник или подход к достижению этого эффекта. Я не смог воссоздать его там, где эффект совпадает и кажется естественным.

Answer 1

3D-перспектива, необходимая для этой анимации, может быть получена с помощью анимации 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();
    }