Use of Motion Path in Expression Blend 4

Step 1
 
Open Expression Blend 4 -> select WPF -> select WPF Application, change the Name and Location accordingly -> hit OK, a Blank Window appears.
 
Step 2
 
Select Wrap Panel Tool from the ToolBox located to the Left Side of the Workspace, draw a Wrap Panel, manage the width & height, background color, margin and alignment. Have a look at the coding also as shown below:


WrapPanel-in-expression-blend4.png

Step 3
 

Select Ellipse from the ToolBox, draw an ellipse, manage the width & height, background color, margin, stroke color, stroke thickness and alignment as shown below:

Ellipse-in-expression-blend4.png

Step 4
 

Select Ellipse -> select Object Menu -> select Path -> select Convert to Motion Path Option as shown below: 

ObjectMenu-in-expression-blend4.png

Step 5
 
A Dialog Box appears containing the options, Select Ellipse from Options and hit OK. Another ellipse appears with a dashed line in the form of an ellipse as shown below: 

DialogBox-in-expression-blend4.png

Dashed-Ellipse-in-expression-blend4.png

Step 6
 

The Magic is here, when we choose the Convert to Motion Path Option the Storyboard Timeline Window appears automatically which is used for the animation.
 
Step 7
 
When we play the animation, everytime the dashed ellipse revolves with the ellipse as shown below:

DashedAniamtio1-in-expression-blend4.png

DashedAnimatio2-in-expression-blend4.png

DashedAnimatio3-in-expression-blend4.png

Summary
 
This article shows us the use of animation in a different way.


Similar Articles