Animation Control , Adding Cool Animations in your application, Scenario 2

Animation Control , Adding Cool Animations in your application, Scenario 2

  • Comments 6

Assigning Animations to Client-Side Controls

If you need to assign Animation Behaviour  to any Client-Side Controls using the AjaxControlToolKit's Animation Extender Control ,

you gotta Explicitly create the AnimationExtender Control on the Client side using the $create function

$create's Documentation is here   Sys.UI.Component $create Method.

$create(type, properties, events, references, element);
Whenever, you add an Animation Extender control using the steps mentioned in my previous Post,

 Animation Control , Adding Cool Animations in your application ,

For the Markup

<!-- asp:Image Control that houses the ThumbNail --> 
<asp:Image runat="server" ID="imgThumbNail1" 
      CssClass="imgThumbNail" 
     ImageUrl="thumbNails/Second_Dimension_by_celsojunior.jpg" />
<cc1:AnimationExtender ID="animationExtendThumbNail1" runat="server" TargetControlID="imgThumbNail1">
  <Animations>
       <OnClick>
              <Move Duration=".2"  horizontal="800" vertical="600" Unit="px"  />
        </OnClick>
   </Animations>
</cc1:AnimationExtender>

The Runtime generates the Following  $create Function

<script type="text/javascript">
<!--

Sys.Application.initialize();
<!-- Called when the Client Side Script Framework
    and Controls are Initialised--> 
Sys.Application.add_init(function() {
    $create(AjaxControlToolkit.Animation.AnimationBehavior, 
    {
         <!-- The ID to be associated with the control--> 
         "id":"animationExtendThumbNail1",
         imgThumbNail1
         "OnClick":"{\"AnimationName\":\"Move\",\"Duration\":\".2\",\"horizontal\":\"800\",\"vertical\":\"600\",\"Unit\":\"px\",\"AnimationChildren\":[]}",
        <!-- The Control to be targeted imgThumbNail1--> 
         null, null, $get("imgThumbNail1"));
});
-->
</script>
Looking at this , we understand that the Server-Side Control associated with the Animation Control is Specified as the 
   last parameter of the $create function is the Element the behaviour has to be associated with .
So , lets start by creating a client Side Control .
1) Create an <img> tag on the client Side , using the document.CreateElement Method
 
/**********
Function Name : CreateClientSideElementAndAttachAnimation
Parameters    : 
               a) parentElementId : The Parent Element Which will house the Dynamically Created Control .
               
Purpose       : This Function Creates A client Side <img> tag and Calls the Function to attach the Animation behavior
**********/
//parentElementId is the ID of the HTML element that will house the Dynamically Created Client Side Control 
function  CreateClientSideElementAndAttachAnimation(parentElementId)
{
   //Lets be Efficient and use StringBuilder :-)
   var imgElementTagString = new Sys.StringBuilder("");
   // The ID of the dynamically Created control
   var imgElementID = "imgDynamicControl"
   imgElementTagString.append("<img");
        imgElementTagString.append(" id=\""+imgElementID+"\" ");
        //Style the Control to have the "Position" Attribute set to "Absolute" and assign the left and Top Positions of the control 
        imgElementTagString.append(" style=\"position:absolute;top:100px;left:20px;\" ");
        imgElementTagString.append(" src=\"thumbNails/Second_Dimension_by_celsojunior.jpg\" ");
   imgElementTagString.append("/>");
   //Create the Img Tag using the document.createElement
   var imgElement = document.createElement( imgElementTagString.toString() );
   //Add the Child to the "ChildNodes" collection of the Parent Control 
   $get(parentElementId).appendChild( imgElement );
   
   //Attach the Animation Control to the Dynamically Created Image Element
   AttachAnimation( imgElementID );
    
}
2) Attach the Animation to the Dynamically Created Control 
/**********
Function Name : AttachAnimation
Parameters    : 
               a) controlID :  The Dynamically Created Control that has to be associated with the Animation Extender
               
Purpose       : This Function Creates an Animation Extender on the Client Side and Associates the Behaviour with the Dynamically 
                Created Control Side
**********/
function AttachAnimation( controlID )
{
    //The Id of the Dynamically Created Animation Extender Control 
    var animatorID = "dynamicallyCreatedAnimationExtender";
    
    //Dynamically Create the  Animation Extender Control 
    $create(AjaxControlToolkit.Animation.AnimationBehavior, 
    {"id":animatorID,
    //The Animation associted with the Extender in JSON 
     "OnClick":"{\"AnimationName\":\"Move\",\"Duration\":\".2\",\"horizontal\":\"800\",\"vertical\":\"600\",\"Unit\":\"px\",\"AnimationChildren\":[]}"}
    // Associate the Client-Side Control with the Animation Extender by  using  "$get(<controlID>")
     null, null, $get(controlID) );
}
 
The Script might look a little convoluted , but once you get the hang of it, its pretty easy to tweak it as necessary .
 
Leave a Comment
  • Please add 4 and 2 and type the answer here:
  • Post
  • You've been kicked (a good thing) - Trackback from DotNetKicks.com

  • Why would I get a javascript error stating "'AjaxControlToolkit' is undefined"?

  • Cheap zolpidem. Zolpidem tartrate. Zolpidem without prescription. Zolpidem overdose. Zolpidem.

  • Hey, Wondering whether you could list the function definitions for the javascript usage Im searching the ScriptResources for them, can't find them anywhere else,

    Like this:

            var resizeAnimation = new AjaxControlToolkit.Animation.ResizeAnimation($get("InfoFormIframe") , 0.2 , 45 , 100 , 100 , "%");

  • Sorry Here

    http://ajaxcontroltoolkit.com/Walkthrough/AnimationReference.aspx#FadeAnimation

  • Hi Nathan,

    Did you check out this link ?

    http://blogs.msdn.com/phaniraj/archive/2007/09/17/happy-birthday-to-me.aspx

    It contains the download location for all the animation examples

Page 1 of 1 (6 items)