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

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 .