I wanted to experiment with text animation. Specifically, I wanted a control that would display some text and have the option of “exploding” that text in the sense of taking each word in the text and randomly animating it in terms of;

• translation
• rotation
• scale
• opacity

so that the words that make up the text can seem to “fly in” all at once to their final position on screen.

Perhaps a UI will help;

Here, my control is in the blue border occupying the bottom 3/4 of the window. Naturally, none of the styling is fixed.

The other controls on the Window just provide;

• Text
• Whether the control initially displays its text “exploded” or not
• How long the animation to bring the text into place should take

and those controls all data-bind to properties on my control with the TextBox only being set to transfer its value on a loss of focus rather than on every keystroke.

When I hit (in this case) the Implode button there’ll be a 5 second animation which does;

to bring the words into place and (naturally) Explode just does the reverse.

When the Text is set on the control, I just split it up into words and then create a separate TextBlock within a TextBlock to represent that word and then I just set some transformations on it randomly and apply some animations. Initially, I wanted to use Run rather than TextBlock for each of the words but Run turns out not to be nearly so flexible as TextBlock in terms of what you can do with it.

I’ve shared the source code here if you want to play with it and/or re-use the control or some of it – the demo app above is included with the control source.

There are some hard-coded things in the control ( such as the maximum amount by which to rotate, translate, scale ) which should perhaps be moved to properties for completeness.

There’s also a bit of a hack in there in order to get the main TextBlock that I use to wrap otherwise because the whole thing is in a ViewBox it’ll just be one line so I artificially limit the width of the TextBlock.

Taking that a step further…

I added this into the Green version of my “Twistori” client that I started building here and the code for that is then downloadable by clicking the image below;

and then I added it into the Blue version of my “Twistori” client that I shared here and the binaries for this one are downloadable by clicking the image below;