How to create a Silvleright Pendulum Swing 3D text effect

Question

I'm seeing this text effect in tons of commercials, and web sites lately.

And I've found ways to do it in Flash, and JavaScript, but nothing that would directly help me achieve it in Silverlight.

Here's an example of the effect: http://activeden.net/item/pendulum-swing-3d-component-as3/85056

Basically the idea is the text is on a billboard and if flipped into view along the top horizontal axis.

Any one know of a tutorial or an approach to achieve this effect. I haven't been able to recreate it to where the effect matches and seems natural.

Answer 1

The 3D perspective appearance needed by this animation can be acheived by animation a PlaneProjection. The overshoot and then back swing of the "pendulum" can probably be approximated using a BackEase easing function.

Here is a rough attempt, its close but you will probably need to finesse the numbers a little more to get a smoother result (final settling isn't quite right):-

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

Code:-

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