![Page 1: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/1.jpg)
![Page 2: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/2.jpg)
Principles of Microsoft Silverlight Animation
Jeff PariesSr. Experience DeveloperWaggener Edstrom WorldwideAuthor: Foundation Silverlight 2 Animation
![Page 3: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/3.jpg)
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
![Page 4: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/4.jpg)
Session Topics
Storyboards, animations, and keyframesVectorsFrame-based animationsParticle systemsVR objects
![Page 5: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/5.jpg)
Where Do Storyboards Come From?
![Page 6: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/6.jpg)
Where Do Storyboards Come From?
![Page 7: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/7.jpg)
Where Do Storyboards Come From?
<Storyboard x:Name="Storyboard1"/>
![Page 8: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/8.jpg)
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
![Page 9: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/9.jpg)
Where Do Animations Come From?
![Page 10: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/10.jpg)
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>
![Page 11: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/11.jpg)
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
![Page 12: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/12.jpg)
Where Do Animations Come From?
Each animation type has two variations
From/toUsingKeyframes
![Page 13: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/13.jpg)
Where Do Keyframes Come From?
<SplineDoubleKeyFrame KeyTime="00:00:01"
Value="370"/>
![Page 14: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/14.jpg)
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
![Page 15: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/15.jpg)
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"/>
![Page 16: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/16.jpg)
Keyframe Types
LinearSplineDiscrete
![Page 17: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/17.jpg)
Storyboard AnimationsModels RemixedData Visualization
![Page 18: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/18.jpg)
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
![Page 19: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/19.jpg)
Vector Movement (1D)
LayoutRoot Canvas
0,0+X
+Y
X Velocity = 1
![Page 20: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/20.jpg)
Vector Movement (2D)
LayoutRoot Canvas
0,0+X
+Y
X Velocity = 1
Y Velocity = -2
![Page 21: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/21.jpg)
Changing Vector Direction
LayoutRoot Canvas
0,0+X
+Y
5,-5 5,5
Multiply the Y component by -1 to reverse direction
![Page 22: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/22.jpg)
Using vectors in C#Create/assign vector variables
private Point ObjPosition;private double VelocityX = 1;private double VelocityY = -2;
![Page 23: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/23.jpg)
Using vectors in C#The event handler
private void Move_Completed(object sender, EventArgs e){
}
![Page 24: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/24.jpg)
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;
![Page 25: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/25.jpg)
Using vectors in C#Restart the timer
Move.Begin();
![Page 26: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/26.jpg)
Vector Animation
Ball Drop
![Page 27: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/27.jpg)
What is Frame-Based Animation?
Imitates original “flipbook” techniquesAccessible via
StoryboardsVisual State ManagerCode
Complex frame-based animation (i.e., characters) requires planning
![Page 28: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/28.jpg)
What's a Sprite?
![Page 29: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/29.jpg)
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
![Page 30: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/30.jpg)
Sprites with Discrete Keyframes
A series of images that depict the desired actionImages are alignedTranslated at some interval
![Page 31: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/31.jpg)
Sprites with Discrete Keyframes
![Page 32: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/32.jpg)
Sprites with Discrete Keyframes
![Page 33: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/33.jpg)
Sprite Animation
Dog Walk
![Page 34: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/34.jpg)
Sprites with Visibility
![Page 35: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/35.jpg)
Sprites with Visibility
Images are added in XAML
![Page 36: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/36.jpg)
Sprites with Visibility
Use a storyboard to change frames
![Page 37: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/37.jpg)
Sprite Animation
Space Marine
![Page 38: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/38.jpg)
Movement Flow ChartLinear
Goes directly from one move to another in a fixed orderLimits options (cannot Jump from Idle)
Idle Walk Run Jump
![Page 39: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/39.jpg)
Movement Flow ChartRadial
Less restrictive, but still limiting
Idle Walk
Run
Jump
![Page 40: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/40.jpg)
Movement Flow ChartDescending
Idle
Walk Run Jump HitGet Hit
(Run) (Idle) (Walk) (Jump) (Get Hit) Die
![Page 41: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/41.jpg)
Movement Flow ChartCondescending
Me
Ex-Wife
Boss
Wife
Mother-in-Law
Dad
![Page 42: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/42.jpg)
Sprite Animation
Visual State Manager
![Page 43: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/43.jpg)
Particle Systems
Often used to model “fuzzy” objectsFireSmokeExplosionsWater
![Page 44: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/44.jpg)
Basic Model for Particle System
For each unit of time that passesNew particles may be createdOld particles are conditionally removedExisting particle positions are updated
![Page 45: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/45.jpg)
What the Model Looks Like in C#The event handlerprivate void MoveParticles(object sender, EventArgs e){
}
![Page 46: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/46.jpg)
What the Model Looks Like in C#Iterate through all available particlesfor (int i = 0; i < Particles.Count; i++){
}
![Page 47: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/47.jpg)
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);
![Page 48: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/48.jpg)
What the Model Looks Like in C#Update the particle ageParticles[i].Age += 1;
![Page 49: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/49.jpg)
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);}
![Page 50: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/50.jpg)
What the Model Looks Like in C#Restart the timerMove.Begin();
![Page 51: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/51.jpg)
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();}
![Page 52: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/52.jpg)
Particles
Basic System
![Page 53: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/53.jpg)
Interesting Particle Systems
Randomize! ColorsScaleLife spansVelocity
Use storyboards for secondary animationLet the user modify the systemUse emitters
![Page 54: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/54.jpg)
What Particle Emitters Do
Define shape/area of systemPointRectangle (bounding box)
Can be animated
![Page 55: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/55.jpg)
How to Implement an Emitter
Name your emitter objectGenerate particles based on object location
LayoutRoot
Emitter
![Page 56: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/56.jpg)
Emitter-based Particle SystemsCometFountain
![Page 57: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/57.jpg)
Silverlight VR (SLVR) Objects
Like frame-based animations, but user controlledAllow users to explore objects online
360° viewProduct assemblyProduct packagingTime-lapse
![Page 58: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/58.jpg)
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
![Page 59: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/59.jpg)
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
![Page 60: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/60.jpg)
Types of VR Objects
Single row (or plane)
![Page 61: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/61.jpg)
Types of VR Objects
Multi-row (or plane)
![Page 62: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/62.jpg)
Getting VR Images
3-D Rendering programSelf-shot photographyProfessional service like PhotoSpherix
Use stable, specialized rigsShoot to precise requirementsMultiple planes
![Page 63: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/63.jpg)
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”
![Page 64: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/64.jpg)
Contact Sheet
![Page 65: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/65.jpg)
The SLVR Control
ImageControl CanvasMouseControl RectangleActiveImage Image
![Page 66: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/66.jpg)
![Page 67: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/67.jpg)
SLVR Objects
Single plane (Bed)Multi-plane (Mini Cooper)
![Page 68: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/68.jpg)
Thank You
Q&A
![Page 69: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/69.jpg)
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
![Page 70: Principles of Microsoft Silverlight Animation](https://reader036.vdocuments.us/reader036/viewer/2022062418/55669649d8b42a51558b5355/html5/thumbnails/70.jpg)
© 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.