Search
Recent Posts
Me
Articles & Presentations
Sites Worth A Visit
Syndication Feed
Current Visitors
Declarative Tweening (2)
(Series Link: Part 1, Part 2, Part 3, Part 4)
In my previous article on Declarative Tweening I talked about a solution for having Tweening animations declared in XAML. One major benefit of this model is that Tweening animations have become first class citizens in the Silverlight animation framework. Using attached properties is has become very easy to add a Tweening animation in XAML. The following snippet demonstrates how easy it is to create an EaseOutElastic animation of a rotatetransform angle;
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="rotate"
Storyboard.TargetProperty="Angle"
Duration="0:0:3"
ff:Tween.Type="EaseOutElastic"
ff:Tween.From="0"
ff:Tween.To="180" />
Benefits
Having Tweening animations as standard Storyboard animations has a number of benefits:
- As said, Tweening animation are now part of the Silverlight animation framework and therefore can easily fit in scenario's such as using the Visual State Manager to manage control states and transitions.
- It has become very easy to use a Tweening animation, just set three attached dependency properties and you're done. You even get Intellisense for free when specifying the animation type. No need to write a single letter of code.
- Since the Tweening animation has become just a standard DoubleAnimationUsingKeyFrames you get the animation characteristics such as AutoReverse, RepeatBehavior, SpeedRatio, etc. for free.
- Tweening animations are more accurate with this Declarative Tweening model. When a Tweening animation has a duration of 3 seconds, it will run for 3 seconds. I've ran some test on the Tweener libraries where an Empty Storyboard is used for each animation step. Those animations always run longer then expected. I guess this has something to do with the start and stop of the storyboard for each animation step.
Proof of Concept
The proposed solution is just a proof of concept. There are a number of things that haven't been catered for or need to be fixed. To name a few;
- At this moment a LinearKeyFrame is created for every 50ms step in an animation. This counts for 20 frames per second and when an animation lasts for many seconds, hundreds of key frames will be created. Some kind of key frame count adjustment is required.
- The current Tweening library only handles target values of type double. It shouldn't be too hard to add support for points and colors, but it still needs to be done.
- Using the LinearKeyFrame implies that for every created frame, the animation is linear. As long as the time between key frames is small, this won't be a problem. Things will get hairy when the time between keyframes starts exceeding the 200ms. Need to do some tests here.
(Series Link: Part 1, Part 2, Part 3, Part 4)