AnimateTo extension methods in Silverlight 2 |
|
So, back from a fair long time of blog silence. Had some pretty busy weeks, with some very interesting projects. Among them I had the honor of working on the Olympics website (http://os2008.nos.nl) for the NOS (Dutch Broadcasting Company). I just wanted to mention it because I think the team over there did an excellent job, you can check it out yourself.
Since I have done lots of work with Silverlight 2 the past months, I wish to share with you some of the findings, and handy pieces of code I have gathered. I’ll start with the AnimateTo Extension methods I wrote for Silverlight UIElements and Transforms.
The reason I started writing these extensions was the frequency with which I needed to do simple animations, especially with transforms the result is fantastic.
The extensions methods can be used as follows:
// ————————————
// These examples create the elements only for
// demo purposes, normally you would use elements from XAML.
// ————————————
// This will fade out the rectangle, scale it to very small,
// and at the end set visibility to collapsed
Rectangle rectangle = new Rectangle();
rectangle.RenderTransform = new ScaleTransform();
rectangle.RenderTransformOrigin = new Point(0.5, 0.5);
rectangle.AnimateDoubleTo(300, "(UIElement.Opacity)", 0, null);
((ScaleTransform)rectangle.RenderTransform).AnimateTo(300, 0.1, 0.1, (sender, e) =>{
rectangle.Visibility = Visibility.Collapsed;
});
// This example will rotate an element for 30 degrees
// in 200 milliseconds and then rotate -30 degrees the
// other way
var rotateTransform = new RotateTransform();
rotateTransform.AnimateTo(200, 30, true, (sender,e) =>{
rotateTransform.AnimateTo(200, -30, true, null);
});
}
Below the AnimateTo Extention method for UIElements:
public static class UIElementExtentions
{
public static void AnimateDoubleTo(this UIElement element, int miliseconds, string propertyPath, double value, EventHandler completed)
{
// Create a new storyboard
var sb = new Storyboard();
// Create a double animation
var da = new DoubleAnimation();
da.Duration = new TimeSpan(0, 0, 0, 0, miliseconds);
// Set target property and target
Storyboard.SetTargetProperty(da, new PropertyPath(propertyPath));
Storyboard.SetTarget(da, element);
da.To = value;
// Add the doubleanimation to the storyboard
sb.Children.Add(da);
// Add the storyboard to the Rootvisual of the application
((FrameworkElement)Application.Current.RootVisual).Resources.Add(Guid.NewGuid().ToString(), sb);
// Begin the animation
sb.Begin();
if (completed != null)
sb.Completed += completed;
}
}
And here is the rest, without comments, because they are basicly the samen as the previous code:
public static class ScaleTransformExtentions
{
public static void AnimateTo(this ScaleTransform scaleTransform, int milliseconds, double scaleX, double scaleY, EventHandler completed)
{
var sb = new Storyboard();
var daX = new DoubleAnimation();
daX.Duration = new TimeSpan(0, 0, 0, 0, milliseconds);
Storyboard.SetTargetProperty(daX, new PropertyPath("(ScaleTransform.ScaleX)"));
Storyboard.SetTarget(daX, scaleTransform);
daX.To = scaleX;
var daY = new DoubleAnimation();
daY.Duration = new TimeSpan(0, 0, 0, 0, milliseconds);
Storyboard.SetTargetProperty(daY, new PropertyPath("(ScaleTransform.ScaleY)"));
Storyboard.SetTarget(daY, scaleTransform);
daY.To = scaleY;
sb.Children.Add(daX);
sb.Children.Add(daY);
((FrameworkElement)Application.Current.RootVisual).Resources.Add(Guid.NewGuid().ToString(), sb);
sb.Begin();
if (completed != null)
sb.Completed += completed;
}
}
public static class TranslateTransformExtentions
{
public static void AnimateTo(this TranslateTransform translateTransform, int milliseconds, double x, double y, EventHandler completed)
{
var sb = new Storyboard();
var daX = new DoubleAnimation();
daX.Duration = new TimeSpan(0, 0, 0, 0, milliseconds);
Storyboard.SetTargetProperty(daX, new PropertyPath("(TranslateTransform.X)"));
Storyboard.SetTarget(daX, translateTransform);
daX.To = x;
var daY = new DoubleAnimation();
daY.Duration = new TimeSpan(0, 0, 0, 0, milliseconds);
Storyboard.SetTargetProperty(daY, new PropertyPath("(TranslateTransform.Y)"));
Storyboard.SetTarget(daY, translateTransform);
daY.To = y;
sb.Children.Add(daX);
sb.Children.Add(daY);
((FrameworkElement)Application.Current.RootVisual).Resources.Add(Guid.NewGuid().ToString(), sb);
sb.Begin();
if (completed != null)
sb.Completed += completed;
}
}
public static class RotateTransformExtentions
{
public static void AnimateTo(this RotateTransform rotateTransform, int milliseconds, double angle, bool relative, EventHandler completed)
{
var sb = new Storyboard();
if (relative)
angle = rotateTransform.Angle + angle;
var da = new DoubleAnimation();
da.Duration = new TimeSpan(0, 0, 0, 0, milliseconds);
Storyboard.SetTargetProperty(da, new PropertyPath("(RotateTransform.Angle)"));
Storyboard.SetTarget(da, rotateTransform);
da.To = angle;
sb.Children.Add(da);
((FrameworkElement)Application.Current.RootVisual).Resources.Add(Guid.NewGuid().ToString(), sb);
sb.Begin();
if (completed != null)
sb.Completed += completed;
}
}
Have fun with it!
Robertjan Tuit
 RSS English
 RSS Nederlands
could you please post your visual studio’s color scheme?
It’s so easy on the eyes
[…] to give you something to animate. His post also made use of his excellent AnimateTo extension methods that he describes in another post. I’ll definitely be borrowing […]