AJAX Animations with the ASP.NET AJAX Toolkit

Preparing for my talk at TechEd Europe gave me an excuse to play around with the animations support in the ASP.NET AJAX Toolkit… Very cool stuff.

UPDATE:  I posted the full VS project here: picturebox.zip enjoy!

I wanted to write a control that allowed the user to scroll through a list of background images… The trick here is that I wanted the images to smoothly animate across, have a little bump effect then fad slightly…

Luckily it was very easy to do… Basically I set up a dev with all three images in line, and then used some client side script keep up with which image is displayed. Finally I used the animation support to make it look cool. Step 3 is clearly the fun part… I have attached some the project file so you can feel free to pick it up yourself, check out the Animation reference and have at it!... If you come up with some cool, send it my way and I will use it in my talk (and give you the credit).

Step 1: Set up the devs with the three images in question

<a id="previous" runat="server" class="navigationButton">&lt;</a>
<span id="content">
   <span id="images">
      <img class="navigationImage" src="images/weekend.jpg" />
      <img class="navigationImage" src="images/aprilfool.jpg" />
      <img class="navigationImage" src="images/gamedev.jpg" />
   </span>
</span>

<a id="next" runat="server" class="navigationButton">&gt;</a>

Step 2: Set up bit of client side javascript to handle the view

<script language="javascript" type="text/javascript">
// Get the page setup for scrolling through the images
function initialize() {
   var images = $get('images');

   // Determine how many images were provided

   images.imageCount = 0;
   for (var i = 0; i < images.childNodes.length; i++) {
   var child = images.childNodes[i];
   if (child.tagName && child.tagName.toLowerCase() == 'img') {
     images.imageCount++;
   }
}
images.style.width = (images.imageCount * 1000) + 'px';
images.style.left = '0px';
images.visibleIndex = 0;
toggleButtonVisibility(images);

}

// Enable/disable buttons depending on whether or not there are more images
function toggleButtonVisibility() {
   var images = $get('images');
   var previous = $get('previous');
   var next = $get('next'); 

   previous.style.visibility = (images.visibleIndex > 0) ? 'visible' : 'hidden';
   next.style.visibility = (images.visibleIndex < images.imageCount - 1) ? 'visible' : 'hidden';

}

// Move to the next image

function move(behavior, delta) {
   var images = $get('images');
   images.visibleIndex += delta;
   var animation = behavior._onClick._animation._animations[1]._animations[0];
   animation.set_startValue(parseInt(images.style.left));
   animation.set_endValue(images.visibleIndex * -1000);
}

</script>

Step3: Animate using server side controls… It is easy to go a little crazy here, but fun!

<ajaxToolkit:AnimationExtender BehaviorID="PreviousAnimation" runat="server" TargetControlID="previous">

<Animations>
   <OnClick>
      <Sequence>
         <ScriptAction Script="move($find('PreviousAnimation'), -1);" />
         <Parallel Duration="1" FPS="20" AnimationTarget="images">
             <Length Property="style" PropertyKey="left" Duration="1" FPS="20" Unit="px" />
             <FadeOut MinimumOpacity=".7" />
         </Parallel>

   <Move AnimationTarget="images" Horizontal="100" Vertical="50" Duration=".1" />
   <Move AnimationTarget="images" Horizontal="-100" Vertical="-50" Duration=".1"/>
   <Move AnimationTarget="images" Horizontal="70" Vertical="20" Duration=".1" />
   <Move AnimationTarget="images" Horizontal="-70" Vertical="-20" Duration=".1"/>
   <Move AnimationTarget="images" Horizontal="40" Vertical="5" Duration=".1" />
   <Move AnimationTarget="images" Horizontal="-40" Vertical="-5" Duration=".1"/>
   <FadeIn Duration=".3" FPS="20" AnimationTarget="images" />

   <ScriptAction Script="toggleButtonVisibility();" />
</Sequence>
</OnClick>

</Animations>

</ajaxToolkit:AnimationExtender>

PS – thanks to Ted Glaza who did a little hand holding for me to get this going…

PictureBox.zip