Principles of Microsoft Silverlight Animation

2. Principles of Microsoft Silverlight Animation Jeff Paries Sr. Experience Developer Waggener Edstrom Worldwide Author: Foundation Silverlight 2 Animation

3. Shameless Plug “This book is easily worth ten times the money. I haven't seen a better book about animation in Silverlight yet.” - MaciejMisztal, Amazon.com “The descriptions of how it works and WHY to do something a certain way are priceless. I had several "Oh, now I get it" reactions over the course of reading this book.” - Speednet, Amazon.com “My best reviews are reserved for books that teach the material well and completely. This is the best of the books on Silverlight that I've purchased. It rates five stars in my world.” - Robin T. Wernick, Amazon.com

4. Session Topics • Storyboards, animations, and keyframes • Vectors • Frame-based animations • Particle systems • VR objects

5. Where Do Storyboards Come From?

6. Where Do Storyboards Come From?

7. Where Do Storyboards Come From? • <Storyboard x:Name="Storyboard1"/>

8. Where Do Storyboards Come From? • Are containers • Can contain many animations • Can be left empty (used as timers) • <Storyboard x:Name="Move" Duration="00:00:00"/> • Can also be created in code

9. Where Do Animations Come From?

10. Where Do Animations Come From? • <Storyboard x:Name="Storyboard1"> • <DoubleAnimationUsingKeyFrames • BeginTime="00:00:00" • Storyboard.TargetName="ellipse" • Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"> • <SplineDoubleKeyFrame KeyTime="00:00:01" • Value="370"/> • </DoubleAnimationUsingKeyFrames> • </Storyboard>

11. Where Do Animations Come From? • Are placed inside Storyboard containers • Used to change object properties over time • Animation types correspond to data types • Double (width, height, left, top, etc.) • Color (fill, stroke, etc.) • Point (for path manipulation) • Can also be created with code

12. Where Do Animations Come From? • Each animation type has two variations • From/to • UsingKeyframes

13. Where Do Keyframes Come From? • <SplineDoubleKeyFrame KeyTime="00:00:01" • Value="370"/>

14. Where Do Keyframes Come From? • There are three types of keyframes • Linear (linear movement between keyframes) • Spline (allows motion “easing”) • Discrete (holds an object until next keyframe) • Change type by right-clicking keyframe • “Ease in” or “Ease out” = Spline • “Hold in” = Discrete

15. Where Do Keyframes Come From? • <LinearDoubleKeyFrameKeyTime="00:00:01" Value="370"/> • <SplineDoubleKeyFrame KeyTime="00:00:01" Value="370"/> • <SplineDoubleKeyFrame KeyTime="00:00:01" Value="370" KeySpline="0,0,0.50,1"/> • <DiscreteDoubleKeyFrame KeyTime="00:00:01" Value="370"/>

16. Keyframe Types Linear Spline Discrete

17. Storyboard Animations Models Remixed Data Visualization

18. What's a Vector? • Are a key component of procedural animation • Describe direction and distance independent of time • Vector movement is simple – for each unit of time that passes, add the vector components to the object’s XY position

19. Vector Movement (1D) 0,0 +X X Velocity = 1 +Y LayoutRoot Canvas

20. Vector Movement (2D) 0,0 +X X Velocity = 1 Y Velocity = -2 +Y LayoutRoot Canvas

21. Changing Vector Direction 0,0 +X 5,-5 5,5 Multiply the Y component by -1 to reverse direction +Y LayoutRoot Canvas

22. Using vectors in C#Create/assign vector variables • private Point ObjPosition; • private double VelocityX = 1; • private double VelocityY = -2;

23. Using vectors in C#The event handler • privatevoidMove_Completed(objectsender, EventArgs e) • { • }

24. Using vectors in C#Update the object's position • ObjPosition.X += VelocityX; • ObjPosition.Y += VelocityY; • Canvas.SetLeft(MyObject, • ObjPosition.X); • Canvas.SetTop(MyObject, • ObjPosition.Y); • VelocityY += Gravity;

25. Using vectors in C#Restart the timer • Move.Begin();

26. Vector Animation Ball Drop

27. What is Frame-Based Animation? • Imitates original “flipbook” techniques • Accessible via • Storyboards • Visual State Manager • Code • Complex frame-based animation (i.e., characters) requires planning

28. What's a Sprite?

29. What's a Sprite? • A 2D or 3D image or animation that becomes part of a larger scene • First used in the mid-70’s, still in use • Methods of producing sprite content • Rotoscoping live video (blue screen) • Claymation • 3D software • Vector artwork

30. Sprites with Discrete Keyframes • A series of images that depict the desired action • Images are aligned • Translated at some interval

31. Sprites with Discrete Keyframes

32. Sprites with Discrete Keyframes

33. Sprite Animation Dog Walk

34. Sprites with Visibility

35. Sprites with Visibility • Images are added in XAML

36. Sprites with Visibility • Use a storyboard to change frames

37. Sprite Animation Space Marine

38. Movement Flow ChartLinear • Goes directly from one move to another in a fixed order • Limits options (cannot Jump from Idle) Idle Walk Run Jump

39. Movement Flow ChartRadial • Less restrictive, but still limiting Jump Idle Walk Run

40. Movement Flow ChartDescending Idle Walk Run Jump Hit Get Hit (Run) (Idle) (Walk) (Jump) (Get Hit) Die

41. Movement Flow ChartCondescending Wife Boss Mother-in-Law Ex-Wife Dad Me

42. Sprite Animation Visual State Manager

43. Particle Systems • Often used to model “fuzzy” objects • Fire • Smoke • Explosions • Water

44. Basic Model for Particle System • For each unit of time that passes • New particles may be created • Old particles are conditionally removed • Existing particle positions are updated

45. What the Model Looks Like in C#The event handler • private void MoveParticles(object sender, EventArgs e) • { • }

46. What the Model Looks Like in C#Iterate through all available particles • for (inti = 0; i < • Particles.Count; i++) • { • }

47. What the model Looks Like in C#Update the position of the particle • Canvas.SetLeft(Particles[i], • Canvas.GetLeft(Particles[i]) + • Particles[i].Velocity.X); • Canvas.SetTop(Particles[i], • Canvas.GetTop(Particles[i]) + • Particles[i].Velocity.Y);

48. What the Model Looks Like in C#Update the particle age • Particles[i].Age += 1;

49. What the Model Looks Like in C#Evaluate age and act • if (Particles[i].Age >= • Particles[i].LifeSpan) • { • LayoutRoot.Children.Remove(Particles[i]); • Particles.Remove(Particles[i]); • CreateParticles(1); • }

50. What the Model Looks Like in C#Restart the timer • Move.Begin();