Download
andy beaulieu mct mcsd net silverlight insiders www spritehand com www andybeaulieu com n.
Skip this Video
Loading SlideShow in 5 Seconds..
Silverlight 2 animation techniques PowerPoint Presentation
Download Presentation
Silverlight 2 animation techniques

Silverlight 2 animation techniques

73 Views Download Presentation
Download Presentation

Silverlight 2 animation techniques

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  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