Download: TextEffectsSample Source

Text animation is powerful tool to present information and catch visitors attention. There are several libraries out there to create text animations in Flex. If you need to create text effects in Silverlight apps - please try SvLite Effects.

See it in action below:

SvLite Effects library providers text effect control to create text animations in Silverlight. The control is easy to use and can be configured in multiple ways to create different text animations.

TextEffectControl can be defined in Xaml as follows:

 <SvUx:TextEffectControl 
                       x:Name="textEffect" 
                       Text="Text Effects" 
                       FontSize="40" 
                       HorizontalAlignment="Center" 
                       VerticalAlignment="Center" />

You need to set it's Text property, FontSize and it's also possible to use custom Style for the control. In the above code we use TextEffectControlStyle defined inside application resources dictionary.

To start text animation you can use two methods: Show - to show text, and Hide - to hide text. However you also need to define animation parameters for the control. This can be done by setting text effect control Pattern property.

Text effect control Pattern property has TextAnimationPattern type and it defines type of show and hide animations for all text characters.

The following xaml code shows simple text animation pattern, which defines relatively complex animation:

 <SvFx:TextAnimationPattern >
     <SvFx:TextAnimationPattern.AnimationSelectors >
          <SvFx:AllAnimationGroupSelector >
               <SvFx:AllAnimationGroupSelector.AnimationPattern >
                    <SvFx:ShiftItemPattern 
                                          ShowInterval="0.1" 
                                          HideInterval="0.1" 
                                          SpeedRatio="4" 
                                          Shuffle="True" 
                                          MoveTween="BackTweenOut" 
                                          ShiftMode="FromRandomPoint" 
                                          StartVerticalOffset="60" 
                                          StartHorizontalOffset="60" />
               </SvFx:AllAnimationGroupSelector.AnimationPattern>
          </SvFx:AllAnimationGroupSelector>
     </SvFx:TextAnimationPattern.AnimationSelectors>
 </SvFx:TextAnimationPattern>

AnimationSelectors property defines animation groups and in the above code we use AllAnimationGroupSelector to apply animation to the whole text. In the above code we also use ShiftItemPattern for the selector. ShiftItemPattern is really powerful tool to customize your animations. Shift item pattern contains lot's of properties to customize animation.

Just open App.xaml file from the post's sample code and take a look into all animation patterns defined. It's so simpe!