The dbicDate control contains the ability to animate the transition between displayed calendars, when showing a single month in the display.
The basic requirements to use the animation are simple: Make sure the CalendarDimension is set to a value of (1,1) so only a single month is visible at a time, and then adjust the AnimationEffect property to the desired transition effect.
Once enabled, simply interacting with either of the navigation buttons on the control will trigger the animation with each change of the month.
The animation can be further refined and tweaked with the various "Animation" prefixed properties of the control.
| Property | Description |
| AnimationArea | Gets or sets the section of the control to animate when navigating between months. |
| AnimationIncrement | Gets or sets the degree of change in the display of the control during the animation. |
| AnimationInReverse | Gets or sets if the animations should be reversed when triggered. |
| AnimationInterval | Gets or sets the change frequency of the animation (in milliseconds). |
| AnimationType | Gets or sets the way the animation in the control is processed. |
AnimationArea - Determines what part or parts of the control will be animated during an animation effect: the body of the calendar, or the entire background of the control. The body of the control includes the day numbers and if set visible, the week numbers, as well.
AnimationEffect - Enables the animation and determines what type of effect will be used. Current effects include scrolling horizontally, scrolling vertically, zooming in and out, and fading into new views.
AnimationIncrement - Determines the degree of change of the selected animation effect. The animation is controlled by a timer. This property determines how large the change will be on each tick of the timer.
AnimationInReverse - Determines if animations that have a 2 different behaviors depending on if the Previous Month button or Next Month Button is clicked should be swapped when the control executes the animation.
NOTE: Not all the animations have a difference between the two buttons.
Vertical:
Normal:
Previous Button: New calendar enters from the top, shifting old calendar display out through the bottom.
Next Button: New calendar enters from the bottom, shifting old calendar display out through the top.
Reverse:
Previous Button: New calendar enters from the bottom, shifting old calendar display out through the top.
Next Button: New calendar enters from the top, shifting old calendar display out through the bottom.
Horizontal:
Normal:
Previous Button: New calendar enters from the left, shifting old calendar display out through the right.
Next Button: New calendar enters from the right, shifting old calendar display out through the left.
Reverse:
Previous Button: New calendar enters from the right, shifting old calendar display out through the left.
Next Button: New calendar enters from the left, shifting old calendar display out through the right.
Zoom:
Normal:
Previous Button: The current calendar zooms into the background, revealing the new display calendar.
Next Button: The new display calendar zooms out from the background and covers the old display calendar.
Reverse:
Previous Button: The new display calendar zooms out from the background and covers the old display calendar.
Next Button: The current calendar zooms into the background, revealing the new display calendar.
AnimationInterval - Determines the change frequency of the animation effect. This property is used to control the timer for the animation. The smaller the value, the faster the animation effect will occur.
AnimationType - Determines how the distance between animation increments are calculated.
If this property is set to “Pixels”, then on each tick of the animation timer, the change made to the animation is determined by the AnimationIncrement value. For example (and assuming we are doing a horizontal animation effect), if the width of the control is set to 100, and the AnimationIncrement is set to 5, then there will be 20 ticks of the timer need to complete the animation. This option allows very precise control of the animation. However, if the size of the dbicDate control is constantly being changed, the performance of the animation effect may be impacted.
When the AnimationType property is set to “Breaks”, then the AnimationEffect property value determines how many ticks are required to finish the animation effect, and the calculation on the number of pixels used for each change is calculated by the control. For example, if the width of the control is set to 100, and the AnimationIncrement is set to 5, then there will be 5 ticks of the timer needed to complete the animation. As such, each tick of the timer will change the animation by 20 pixels. The advantage here is that no matter what size the dbicDate control is set to, the animation effect will occur at the same time. A disadvantage is that depending on the size of the dbicDate control the presentation may appear jerky.
Please use the following link to open a web page with a video demonstrating the current animations in action.Video - Animation Demo