First Floor Software

Declarative Tweening (3)

(Series Link:  Part 1, Part 2, Part 3, Part 4)

Part 3 on Declarative Tweening. In Part 1 I introduced the concept of declaring Tween animations in XAML. Part 2 lists the benefits of Declarative Tweening versus Tween animations created in code. In this part I want to elaborate a bit more on the key frames being generated for a Tween animation.

Key Frames per Second

The whole concept of Declarative Tweening evolves around the idea of creating linear key frames for each step in a Tween animation. The more key frames you create per second, the more fluent the animation. I previously had the number of key frames fixed at a value of 20 per second. In order to control the key frames, I now introduce a new attached dependency property; Fps. For long running animations it might be usefull to set the frames per seconds to a lower value to keep the number of created key frames at a reasonable size. In order to demonstrate the Fps property, I have created a sample application (source included) where you can play around with the various animation settings. You will notice that when you set the Fps to a low value, the linear animation transitions will become fairly visible.

Setting the Fps to a high value is also not recommended. A Fps of 100 will create a key frame for every 10ms iteration of the animation. You probably won't even see the difference between 100Fps and 30Fps. When the animation set to 100Fps is to run for 5 seconds a total of 500 key frames will be created, that's quite a lot. So you probably need to experiment a bit to see the effect of setting the Fps on your animation. The default (20 Fps) will work fine for most cases I guess.

Please note that the Fps attached property has nothing to do with the frames per second Silverlight uses to draw animations on screen. The key frames per seconds of a Tween animation defines the number of linear transitions.

Tweening Demo

Download the source code

(Series Link:  Part 1, Part 2, Part 3, Part 4)