1. Andy Beaulieu MCT, MCSD.NET, Silverlight Insiders www.spritehand.com www.andybeaulieu.com Silverlight 2 animation techniques

2. Agenda • Some Samples • Storyboard Animations • Custom Animations • Adding Physics • Visual State Manager LOTS OF DEMOS!(and Beers)

3. Storyboard Animations • Simplest way to animate • Good for “Static” Animations • Can animate many Properties: • Opacity • Position • Scale • Rotation • Etc…… • Very Small Footprint • XAML is small for Vector Images • Key Frame based, so minimal markup

4. Storyboard Animations, cont’d • Use Expression Blend to Design • Encapsulate Animations in separate UserControls! • Easier Maintenance • Smaller Pieces, Better Abstraction • Package animation with artwork

5. DEMO:STORYBOARD ANIMATIONS

6. Custom Animations • Good for “Dynamic Animations” • Examples: • Animation based on User Input • Game AI • Physics

7. Custom Animations, cont’d • Use an Empty Storyboard as “Timer” • Don’t use DispatcherTimer! • Storyboard Timer has better resolution and executes on separate thread from UI • Each “Timer” tick is a frame of animation • Example:

8. DEMO:CUSTOM ANIMATIONS

9. Physics • Applies real-world feel to UI • Use to make UI feel “Natural” • Think “Minority Report” • Examples: • DeepZoom • Games

10. Some Typical Physics Terms • Body: The object in a simulation, containing mass, intertia, etc. • Geometry: The shape of the object in the simulation, used for collision detection • Joint: An object that joins two Bodies together • Angular Spring: An object that forces a joint to a particular rotation

11. Physics, cont’d • “Physics is Hard!!!” • Use a Physics Engine • Farseer: www.codeplex.com/farseerphysics • Even with pre-built engine, still complex: • How to correlate Silverlight XAML elements with Physics elements? • What settings for gravity, joints, springs, etc?

12. Introducing “Physics Helper” • Makes Physics much Easier! • Use Expression Blend 2.5 to Draw out Physics Simulation • User Controls for Joint, Static Body, Simulation, etc.

13. DEMO:PHYSICS

14. Visual State Manager (VSM) • Allows animation behavior defined at the Style level • Allows re-use of behavior across controls of the same type • Defined at various levels: • App.xaml for Application-Wide use • UserControl.Resources for Page-Level use • Control.Resources for Control-Level use

15. Visual State Manager (VSM), cont’d • Two types of State Animation: • State Transition Animation • MouseOver, Pressed, Disabled, etc. • In-State Animation • While Mouse is Over, While Mouse is Pressed, etc. • To make an in-state animation, just set the storyboard to AutoReverse, Repeat Forever.

16. DEMO:VISUAL STATE MANAGER

17. Andy Beaulieu MCT, MCSD.NET, Silverlight Insiders www.spritehand.com www.andybeaulieu.com SUMMARYQ & A