tailieunhanh - ASP.NET AJAX in Action phần 8

các hình ảnh động các lớp học. Ví dụ sau đây sẽ cho bạn cơ hội để thử nghiệm trực tiếp với các cú pháp JSON cho việc tạo hình ảnh động. Trong phần này, chúng tôi sẽ trở lại trên bộ điều khiển Thư viện ảnh được xây dựng trong phần bắt đầu bằng cách mở tập tin | 366 CHAPTER 10 Developing with the Ajax Control Toolkit the animation classes. The following example will give you the opportunity to experiment directly with the JSON syntax for creating animations. In this section we ll return on the PhotoGallery control built in section . So far you ve created a client control to browse a set of images stored in the website. Your next goal is to enhance the control by adding an animated transition between the images. The transition you ll build isn t complex but it s effective as shown in figure . While the next image is being loaded you partially fade-out the current image then you resize it until it reaches the width and height of the next image to display. Finally the new image fades in and replaces the old image. Let s start by opening the file that contains the code for the PhotoGallery control. You have to modify the code so that when the next image is loaded a new method named _playTransition is called. This method is responsible for playing the animated transition and then calling the _displayImage method as soon as the transition is completed. First you must rewrite the _onImage-ElementLoaded method declared in the PhotoGallery s prototype as follows _onImageElementLoaded function Figure Example of an animated transition applied to the PhotoGallery control. The animations that make up the transition are defined through JSON objects. Animations 367 Then you must add a method called _playTransition to the constructor s prototype. The code for the _playTransition method is shown in listing . Listing Code for the _playTransition method Fade-in animation _playTransition function var currentimagesize height width var nextimageSize height width var fadein AnimationName Fadein AnimationTarget Duration .