70

Principles of Microsoft Silverlight Animation

Embed Size (px)

DESCRIPTION

Come and learn the fundamentals of Silverlight animation. Start at the beginning with a review of storyboards and keyframes, and then break free from storyboards and explore procedural animations. This is where the rubber meets the road and your objects come to life-vectors, frame-based animations, collisions, particle systems, and VR objects.

Citation preview

Page 1: Principles of Microsoft Silverlight Animation
Page 2: Principles of Microsoft Silverlight Animation

Principles of Microsoft Silverlight Animation

Jeff PariesSr. Experience DeveloperWaggener Edstrom WorldwideAuthor: Foundation Silverlight 2 Animation

Page 3: Principles of Microsoft Silverlight 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

Page 4: Principles of Microsoft Silverlight Animation

Session Topics

Storyboards, animations, and keyframesVectorsFrame-based animationsParticle systemsVR objects

Page 5: Principles of Microsoft Silverlight Animation

Where Do Storyboards Come From?

Page 6: Principles of Microsoft Silverlight Animation

Where Do Storyboards Come From?

Page 7: Principles of Microsoft Silverlight Animation

Where Do Storyboards Come From?

<Storyboard x:Name="Storyboard1"/>

Page 8: Principles of Microsoft Silverlight Animation

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

Where Do Animations Come From?

Page 10: Principles of Microsoft Silverlight Animation

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

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

Where Do Animations Come From?

Each animation type has two variations

From/toUsingKeyframes

Page 13: Principles of Microsoft Silverlight Animation

Where Do Keyframes Come From?

<SplineDoubleKeyFrame KeyTime="00:00:01"

Value="370"/>

Page 14: Principles of Microsoft Silverlight Animation

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

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

Keyframe Types

LinearSplineDiscrete

Page 17: Principles of Microsoft Silverlight Animation

Storyboard AnimationsModels RemixedData Visualization

Page 18: Principles of Microsoft Silverlight Animation

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

Vector Movement (1D)

LayoutRoot Canvas

0,0+X

+Y

X Velocity = 1

Page 20: Principles of Microsoft Silverlight Animation

Vector Movement (2D)

LayoutRoot Canvas

0,0+X

+Y

X Velocity = 1

Y Velocity = -2

Page 21: Principles of Microsoft Silverlight Animation

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

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

Using vectors in C#The event handler

private void Move_Completed(object sender, EventArgs e){

}

Page 24: Principles of Microsoft Silverlight Animation

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

Using vectors in C#Restart the timer

Move.Begin();

Page 26: Principles of Microsoft Silverlight Animation

Vector Animation

Ball Drop

Page 27: Principles of Microsoft Silverlight Animation

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

What's a Sprite?

Page 29: Principles of Microsoft Silverlight Animation

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

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

Sprites with Discrete Keyframes

Page 32: Principles of Microsoft Silverlight Animation

Sprites with Discrete Keyframes

Page 33: Principles of Microsoft Silverlight Animation

Sprite Animation

Dog Walk

Page 34: Principles of Microsoft Silverlight Animation

Sprites with Visibility

Page 35: Principles of Microsoft Silverlight Animation

Sprites with Visibility

Images are added in XAML

Page 36: Principles of Microsoft Silverlight Animation

Sprites with Visibility

Use a storyboard to change frames

Page 37: Principles of Microsoft Silverlight Animation

Sprite Animation

Space Marine

Page 38: Principles of Microsoft Silverlight Animation

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

Movement Flow ChartRadial

Less restrictive, but still limiting

Idle Walk

Run

Jump

Page 40: Principles of Microsoft Silverlight Animation

Movement Flow ChartDescending

Idle

Walk Run Jump HitGet Hit

(Run) (Idle) (Walk) (Jump) (Get Hit) Die

Page 41: Principles of Microsoft Silverlight Animation

Movement Flow ChartCondescending

Me

Ex-Wife

Boss

Wife

Mother-in-Law

Dad

Page 42: Principles of Microsoft Silverlight Animation

Sprite Animation

Visual State Manager

Page 43: Principles of Microsoft Silverlight Animation

Particle Systems

Often used to model “fuzzy” objectsFireSmokeExplosionsWater

Page 44: Principles of Microsoft Silverlight Animation

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

What the Model Looks Like in C#The event handlerprivate void MoveParticles(object sender, EventArgs e){

}

Page 46: Principles of Microsoft Silverlight Animation

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

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

What the Model Looks Like in C#Update the particle ageParticles[i].Age += 1;

Page 49: Principles of Microsoft Silverlight Animation

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

What the Model Looks Like in C#Restart the timerMove.Begin();

Page 51: Principles of Microsoft Silverlight Animation

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

Particles

Basic System

Page 53: Principles of Microsoft Silverlight Animation

Interesting Particle Systems

Randomize! ColorsScaleLife spansVelocity

Use storyboards for secondary animationLet the user modify the systemUse emitters

Page 54: Principles of Microsoft Silverlight Animation

What Particle Emitters Do

Define shape/area of systemPointRectangle (bounding box)

Can be animated

Page 55: Principles of Microsoft Silverlight Animation

How to Implement an Emitter

Name your emitter objectGenerate particles based on object location

LayoutRoot

Emitter

Page 56: Principles of Microsoft Silverlight Animation

Emitter-based Particle SystemsCometFountain

Page 57: Principles of Microsoft Silverlight Animation

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

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

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

Types of VR Objects

Single row (or plane)

Page 61: Principles of Microsoft Silverlight Animation

Types of VR Objects

Multi-row (or plane)

Page 62: Principles of Microsoft Silverlight Animation

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

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

Contact Sheet

Page 65: Principles of Microsoft Silverlight Animation

The SLVR Control

ImageControl CanvasMouseControl RectangleActiveImage Image

Page 66: Principles of Microsoft Silverlight Animation
Page 67: Principles of Microsoft Silverlight Animation

SLVR Objects

Single plane (Bed)Multi-plane (Mini Cooper)

Page 68: Principles of Microsoft Silverlight Animation

Thank You

Q&A

Page 69: Principles of Microsoft Silverlight Animation

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

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