Windows apps
Collapse the table of content
Expand the table of content

Text Animation Sample

This topic contains the following sections.

Goal

Illustrate and compare different text rendering methods for animated text scenarios.

Description

This sample demonstrates how to animate text using the Direct2D API. As with any other API, there are multiple ways though which this can be accomplished. Each rendering method offers certain performance and quality measures.

Simple animation effects of text translation, rotation and scale are shown in the sample, as shown in the following screen shot.

Screen shot of the sample application with text that is rotated, scaled, and translated

The three different rendering methods that have been used are:

To help understand performance characteristics of the different text rendering methods, frame rate measure is shown in the title bar.

User Scenario

Text animation is a very common scenario when rendering rich UI. It can be used to create effects such as text flying around, or fading in and out as in slide transitions.

Depending upon the animation scenario different rendering methods might be useful.

For the three basic animation styles shown in this sample, here are some recommendations:

  • Translation: For most practical purposes the default case might suffice. In general, even though A8 targets are usually faster, the quality of rendering is not the same. You might find that the text translation is jittery with A8 targets. This is due to constant re-sampling. Also, the text looks blurred when compared to the default or outline case. But again, this might not be important for many animation scenarios since animated text sharpness might not be very discernable.
  • Rotation: The outline rendering method might be best suited for this due to the least complexity of implementation. A8 targets will be the fastest but there is a trade-off in terms of code complexity when compared to the outline case. The default case is much slower because font re-rasterization is a big bottleneck given that font cache does not necessarily contain the correct transformation of the text upon successive rendering.
  • Scaling: Again, outline might be best suited for scaling as well. Default case text can look jittery because text hinting technique is used for snapping text to the pixel boundaries. As with the rotation case, the default case will be much slower due to font re-rasterization. In the case of A8 targets, the text can look pixilated when the scale is very large.

Details

This sample can be run with multiple settings to change the text animation type and the rendering method. Here are the various options to choose from:

Text Animation Style

Change the text animation style to any of the following:

  • Translation (toggle with 't' key)
  • Rotation (toggle with 'r' key)
  • Scaling (toggle with 's' key)

In addition, animation effects can be combined by selecting more than one at the same time. For example press the 'r' and 's' to see the text getting scaled while rotating.

Text Rendering Method

Change the text rendering method to any of the following:

  • Default (select with '1' key)
  • Outline (select with '2' key)
  • Use A8 targets (select with '3' key)

Requirements

Minimum supported clientWindows 7 or Windows Vista with Service Pack 2 (SP2) and Platform Update for Windows Vista
Minimum supported serverWindows Server 2008 R2 or Windows Server 2008 with Service Pack 2 (SP2) and Platform Update for Windows Server 2008
Windows SDKWindows Software Development Kit (SDK) for Windows 7

 

Downloading the Sample

This sample is available in the following locations.

LocationPath/URL
Windows SDK\Program Files\Microsoft SDKs\Windows\v7.0\Samples\Multimedia\Direct2D\TextAnimationSample
Code GalleryDownload from MSDN Code Gallery

 

Building the Sample

Building the Sample Using the Command Prompt

  1. Open the Command Prompt window and navigate to the sample directory.
  2. Type msbuild TextAnimationSample.sln.

Building the Sample Using Visual Studio 2008 (Preferred Method)

  1. Open Windows Explorer and navigate to the sample directory.
  2. Double-click the icon for the .sln (solution) file to open the file in Visual Studio.
  3. In the Build menu, select Build Solution. The application will be built in the default \Debug or \Release directory.

 

 

Send comments about this topic to Microsoft

Build date: 1/22/2012

Community Additions

Show:
© 2016 Microsoft