Introduction
Silverlight provides a good animation foundation, but lacks a convenient method to animate an object along an arbitrary geometric path. Windows Presentation Foundation, which is a superset of Silverlight, provides the animation classes, DoubleAnimationUsingPath and PointAnimationUsingPath. With these classes, it is easy to animate an object along a geometric path. This article provides the equivalent animation classes for Silverlight. I suspect future versions of Silverlight will provide this functionality, but until then, the code provided here will do the job.
Background
Currently, Silverlight does not provide animation classes for animating an object along an arbitrary geometric path, but Silverlight does provide key frame animation classes. With the key frame animation classes, you specify beginning and ending values, and then the animation class uses interpolation to calculate all the values in between. A collection of key frames can be assembled together to describe a motion path, but manually building these key frames for each motion path is tedious.
To programmatically generate the key frames describing the motion path, a method to ‘flatten’ the geometric path is needed. Flattening basically means the geometry is described by a series of line segments. The figure below shows an example of a flattened Bezier segment. Once we have the flattened path, then we can easily build the key frames for the storyboard.
About the Code
The heart of the code is contained in the ‘PathAnimation’ project. In this project, the abstract BaseAnimationUsingPath class defines a number of dependency properties to control the animation (see below). Notice that this class inherits form DependencyObject rather than a Silverlight animation class. This is because most of the animation classes in Silverlight are sealed, and not extendable like the WPF animation classes. This has implications for the usage of the DoubleAnimationUsingPath and PointAnimationUsingPath animation classes, like they cannot be added to a Storyboard! They can be added as a Resource or created in the code-behind (example provided in the demo app).
The other important project here is ‘PathGeometryHelper’. This project implements the path flattening routine. Charles Petzold developed a path flattening method in his article and gave permission to reuse the code. Charles’ method was written for WPF, and so it needed to be ported to Silverlight. In porting this code to Silverlight, more missing functionality was found. Namely, Silverlight lacks some methods in the Matrix class. Also, Silverlight has no Vector class. Equivalent functionality for these classes (and a few others) has been provided in the ‘MatrixMathHelpers’ project.
An important point to make about the flattening routine is the ‘Tolerance’ parameter. This parameter has been exposed all the way up to the path animation classes. Basically, this parameter controls the number of segments used to approximate the original geometry path. The tolerance value must be greater than zero. A smaller tolerance value will yield greater accuracy (i.e., more line segments), and a larger value will yield less accuracy (i.e., poorer approximation of the geometry path). It is not recommended to make the tolerance too small because this will cause more key frames to be added to the storyboard, slow down the animation, and use too much memory. Play with the demo app and see how adjusting the tolerance affects the accuracy, but be careful not to set the value too small!
Another important piece of code is contained in PathConverter.cs. Currently, Silverlight has no built-in functionality to convert the mini-language string into a PathGeometry, but thankfully, a converter has been provided and included here in PathConverter.cs. With this handy converter, we can feed the animation classes arbitrarily complicated geometries created with Blend or other tools.
Using the Code
Two classes have been provided to animate an object along a geometric path: DoubleAnimationUsingPath and PointAnimationUsingPath. Both share a number of common dependency properties. These properties are equivalent to the Silverlight provided animation properties, so they should be familiar:
BeginTime: The time when the animation should startDuration: The duration/length of the animationAutoReverse: Reverses the animation at end when trueFillBehavior: Holds the value at the end of the animation, or resets to the value before the animation startedRepeatBehavior: Number of times to repeatPathGeometry: Specifies the geometry that the object will follow when animatingTargetProperty: The property to animateTarget: The name of the object to animateTolerance: Controls the accuracy of the path flattening; must be greater than zero; smaller values give more accuracy
In addition to the properties above, all of the standard animation methods: Begin, Stop, Pause, Resume, and Seek have been provided.
DoubleAnimationUsingPath will only animate object properties of type double (e.g., height, width, X, Y, etc.). This animation class has one additional dependency property: Source. The Source property specifies to use either the X or Y output value of the PathGeometry to drive the animation.
As discussed in the previous section, the animation classes provided here cannot be used in a Storyboard like other Silverlight animation classes. They can, though, be added as a Resource or created in the code-behind (see the demo app for an example).
History
- 9th November, 2008: Initial post
- 4th March, 2009: Code updates
- Add Completed Event to
Animation classes
- Added Angle to
DoubleAnimationUsingPath
| You must Sign In to use this message board. |
|
|
 |
 | test 
