Principles of Microsoft Silverlight Animation
Jeff PariesSr. Experience DeveloperWaggener Edstrom WorldwideAuthor: 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.”
- Maciej Misztal, 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
Session Topics
Storyboards, animations, and keyframesVectorsFrame-based animationsParticle systemsVR objects
Where Do Storyboards Come From?
Where Do Storyboards Come From?
Where Do Storyboards Come From?
<Storyboard x:Name="Storyboard1"/>
Where Do Storyboards Come From?
Are containersCan contain many animationsCan be left empty (used as timers)
<Storyboard x:Name="Move" Duration="00:00:00"/>
Can also be created in code
Where Do Animations Come From?
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>
Where Do Animations Come From?
Are placed inside Storyboard containersUsed to change object properties over timeAnimation 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
Where Do Animations Come From?
Each animation type has two variations
From/toUsingKeyframes
Where Do Keyframes Come From?
<SplineDoubleKeyFrame KeyTime="00:00:01"
Value="370"/>
Where Do Keyframes Come From?
There are three types of keyframesLinear (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
Where Do Keyframes Come From?
<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"/>
<LinearDoubleKeyFrame KeyTime="00:00:01" Value="370"/>
Keyframe Types
LinearSplineDiscrete
Storyboard AnimationsModels RemixedData Visualization
What's a Vector?
Are a key component of procedural animationDescribe direction and distance independent of timeVector movement is simple – for each unit of time that passes, add the vector components to the object’s XY position
Vector Movement (1D)
LayoutRoot Canvas
0,0+X
+Y
X Velocity = 1
Vector Movement (2D)
LayoutRoot Canvas
0,0+X
+Y
X Velocity = 1
Y Velocity = -2
Changing Vector Direction
LayoutRoot Canvas
0,0+X
+Y
5,-5 5,5
Multiply the Y component by -1 to reverse direction
Using vectors in C#Create/assign vector variables
private Point ObjPosition;private double VelocityX = 1;private double VelocityY = -2;
Using vectors in C#The event handler
private void Move_Completed(object sender, EventArgs e){
}
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;
Using vectors in C#Restart the timer
Move.Begin();
Vector Animation
Ball Drop
What is Frame-Based Animation?
Imitates original “flipbook” techniquesAccessible via
StoryboardsVisual State ManagerCode
Complex frame-based animation (i.e., characters) requires planning
What's a Sprite?
What's a Sprite?
A 2D or 3D image or animation that becomes part of a larger sceneFirst used in the mid-70’s, still in useMethods of producing sprite content
Rotoscoping live video (blue screen)Claymation 3D softwareVector artwork
Sprites with Discrete Keyframes
A series of images that depict the desired actionImages are alignedTranslated at some interval
Sprites with Discrete Keyframes
Sprites with Discrete Keyframes
Sprite Animation
Dog Walk
Sprites with Visibility
Sprites with Visibility
Images are added in XAML
Sprites with Visibility
Use a storyboard to change frames
Sprite Animation
Space Marine
Movement Flow ChartLinear
Goes directly from one move to another in a fixed orderLimits options (cannot Jump from Idle)
Idle Walk Run Jump
Movement Flow ChartRadial
Less restrictive, but still limiting
Idle Walk
Run
Jump
Movement Flow ChartDescending
Idle
Walk Run Jump HitGet Hit
(Run) (Idle) (Walk) (Jump) (Get Hit) Die
Movement Flow ChartCondescending
Me
Ex-Wife
Boss
Wife
Mother-in-Law
Dad
Sprite Animation
Visual State Manager
Particle Systems
Often used to model “fuzzy” objectsFireSmokeExplosionsWater
Basic Model for Particle System
For each unit of time that passesNew particles may be createdOld particles are conditionally removedExisting particle positions are updated
What the Model Looks Like in C#The event handlerprivate void MoveParticles(object sender, EventArgs e){
}
What the Model Looks Like in C#Iterate through all available particlesfor (int i = 0; i < Particles.Count; i++){
}
What the model Looks Like in C#Update the position of the particleCanvas.SetLeft(Particles[i], Canvas.GetLeft(Particles[i]) + Particles[i].Velocity.X);
Canvas.SetTop(Particles[i], Canvas.GetTop(Particles[i]) + Particles[i].Velocity.Y);
What the Model Looks Like in C#Update the particle ageParticles[i].Age += 1;
What the Model Looks Like in C#Evaluate age and actif (Particles[i].Age >= Particles[i].LifeSpan){ LayoutRoot.Children.Remove(Particles[i]);
Particles.Remove(Particles[i]);
CreateParticles(1);}
What the Model Looks Like in C#Restart the timerMove.Begin();
What the Model Looks Like in C#The complete function
private void MoveParticles(object sender, EventArgs e){ for (int i = 0; i < Particles.Count; i++) { Canvas.SetLeft(Particles[i],
Canvas.GetLeft(Particles[i]) + Particles[i].Velocity.X); Canvas.SetTop(Particles[i],
Canvas.GetTop(Particles[i]) + Particles[i].Velocity.Y);
Particles[i].Age += 1;
if (Particles[i].Age >= Particles[i].LifeSpan) { LayoutRoot.Children.Remove(Particles[i]); Particles.Remove(Particles[i]); CreateParticles(1); } } Move.Begin();}
Particles
Basic System
Interesting Particle Systems
Randomize! ColorsScaleLife spansVelocity
Use storyboards for secondary animationLet the user modify the systemUse emitters
What Particle Emitters Do
Define shape/area of systemPointRectangle (bounding box)
Can be animated
How to Implement an Emitter
Name your emitter objectGenerate particles based on object location
LayoutRoot
Emitter
Emitter-based Particle SystemsCometFountain
Silverlight VR (SLVR) Objects
Like frame-based animations, but user controlledAllow users to explore objects online
360° viewProduct assemblyProduct packagingTime-lapse
VR Object Approaches
“Flipbook”Load all individual imagesFlip forward or backward like a deck of cardsWhy it’s not ideal
Managing images becomes cumbersomeTakes too long to set up new items
VR Object Approaches
Single image translationLoad single image consisting of all framesUser controls the image translationWhy it’s a better choice
Single imageEasy to set up
Types of VR Objects
Single row (or plane)
Types of VR Objects
Multi-row (or plane)
Getting VR Images
3-D Rendering programSelf-shot photographyProfessional service like PhotoSpherix
Use stable, specialized rigsShoot to precise requirementsMultiple planes
I have a lot of images Now what?
Single plane = 10+ images in a single rowMulti-plane = 10+ images per row X 5+ rowsUse a program like Adobe Photoshop or Irfanview to assemble a “Contact Sheet”
Contact Sheet
The SLVR Control
ImageControl CanvasMouseControl RectangleActiveImage Image
SLVR Objects
Single plane (Bed)Multi-plane (Mini Cooper)
Thank You
Q&A
Please Complete an Evaluation FormYour feedback is important!
Please see the back of your attendee notebook for evaluation formsTemp Staff at the back of the room have additional evaluation form copies
© 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after
the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
Top Related