Animating text in WPF

One of the many treasures in WPF is the animation system.  There are many examples on the Web showing how to animate various element properties such as height, color, etc., but not many people are aware that text can be animated too.  This blog post shows how to animate text in a TextBlock.

The demo application associated with this post performs a fairly useless animation on the name of my favorite composer; Johann Sebastian Bach.  In a realistic setting you probably would not need to make Bach’s name wave up and down, and rotate in circles.  However it is conceivable that a user interface could benefit from employing the basic technique shown here.  I got the basic code sample for this demo app from Chris Anderson’s Essential Windows Presentation Foundation.

Here is what the demo application looks like:

It is difficult to describe exactly what these animations look like.  I recommend that you download and run the demo app at the bottom of this post to get a much clearer understanding of what the following code snippets accomplish.

Here is the XAML file for the demo app’s main Window:

Two of the animation resources are marked as x:Shared=”False” because each character in the TextBlock has its own copy of them.  The “CharacterRotationPauseAnimation” is applied to the entire Timeline in which the various animations run. Since it is only used once there is no need to mark it as unshared.

Here is the method which handles the TextBlock’s Loaded event.  It configures the animations on each character in the display text.

The heart of that method is the loop which configures each character in the TextBlock’s text.  It first creates a TextEffect object for a character.  The TextEffect class allows us to apply transformations to a contiguous set of characters in a text run.  The AddTextEffectForCharacter method is seen below:

The TranslateTransform and RotateTransform objects added to the TextEffect’s Transform property are the targets of the animations.  We use a TransformGroup to associate more than one transformation with the TextEffect. 

Lastly let’s take a look at how one of the animations is configured.  The following code is used to make each character rotate in a circle, and is called from the StartTextAnimations method seen previously.

Download the demo project here: Animating Text (demo project)  Be sure to change the file extension from .DOC to .ZIP and then decompress it.

[NOTE: This blog post was written while listening to Glenn Gould play Bach’s keyboard partitas.]