Ever since version 1.0 of the Solpart menu, it supported animations. Unfortunately, these animations were specific to IE due to it being the only browser that supported transitions natively. When I created the DNNMenu I had decided not to go this route, but rather seek out a technique that worked across all browsers. When I was first reviewing the Atlas bits, there was a portion called Glitz, which I had anticipated would support the animations I was looking for. Unfortunately, Glitz never became an official part of the framework. This caused me to research how animations are written that look smooth. I stumbled upon the concept of Tweens, which eventually led me to Robert Penner's free tweening chapter. In reviewing it I had decided to try my hand at implementing something similar inside the ClientAPI. This led to the creation of the dnn.motion namespace. To demonstrate its functionality have a look at the new webcontrols site.
Notice how the icons in the header of the page gracefully fall and bounce into position. This effect is possible thanks to the mathematical formula specified by Mr. Penner. All a developer has to do to implement it is first register the motion namespace from the server
If ClientAPI.BrowserSupportsFunctionality(ClientAPI.ClientFunctionality.Motion) Then
ClientAPI.RegisterClientReference(Page, ClientAPI.ClientNamespaceReferences.dnn_motion)
End If
Then on the client simply tell the animations how to behave with the following code
dnn.dom.doTween(id, ctl, 'top', dnn.easing.easeOutBounce, -100, 50, 1);
| Parameter |
Description |
| id |
ID to uniquely identify animation. Useful if you wish to stop or replay the animation |
| ctl |
Control to animate |
| property |
Property to modify for animation Valid values are any style name (top, height, etc.) plus cliptop, clipbottom, clipleft, clipright |
| easeFunc |
Easing equation to use (linearTween, ease[In/Out/InOut]Quad, ease[In/Out/InOut]Cubic, ease[In/Out/InOut]Quart, ease[In/Out/InOut]Quint, ease[In/Out/InOut]Sine, ease[In/Out/InOut]Expo, ease[In/Out/InOut]Circ, ease[In/Out/InOut]Bounce) - if these seem overwhelming, read the chapter. |
| begin |
starting value for the property (in our sample we start at top=-100 |
| finish |
finishing value for the property (stop at top=50) |
| duration |
number of seconds to run the tween |
| interval |
(optional) how often animation gets updated (milliseconds). The lower the number the more smooth but also the more demanding on the CPU (default=10) |
| suffix |
(optional) suffix to append to value (px for example) |
| onStartFunc |
(optional) function to invoke prior to animation |
| onFinishFunc |
(optional) function to invoke after animation |
Another example of the use of animations can be found in the animations sample page. This sample utilizes the same doTween implementation for the mouse over and out events. However, when the icon is clicked, it uses a "canned" animation technique to give the appearance of the box sliding out underneath the icon. This effect is done by combining multiple tweens together. To invoke these techniques the element being animated must have its positioning specified as absolute.
dnn.dom.animate(m_Description, dnn.motion.animationType.Slide, 'right', 1, 1,
dnn.motion.easingType.Expo, dnn.motion.easingDir.easeInOut);
| Parameter |
Description |
| ctl |
Control to animate |
| type |
[dnn.motion.animationType enumerator] Ttype of animation (Slide, Expand, Diagonal, ReverseDiagonal) |
| dir |
[dnn.motion.animationDir enumerator] direction (up, down, left, right) |
| easingType |
[dnn.motion.easingType enumerator] Type of equation to use (Bounce, Circ, Cubic, Expo, Quad, Quint, Quart, Sine) |
| easingDir |
[dnn.motion.easingDir enumerator] Direction of animation (easeIn, easeOut, easeInOut) |
| duration |
number of seconds to run the animation |
| interval |
(optional) how often animation gets updated (milliseconds). The lower the number the more smooth but also the more demanding on the CPU (default=10) |
| onStartFunc |
(optional) function to invoke prior to animation |
| onFinishFunc |
(optional) function to invoke after animation |
The animate function is utilized by the new DNNMenu and eventually other webcontrols. The menu on the WebControls sample site currently uses the Slide technique to show and hide the sub-menus. To apply custom settings when using the control directly, the following markup is used.
You can play with the different settings allowed for the menu animations on this sample page.
In case you are wondering how animations can be applied to the navigation controls within DNN, the current plan is for the Nav skin object to allow access to the these properties through the CustomAttributes collection.
<CustomAttributes>
<dnn:CustomAttribute Name="AnimationType" Value="Slide"/>
<dnn:CustomAttribute Name="EasingType"Value="Bounce"/>
<dnn:CustomAttribute Name="EasingDirection"Value="Out"/>
<dnn:CustomAttribute Name="AnimationLength"Value="1"/>
<dnn:CustomAttribute Name="AnimationInterval"Value="10"/>
<dnn:CustomAttribute Name="RenderMode"Value="Normal"/>
CustomAttributes>
That's enough information for this blog. I will be covering this topic briefly, along with a whole lot more of the new features available to the module developer in my session at OpenForce '07..