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.