Unfortunately, I won’t be providing the in depth look at my recent Silverlight project that I promised earlier. It still hasn’t been shown to our prospective customer and it wouldn’t be appropriate to show it publically before that.
Instead, I’ll be breaking down some of the lessons I learned from the project into little segments like this. At one point in the project I wanted to do a more advanced color animation than color to color.
After the jump
Juicy code… and Superman in bondage.
I wanted to do this animation at runtime. I’ve noticed that XAML is great when you know exactly which pre-created object you want to animate in a pre-determined way. If you however haven’t created the object yet or want to use some custom parameters, using C# code can sometimes be a better way to achieve your goals.
SolidColorBrush brushDetail = new SolidColorBrush(); Storyboard DetailAni = new Storyboard(); Storyboard.SetTargetProperty(DetailAni, new PropertyPath("Color")); Storyboard.SetTarget(DetailAni, brushDetail);
Here we see a few declarations. We create a SolidColorBrush that’ll we’ll use as animation target, the Storyboard (which I choose to name “DetailAni”).
Next, we use the Storyboard class to set Targetproperty and Target. Both these methods take two arguments, first the animation which we assign the property or target to (in this case DetailAni); the second argument is the value we want to assign. The property will require a PropertyPath object. PropertyPath specifies which property we are targeting with our animation. In our case (“Color”) is the Color property of the SolidColorBrush. Another example would be (“UIElement.Opacity”) to affect the opacity of a textblock.
ColorAnimationUsingKeyFrames caukf = new ColorAnimationUsingKeyFrames(); LinearColorKeyFrame lckf0 = new LinearColorKeyFrame(); lckf0.KeyTime = TimeSpan.FromSeconds(3); lckf0.Value = Colors.Blue; LinearColorKeyFrame lckf1 = new LinearColorKeyFrame(); lckf1.KeyTime = TimeSpan.FromSeconds(4); lckf1.Value = Colors.Black; LinearColorKeyFrame lckf2 = new LinearColorKeyFrame(); lckf2.KeyTime = TimeSpan.FromSeconds(7); lckf2.Value = Colors.Black; LinearColorKeyFrame lckf3 = new LinearColorKeyFrame(); lckf3.KeyTime = TimeSpan.FromSeconds(customValue); lckf3.Value = Colors.Transparent; caukf.KeyFrames.Add(lckf0); caukf.KeyFrames.Add(lckf1); caukf.KeyFrames.Add(lckf2); caukf.KeyFrames.Add(lckf3); DetailAni.Children.Add(caukf);
This is where the magic happens. Instead of going from one color to another over a set amount of time, I’ve chosen to let my color animate between different colors over an amount of time determined by me.
What I do now is create a ColorAnimationUsingKeyFrames (caukf) object and start creating LinearColorKeyFrame children for it. Each child has a KeyTime (arrival time) and a value (color). In my example, I fade in color to blue, let it transfer to black quickly, hold the black for several seconds before fading away. Sort of a highlight effect. Since I’m using TimeSpan.FromSeconds as a way to create timespans, I can easily put customvalues in there.
Don’t forget to add each KeyFrame to the caukf and to add the caukf as a child of your storyboard. I always tend to forget this :P
Don’t leave your animations hanging, add children!
DetailAni.Begin(); textBlockObject.Foreground = brushDetail; rectangleObject.Fill = brushDetail;
To finish this animation up, we start our Storyboard and set our brush as a property on objects we want to animate. We can set as many objects as we want to and this greatly helps us to synchronize animations.