rahul jain | 15:48 23 Oct '09 |
|
|
|
|
|
Hi!
Great example, thanks! But there is some problem with Arc geometries. I'm getting NAN value here, because of the negative argument of the sqrt:
double centerDistance = Math.Sqrt(radiusY * radiusY - halfChord * halfChord);
any ideas on how to fix it?
Thanks again,
Vlad
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
|
|
|
|
|
|
Good qustion, I don't believe so but would check on forums page here at code project or on silverlight.net for a more definitive answer.
Lynn
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
It's great for me to implement pathanimation, but I need rotating animation as well as translate animation.
I added some codes to your work both sample and class.
here to download 
You can update your article if you want.
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
|
|
|
Great solution! Adding a Completed event is trivial and quite handy:
In BaseAnimationUsingPath.cs:
public event EventHandler Completed;
protected virtual void OnCompleted(EventArgs e)
{
if (Completed != null)
Completed(this, e);
}
In PointAnimationUsingPath.cs and DoubleAnimationUsingPath.cs, after Story is initialized in CreateStory():
Story.Completed += delegate(object sender, EventArgs e)
{
OnCompleted(e);
};
You might also want to implement INotifyPropertyChanged (you're really close already) to make data binding easier. I discuss one strategy here: http://solutionizing.net/2008/10/24/inotifypropertychanged-dependency-properties-for-silverlight-pathtextblock/
Cheers ~
Keith
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
|
|
|
First and foremost, this is a great piece of work!
One question/suggestion, why is that you decided not to derive from Timeline and instead derived from DO? I ask because ideally, in my humble opinion, it would be great if these path animations could be added to a storyboard object just like any other native animation. I guess it still could as is with something like myStoryBoard.Children.Add(myPathAnimation.Story) but I think I would have to tweak the code because the Story is null until Begin in invoked.
Great work!
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
Thanks for the feedback.
I briefly mentioned in article that in Silverlight you can not extend the Animation classes in Silverlight like you can in WPF. Currently, in Silverlight most of these classes are sealed or they provide no methods to override. I am hoping in future versions of Silverlight they will open the animation classes and make them extensible like WPF.
Lynn
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
|
|
|
The SpeedRatio parameter is not currently exposed but could easily be added. You can add another dependency property to the class 'BaseAnimationUsingPath' that exposes the property. Just follow the pattern of the other DPs in this class that expose the various storyboard/timeline properties.
Lynn
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
|
|
|
Hi Sir,
Just to let you that the purpose download of your article is the right one. After downloaded no way to find the functions that you describe in the articles. Can you send me the rigth folder please.
Thanks
Joel KPOHIHEIN
babatounde
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
Open the solution file in Visual Studio. You should see all the projects in the article mentioned there. The animation classes are in the 'PathAnimation' project.
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
Your article is very nice. Well done
"The clue train passed his station without stopping." - John Simmons / outlaw programmer
"Real programmers just throw a bunch of 1s and 0s at the computer to see what sticks" - Pete O'Hanlon
"Not only do you continue to babble nonsense, you can't even correctly remember the nonsense you babbled just minutes ago." - Rob Graham
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
Hi
Thanks for this. I havent read the hole article or tried it out yet, but if it works, which I think it do , it's great! I have been asking this question at Silverlight.net, but no one could answer it.
Can't wait to get home from work and try it out
//Qbus
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
As well, I have wanted for some time. Let me know what you think... and of course, let me know if you find any issues or improvements. Happy coding!
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
|
|
|
Ok tried your demo app, works great!
I have 2 question:
1. Right now the red box is moving on the Path with it's upper left corner. How do I make the box follow the Path at the center of the box? I tried to set the RenderOrigient or whats it's called, to 0.5,0.5 but it didn't work.
2. I tried to draw my own Path, and then put the MyPath.Data into the selectedGeo variable you have in there. But it didn't work. I needed to copy the Path data to your resource string there, and then it all worked. It's ok to copy the Path data to that resource string, but wouldn't it be nicer if you could just pass in your MyPath.Data to your new animation objects?
Let me know if im not making my self clear here....I'm pretty tired :P
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
1. This could be done in a number of different ways...but basically you just need to offset the position by half of the squares' width and height (i.e., center of the square). Probably the simpliest approach for the demo app (but not the best) is just to set TranslateTransform X/Y on the RenderTransform property.
2. I think you are getting the Silverlight elements confused a bit. Path is a UIElement object that is used to draw a geometry onto the screen. The variable selectedGeo (in the demo app), is of type Geometry. So, you can not directly use MyPath to set selectedGeo but (as you say) you can use Path.Data (because this is a Geometry). You could easily in code behind set the 'PathGeometry' property of the animation to MyPath.Data.
Hope that helps.
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
1. Ok.
2. As I sad I tried to set the selectedGeo = MyPath.Data, but it didn't work. But I will take a look at it later to day and see if I can make it work. I can show you the error/exception im getting then too.
|
| Sign In·View Thread·PermaLink | |
|
|
|
|
|
|
|
|
|
|
|
|
