slide1
Download
Skip this Video
Download Presentation
Principles of Microsoft Silverlight Animation

Loading in 2 Seconds...

play fullscreen
1 / 70

t12f: principles of microsoft silverlight animation - PowerPoint PPT Presentation


  • 162 Views
  • Uploaded 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 't12f: 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

Principles of Microsoft Silverlight Animation

Jeff Paries

Sr. Experience Developer

Waggener Edstrom Worldwide

Author: Foundation Silverlight 2 Animation

shameless plug
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
Session Topics
  • Storyboards, animations, and keyframes
  • Vectors
  • Frame-based animations
  • Particle systems
  • VR objects
where do storyboards come from7
Where Do Storyboards Come From?
  • <Storyboard x:Name="Storyboard1"/>
where do storyboards come from8
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
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
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
Where Do Animations Come From?
  • Each animation type has two variations
    • From/to
    • UsingKeyframes
where do keyframes come from
Where Do Keyframes Come From?
  • <SplineDoubleKeyFrame KeyTime="00:00:01"
  • Value="370"/>
where do keyframes come from14
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
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

Keyframe Types

Linear

Spline

Discrete

storyboard animations

Storyboard Animations

Models Remixed

Data Visualization

what s a vector
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
Vector Movement (1D)

0,0

+X

X Velocity = 1

+Y

LayoutRoot Canvas

vector movement 2d
Vector Movement (2D)

0,0

+X

X Velocity = 1

Y Velocity = -2

+Y

LayoutRoot Canvas

changing vector direction
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
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
Using vectors in C#The event handler
  • privatevoidMove_Completed(objectsender, EventArgs e)
  • {
  • }
using vectors in c update the object s position
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;
what is frame based animation
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
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
Sprites with Discrete Keyframes
  • A series of images that depict the desired action
  • Images are aligned
  • Translated at some interval
sprites with visibility35
Sprites with Visibility
  • Images are added in XAML
sprites with visibility36
Sprites with Visibility
  • Use a storyboard to change frames
sprite animation37

Sprite Animation

Space Marine

movement flow chart linear
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
Movement Flow ChartRadial
  • Less restrictive, but still limiting

Jump

Idle

Walk

Run

movement flow chart descending
Movement Flow ChartDescending

Idle

Walk

Run

Jump

Hit

Get Hit

(Run)

(Idle)

(Walk)

(Jump)

(Get Hit)

Die

movement flow chart condescending
Movement Flow ChartCondescending

Wife

Boss

Mother-in-Law

Ex-Wife

Dad

Me

sprite animation42

Sprite Animation

Visual State Manager

particle systems
Particle Systems
  • Often used to model “fuzzy” objects
    • Fire
    • Smoke
    • Explosions
    • Water
basic model for particle system
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
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
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
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 evaluate age and act
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 the complete function
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

Particles

Basic System

interesting particle systems
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
What Particle Emitters Do
  • Define shape/area of system
    • Point
    • Rectangle (bounding box)
  • Can be animated
how to implement an emitter
How to Implement an Emitter
  • Name your emitter object
  • Generate particles based on object location

Emitter

LayoutRoot

silverlight vr slvr objects
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
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
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
Types of VR Objects
  • Single row (or plane)
types of vr objects61
Types of VR Objects
  • Multi-row (or plane)
getting vr images
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
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
The SLVR Control

MouseControl Rectangle

ImageControl Canvas

ActiveImage Image

slvr objects

SLVR Objects

Single plane (Bed)

Multi-plane (Mini Cooper)

slide69

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

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

ad