JSON and animations: adding transitions to the PhotoGallery control in .NET framework

Encoding PDF-417 2d barcode in .NET framework JSON and animations: adding transitions to the PhotoGallery control

10.3.5 JSON and animations: adding transitions to the PhotoGallery control
Paint PDF 417 In VS .NET
Using Barcode encoder for ASP.NET Control to generate, create PDF 417 image in ASP.NET applications.
www.OnBarcode.com
Generate Code 128 In .NET Framework
Using Barcode encoder for ASP.NET Control to generate, create Code 128 Code Set A image in ASP.NET applications.
www.OnBarcode.com
When you use the AnimationExtender or the UpdatePanelAnimationExtender, the XML that defines the animations is parsed on the server side. The result is a JSON-serialized object that is sent on the client side and used to create instances of
Making UPCA In Visual Studio .NET
Using Barcode generator for ASP.NET Control to generate, create UPC-A Supplement 5 image in ASP.NET applications.
www.OnBarcode.com
QR Creation In .NET
Using Barcode printer for ASP.NET Control to generate, create QR-Code image in ASP.NET applications.
www.OnBarcode.com
Developing with the Ajax Control Toolkit
EAN-13 Supplement 5 Creator In Visual Studio .NET
Using Barcode generation for ASP.NET Control to generate, create EAN 13 image in ASP.NET applications.
www.OnBarcode.com
Creating Data Matrix ECC200 In VS .NET
Using Barcode encoder for ASP.NET Control to generate, create ECC200 image in ASP.NET applications.
www.OnBarcode.com
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 8.4.5. 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 10.18. 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 PhotoGallery.js 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 _onImageElementLoaded method, declared in the PhotoGallery s prototype, as follows:
Generating Linear Barcode In Visual Studio .NET
Using Barcode maker for ASP.NET Control to generate, create 1D Barcode image in ASP.NET applications.
www.OnBarcode.com
Leitcode Printer In .NET
Using Barcode encoder for ASP.NET Control to generate, create Leitcode image in ASP.NET applications.
www.OnBarcode.com
_onImageElementLoaded : function() { this._playTransition(); }
Create PDF-417 2d Barcode In Visual Studio .NET
Using Barcode drawer for ASP.NET Control to generate, create PDF-417 2d barcode image in ASP.NET applications.
www.OnBarcode.com
PDF 417 Decoder In VB.NET
Using Barcode decoder for VS .NET Control to read, scan read, scan image in Visual Studio .NET applications.
www.OnBarcode.com
Figure 10.18 Example of an animated transition applied to the PhotoGallery control. The animations that make up the transition are defined through JSON objects.
Print Barcode In None
Using Barcode maker for Excel Control to generate, create Barcode image in Office Excel applications.
www.OnBarcode.com
Painting Barcode In Visual Studio .NET
Using Barcode creation for .NET framework Control to generate, create Barcode image in .NET framework applications.
www.OnBarcode.com
Animations
GTIN - 13 Creation In Java
Using Barcode encoder for Eclipse BIRT Control to generate, create EAN13 image in BIRT reports applications.
www.OnBarcode.com
Print Barcode In Java
Using Barcode generation for Android Control to generate, create Barcode image in Android applications.
www.OnBarcode.com
Then, you must add a method called _playTransition to the constructor s prototype. The code for the _playTransition method is shown in listing 10.14.
QR Code ISO/IEC18004 Generation In Objective-C
Using Barcode encoder for iPad Control to generate, create QR image in iPad applications.
www.OnBarcode.com
Drawing UCC.EAN - 128 In None
Using Barcode maker for Online Control to generate, create UCC-128 image in Online applications.
www.OnBarcode.com
Listing 10.14 Code for the _playTransition method
Encode Code 128C In Visual C#.NET
Using Barcode encoder for .NET Control to generate, create USS Code 128 image in VS .NET applications.
www.OnBarcode.com
Barcode Generation In Visual Studio .NET
Using Barcode maker for Reporting Service Control to generate, create Barcode image in Reporting Service applications.
www.OnBarcode.com
_playTransition : function() { var currentImageSize = {height: this._imageElement.height, width: this._imageElement.width}; var nextImageSize = {height: this._imgPreload.height, width: this._imgPreload.width}; var fadeIn = AjaxControlToolkit.Animation.createAnimation( { "AnimationName": "FadeIn", "AnimationTarget": this._imageElement.id, "Duration": 0.3, "MinimumOpacity": 0.2, "MaximumOpacity": 1 } );
Generate GTIN - 12 In Objective-C
Using Barcode encoder for iPhone Control to generate, create UPC Symbol image in iPhone applications.
www.OnBarcode.com
GTIN - 12 Encoder In Objective-C
Using Barcode creation for iPad Control to generate, create UPC Symbol image in iPad applications.
www.OnBarcode.com
B animation
Fade-in
Sequence animation
var sequence = AjaxControlToolkit.Animation.createAnimation( { "AnimationName": "Sequence", "AnimationTarget": this._imageElement.id, "AnimationChildren": [ { "AnimationName": "FadeOut", "Duration": 0.3, "MaximumOpacity": 1, "MinimumOpacity": 0.2 }, { "AnimationName": "Resize", "Height": nextImageSize.height, "Width": currentImageSize.width }, { "AnimationName": "Resize", "Height": nextImageSize.height, "Width": nextImageSize.width } ] } );
Developing with the Ajax Control Toolkit
sequence.add_ended(Function.createDelegate(this, onSequenceEnded)); sequence.play();
Play transition
Subscribe to ended event
function onSequenceEnded() { this._displayImage(); fadeIn.play(); } }
Handle ended event
The first thing you do in the body of the method is save the height and width of the currently displayed image and the next one in the list. You need these dimensions in order to set up the animation that resizes the current image to the size of the next one. The first animation you create is a fade-in B, stored in the fadeIn variable. The animation is created with a call to the AjaxControlToolkit.Animation.createAnimation method. This method accepts an object literal (a JSON object) and instantiates the animations defined in the object. In the JSON object, the value of the AnimationName attribute is the FadeIn string, which corresponds to a fade-in animation. You follow the same rule used in the XML description. The name of an animation is obtained by removing the Animation suffix from the name of the class. The second attribute, AnimationTarget, specifies which element to animate. In this case, it s the img element that displays the current image. The third attribute, Duration, is the duration of the animation; the last two attributes define the values of the maximum and minimum opacity. The fade-in effect is obtained by animating the opacity value from 0.2 to 1. You use the same technique to create the sequence animation C that completes the transition. In this case, the AnimationChildren attribute holds an array with the child animations. When the _playTransition method is called, the transition is played in two parts. First, the sequence animation is played. To detect its end, you subscribe to its ended event. The event is handled by a function called onSequenceEnded, declared in the _playTransition method. When the sequence animation ends, the _displayImage method is called to replace the old photo with the new one. Finally, the fade-in animation is played to complete the transition between the two images. The JSON description is compact and leads to highly readable code. The only drawback of this approach is that it s slower than the imperative syntax because an additional step is required to translate the JSON description into an instance of
Summary
the FadeInAnimation class. For this reason, the imperative syntax is preferable when you need maximum performance. In most cases, though, you ll be able to use the shortest and most readable code.
10.4 Summary
In this chapter, we ve explored the Ajax Control Toolkit, an open-source project started by Microsoft in the early days of ASP.NET AJAX. The Toolkit, which is open to contributions from the community, aims at becoming the biggest free collection of Ajax-enabled controls available. The Toolkit controls are built on top of a custom API that enhances the base functionality provided by the ASP.NET AJAX extensions. The Toolkit API is a metadata-driven API: Ajax-enabled controls can be authored using attribute-based programming. All controls created with the Toolkit API provide support for the ASP.NET 2.0 callbacks framework and the Visual Studio Designer. The Ajax Control Toolkit offers also a powerful framework for creating visual effects and animations. We explored the animation classes and explained how to create them in a web page using the AnimationExtender control. You can create animations using XML or JSON syntax, as we demonstrated by adding transition effects to the PhotoGallery control developed in chapter 8. In the next chapter, we ll look at the XML Script declarative language, which is used to instantiate client components in a page using a declarative syntax.
Copyright © OnBarcode.com . All rights reserved.