T12f principles of microsoft silverlight animation
Download
1 / 70

Principles of Microsoft Silverlight Animation - PowerPoint PPT Presentation


  • 162 Views
  • Updated On :

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Principles of Microsoft Silverlight Animation' - Thomas


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Principles of microsoft silverlight animation l.jpg

Principles of Microsoft Silverlight Animation

Jeff Paries

Sr. Experience Developer

Waggener Edstrom Worldwide

Author: Foundation Silverlight 2 Animation


Shameless plug l.jpg
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


Session topics l.jpg
Session Topics

  • Storyboards, animations, and keyframes

  • Vectors

  • Frame-based animations

  • Particle systems

  • VR objects




Where do storyboards come from7 l.jpg
Where Do Storyboards Come From?

  • <Storyboard x:Name="Storyboard1"/>


Where do storyboards come from8 l.jpg
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



Where do animations come from10 l.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>


Where do animations come from11 l.jpg
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


Where do animations come from12 l.jpg
Where Do Animations Come From?

  • Each animation type has two variations

    • From/to

    • UsingKeyframes


Where do keyframes come from l.jpg
Where Do Keyframes Come From?

  • <SplineDoubleKeyFrame KeyTime="00:00:01"

  • Value="370"/>


Where do keyframes come from14 l.jpg
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


Where do keyframes come from15 l.jpg
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"/>


Keyframe types l.jpg

Keyframe Types

Linear

Spline

Discrete


Storyboard animations l.jpg

Storyboard Animations

Models Remixed

Data Visualization


What s a vector l.jpg
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


Vector movement 1d l.jpg
Vector Movement (1D)

0,0

+X

X Velocity = 1

+Y

LayoutRoot Canvas


Vector movement 2d l.jpg
Vector Movement (2D)

0,0

+X

X Velocity = 1

Y Velocity = -2

+Y

LayoutRoot Canvas


Changing vector direction l.jpg
Changing Vector Direction

0,0

+X

5,-5

5,5

Multiply the Y component by -1 to reverse direction

+Y

LayoutRoot Canvas


Using vectors in c create assign vector variables l.jpg
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 l.jpg
Using vectors in C#The event handler

  • privatevoidMove_Completed(objectsender, EventArgs e)

  • {

  • }


Using vectors in c update the object s position l.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;


Using vectors in c restart the timer l.jpg
Using vectors in C#Restart the timer

  • Move.Begin();


Vector animation l.jpg

Vector Animation

Ball Drop


What is frame based animation l.jpg
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



What s a sprite29 l.jpg
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


Sprites with discrete keyframes l.jpg
Sprites with Discrete Keyframes

  • A series of images that depict the desired action

  • Images are aligned

  • Translated at some interval






Sprites with visibility35 l.jpg
Sprites with Visibility

  • Images are added in XAML


Sprites with visibility36 l.jpg
Sprites with Visibility

  • Use a storyboard to change frames


Sprite animation37 l.jpg

Sprite Animation

Space Marine


Movement flow chart linear l.jpg
Movement Flow ChartLinear

  • Goes directly from one move to another in a fixed order

  • Limits options (cannot Jump from Idle)

Idle

Walk

Run

Jump


Movement flow chart radial l.jpg
Movement Flow ChartRadial

  • Less restrictive, but still limiting

Jump

Idle

Walk

Run


Movement flow chart descending l.jpg
Movement Flow ChartDescending

Idle

Walk

Run

Jump

Hit

Get Hit

(Run)

(Idle)

(Walk)

(Jump)

(Get Hit)

Die


Movement flow chart condescending l.jpg
Movement Flow ChartCondescending

Wife

Boss

Mother-in-Law

Ex-Wife

Dad

Me


Sprite animation42 l.jpg

Sprite Animation

Visual State Manager


Particle systems l.jpg
Particle Systems

  • Often used to model “fuzzy” objects

    • Fire

    • Smoke

    • Explosions

    • Water


Basic model for particle system l.jpg
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


What the model looks like in c the event handler l.jpg
What the Model Looks Like in C#The event handler

  • private void MoveParticles(object sender, EventArgs e)

  • {

  • }


What the model looks like in c iterate through all available particles l.jpg
What the Model Looks Like in C#Iterate through all available particles

  • for (inti = 0; i <

  • Particles.Count; i++)

  • {

  • }


What the model looks like in c update the position of the particle l.jpg
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);


What the model looks like in c update the particle age l.jpg
What the Model Looks Like in C#Update the particle age

  • Particles[i].Age += 1;


What the model looks like in c evaluate age and act l.jpg
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);

  • }


What the model looks like in c restart the timer l.jpg
What the Model Looks Like in C#Restart the timer

  • Move.Begin();


What the model looks like in c the complete function l.jpg
What the Model Looks Like in C#The complete function

  • private void MoveParticles(object sender, EventArgs e)

  • {

  • for (inti = 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 l.jpg

Particles

Basic System


Interesting particle systems l.jpg
Interesting Particle Systems

  • Randomize!

    • Colors

    • Scale

    • Life spans

    • Velocity

  • Use storyboards for secondary animation

  • Let the user modify the system

  • Use emitters


What particle emitters do l.jpg
What Particle Emitters Do

  • Define shape/area of system

    • Point

    • Rectangle (bounding box)

  • Can be animated


How to implement an emitter l.jpg
How to Implement an Emitter

  • Name your emitter object

  • Generate particles based on object location

Emitter

LayoutRoot


Emitter based particle systems l.jpg

Emitter-based Particle Systems

Comet

Fountain


Silverlight vr slvr objects l.jpg
Silverlight VR (SLVR) Objects

  • Like frame-based animations, but user controlled

  • Allow users to explore objects online

    • 360° view

    • Product assembly

    • Product packaging

    • Time-lapse


Vr object approaches l.jpg
VR Object Approaches

  • “Flipbook”

    • Load all individual images

    • Flip forward or backward like a deck of cards

    • Why it’s not ideal

      • Managing images becomes cumbersome

      • Takes too long to set up new items


Vr object approaches59 l.jpg
VR Object Approaches

  • Single image translation

    • Load single image consisting of all frames

    • User controls the image translation

    • Why it’s a better choice

      • Single image

      • Easy to set up


Types of vr objects l.jpg
Types of VR Objects

  • Single row (or plane)


Types of vr objects61 l.jpg
Types of VR Objects

  • Multi-row (or plane)


Getting vr images l.jpg
Getting VR Images

  • 3-D Rendering program

  • Self-shot photography

  • Professional service like PhotoSpherix

    • Use stable, specialized rigs

    • Shoot to precise requirements

    • Multiple planes


I have a lot of images now what l.jpg
I have a lot of images Now what?

  • Single plane = 10+ images in a single row

  • Multi-plane = 10+ images per row X 5+ rows

  • Use a program like Adobe Photoshop or Irfanview to assemble a “Contact Sheet”



The slvr control l.jpg
The SLVR Control

MouseControl Rectangle

ImageControl Canvas

ActiveImage Image


Slvr objects l.jpg

SLVR Objects

Single plane (Bed)

Multi-plane (Mini Cooper)



Slide69 l.jpg

Please Complete an Evaluation FormYour feedback is important!

  • Please see the back of your attendee notebook for evaluation forms

  • Temp Staff at the back of the room have additional evaluation form copies


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