QuoteFloat: Animating TextBlock PlaneProjections for a spiraling effect in Silverlight

[silverlight: http://members.chello.nl/s.dol/QuoteFloat.html]

QuoteFloat is an animation for TextBlock elements, inspired by the way the HTC Touch HD shows SMS Text messages. It moves the text up and rotates it at the same time resulting in a spiraling effect. It is done by giving the TextBlock elements a PlaneProjection each and animating the RotationY and GlobalOffsetY properties.

The TextBlock elements are positioned below the bottom of the Canvas. The Canvas has a Clipping Mask so no one will see them until the animation starts. The XAML looks like this:

[sourcecode language=”XML”]
<Canvas x:Name="cvsBg" Width="500" Height="155"
Clip="M0.5,0.5 L499.5,0.5 L499.5,154.5 L0.5,154.5 z">
<TextBlock x:Name="txt1" Text="Txt1" Canvas.Top="192"
Style="{StaticResource TextBlockStyle1}">
<TextBlock.Projection><PlaneProjection/></TextBlock.Projection>
</TextBlock>
    <TextBlock x:Name="txt2" Text="Txt2" Canvas.Top="228"
     Style="{StaticResource TextBlockStyle1}">
     <TextBlock.Projection><PlaneProjection/></TextBlock.Projection>
</TextBlock>
    <TextBlock x:Name="txt3" Text="Txt3" Canvas.Top="265"
    Style="{StaticResource TextBlockStyle2}">
    <TextBlock.Projection><PlaneProjection/></TextBlock.Projection>
    </TextBlock>
</Canvas>
[/sourcecode]

I use two Styles for the two TextBlocks. Notice the second style is BasedOn, so it needs only to define the properties that are different from the first style. The Canvas.Top property is different for all the TextBlocks and defined inline in the XAML above.

[sourcecode language=”XML”]
<Style x:Key="TextBlockStyle1" TargetType="TextBlock">
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="Width" Value="400"/>
    <Setter Property="Height" Value="25"/>
    <Setter Property="FontSize" Value="21.333"/>
    <Setter Property="FontFamily" Value="Trebuchet MS"/>
    <Setter Property="TextAlignment" Value="Center"/>
    <Setter Property="Canvas.Left" Value="50"/>
</Style>
<Style x:Key="TextBlockStyle2" TargetType="TextBlock"
    BasedOn="{StaticResource TextBlockStyle1}">
    <Setter Property="FontSize" Value="14"/>
    <Setter Property="Canvas.Left" Value="200"/>
</Style>
[/sourcecode]

The actual animations are quite repetative, being almost the same for all TextBlock elements. The crucial word here is almost: the animations differ for .2 seconds. Stopping the text is the natural result from easing out and the easing in the animation.

[sourcecode language=”XML”]<Storyboard x:Name="QuoteFloat" RepeatBehavior="Forever">
    <DoubleAnimationUsingKeyFrames
        BeginTime="00:00:00" Storyboard.TargetName="txt1"
        Storyboard.TargetProperty=
            "(UIElement.Projection).(PlaneProjection.RotationY)">
        <EasingDoubleKeyFrame KeyTime="00:00:00" Value="90"/>
        <EasingDoubleKeyFrame KeyTime="00:00:01.5" Value="0">
            <EasingDoubleKeyFrame.EasingFunction>
                <CubicEase EasingMode="EaseOut"/>
            </EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>
        <EasingDoubleKeyFrame KeyTime="00:00:03" Value="-90">
            <EasingDoubleKeyFrame.EasingFunction>
                <CubicEase EasingMode="EaseIn"/>
            </EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>
… more animations

    <DoubleAnimationUsingKeyFrames
        BeginTime="00:00:00"
        Storyboard.TargetName="txt2"
        Storyboard.TargetProperty=
            "(UIElement.Projection).(PlaneProjection.RotationY)">
        <EasingDoubleKeyFrame KeyTime="00:00:00.2" Value="90"/>
        <EasingDoubleKeyFrame KeyTime="00:00:01.7" Value="0">
            <EasingDoubleKeyFrame.EasingFunction>
                <CubicEase EasingMode="EaseOut"/>
            </EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>
        <EasingDoubleKeyFrame KeyTime="00:00:03.2" Value="-90">
            <EasingDoubleKeyFrame.EasingFunction>
                <CubicEase EasingMode="EaseIn"/>
            </EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>
… more animations

[/sourcecode]

The text was not set using code, but in Blend. It then uses a DiscreteObjectKeyFrame for the TextBlock Text property and uses the given String Value.

[sourcecode language=”XML”]
   <ObjectAnimationUsingKeyFrames
BeginTime="00:00:00"
Storyboard.TargetName="txt1"
Storyboard.TargetProperty="(TextBlock.Text)">
     <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Technology requires design"/>
     <DiscreteObjectKeyFrame KeyTime="00:00:03" Value="Imagine users as very intelligent"/>
     <DiscreteObjectKeyFrame KeyTime="00:00:06" Value="No matter how cool you interface is,"/>
     <DiscreteObjectKeyFrame KeyTime="00:00:09" Value="Significant change"/>
   </ObjectAnimationUsingKeyFrames>
[/sourcecode]

The Loaded event of the UserControl is used to start the animation in the MainPage CodeBehind file:

[sourcecode language=”XML”]
<UserControl x:Class="QuoteFloat.MainPage"
    xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
    xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
    Width="500" Height="155" Loaded="StartAnim">
[/sourcecode]

 

[sourcecode language=”XML”]

private void StartAnim(object sender, System.Windows.RoutedEventArgs e)
{
    QuoteFloat.Begin();
}

[/sourcecode]

Complete Blend project is on my SkyDrive…

Njoy!