0 comments
.NET 
One of the more difficult parts of silverlight and WPF I think to learn is how animation works and how you can combine various animations into one single fluent motion on screen. In this article I am going to show you a simple set of helper methods I created to make animation of silverlight elements simpler to use when you don't work with animation defined in XAML but in C#.
Basic idea
The basic idea behind this is that you should be able to call Move() on an object with a new location and possibly a duration how long it should take to get there. There are many more things you can think of that should be possible with such a scheme. The developer in this case should be able to perform just simple operations on an element to perform an animation.
When I was thinking about this I came up with a second principle that I think should be possible. One animation often isn't enough and it should be possible to chain several animations together in a single fluent motion. For this I have the following scheme in mind: object.Move().Rotate().FadeOut().Play()
With these two basics in mind I moved on and created a very simple framework that would allow me to do this. It's nothing fancy and I probably have to refactor it to allow me to add more features to it. The basic idea however is there and it should work for most scenarios.
How does it work
With the framework you can create fully chained animations with just one line of code and a bit of XAML to define the general layout of course. A sample of how the framework works is shown below.
1: animationSubject.Move(new Point(280, 31), TimeSpan.Parse("0:0:0.500"))
2: .Rotate(360, TimeSpan.Parse("0:0:0.500")).FadeOut(TimeSpan.Parse("0:0:2")).Play();
What the framework does when you invoke Move() or Rotate(), is create a new animation node with the settings you provided. It returns the new node, so you can either chain the next node to that one, or specify more settings for the node you just generated.
The final call in the chain is always Play(), this will build a new storyboard containing the required animations that are defined by the animation nodes that have been chained together. This is done using a AnimationNodeVisitor class that is responsible for building the new storyboard for the animation.
When you want to know more
The sourcecode for the framework is attached to this post, so you can download it and try it out in your own silverlight application. I would love to hear new ideas on how the framework can be extended and what is missing from it now.