1 / 70

Principles of Microsoft Silverlight Animation

Principles of Microsoft Silverlight Animation. Jeff Paries Sr. Experience Developer Waggener Edstrom Worldwide Author: Foundation Silverlight 2 Animation. Shameless Plug. “This book is easily worth ten times the money. I haven't seen a better book about animation in Silverlight yet.”

Thomas
Télécharger la présentation

Principles of Microsoft Silverlight Animation

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

  2. 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

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

  4. Where Do Storyboards Come From?

  5. Where Do Storyboards Come From?

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

  7. 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

  8. Where Do Animations Come From?

  9. 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>

  10. 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

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

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

  13. 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

  14. 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"/>

  15. Keyframe Types Linear Spline Discrete

  16. Storyboard Animations Models Remixed Data Visualization

  17. 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

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

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

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

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

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

  23. 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;

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

  25. Vector Animation Ball Drop

  26. 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

  27. What's a Sprite?

  28. 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

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

  30. Sprites with Discrete Keyframes

  31. Sprites with Discrete Keyframes

  32. Sprite Animation Dog Walk

  33. Sprites with Visibility

  34. Sprites with Visibility • Images are added in XAML

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

  36. Sprite Animation Space Marine

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

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

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

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

  41. Sprite Animation Visual State Manager

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

  43. 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

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

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

  46. 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);

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

  48. 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); • }

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

More Related