Adding Client Capabilities to Server Controls Using the ASP.NET AJAX Control Toolkit - Part 2/Page 3
Adding Client Capabilities to Server Controls Using the ASP.NET AJAX Control Toolkit [con't]
Adding Animations to Your Extender Control
The ImageRotator extender we created earlier provided little in the area of effects as the images switched and resulted in very fast transition from one image to the next, which wouldn't catch a viewer's attention. In this section, we create a new version of the
ImageRotator, called the
AnimatedImageRotator, that fades in the image as it switches from one image to the next and provides this feature in addition to the existing functionality of the
ImageRotator. As we cover how to add this new animation functionality, we gloss over the topics we have already covered, focusing only on implementing the animation pieces. To add this functionality to the
AnimatedImageRotator, we need to register the animation scripts with the
AnimatedImageRotatorExtender class and add logic to the behavior class to call the animation when the image changes.
Registering the Animation Scripts
To register the script files so that they are downloaded to the browser, we need to add the
RequiredScript attribute to the
AnimatedImageRotator Extender class, as shown in Listing 11.12. We use the
RequiredScript attribute in this case to ensure that the
common.js script files associated with the
AnimationScripts type are included with the scripts brought down to the browser for our control. This style of adding scripts associated with a type is a common practice in the toolkit and is clean way to include dependent scripts associated with a type.
AnimatedImageRotator Extender Class
Calling Animation APIs
Animated ImageRotator extender, we will use the
AnimatedImageRotator behavior class, shown in Listing 11.13, takes the
ImageRotator behavior and adds a fade animation when the image changes, to fade the image into view. The constructor of the
FadeAnimation takes the target of the animation, the duration of the animation, the number of steps per second, the effect, the minimum opacity, the maximum opacity, and whether to adjust for layout in Internet Explorer. In our case, the
BannerImage image control will be the target of our animation, and the duration of our animation will be hard coded to 20% of the time the image is visible. To provide a clean animation, we will set the animation steps to 150, and combine that with a fade-in effect that will cause the image to transition in when the image changes. During this transition, we will start off with an opacity of 0, which will give us a full view of the image background, and then through the 150 steps work our way to a full view of the image with an opacity of 1. Table 11.1 lists some of the
FadeAnimation properties and provides a little more information about what they do.
After we associate the animation to the element, starting, stopping, and pausing the animation is just a method call away, making it simple to manipulate the animation. In the
AnimatedImageRotator, the load event of the image is used to trigger the animation to play because it will be fired each time our
Sys.Timer calls the
_rotateImage method. To do this, we associated the
_onLoadImage event handler with the onLoad event of the image and called the play method on the animation inside the function. Now each time the load event occurs, the animation plays, transitioning the image into view. One of the side effects of working with an animation in a situation like this is a potential race condition if the duration was set too long. When working with transition-type animations like the
FadAnimation, pay close attention to how you are using it to ensure the animation will work in all cases.
AnimatedImageRotator Behavior Class