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

Comments

• Anonymous
  November 01, 2006
  You've been kicked (a good thing) - Trackback from DotNetKicks.com

• Anonymous
  November 01, 2006
  Securing WCF to only respond to local requests. [Via: phenning ] MOSS 2007 and WSS 2007 - Server setup...

• Anonymous
  November 03, 2006
  i think XAML should dominate future.

• Anonymous
  November 03, 2006
  $AA.LengthAnimation error in _initializeHandleAnimation in slider in toolkit plz help me

• Anonymous
  November 06, 2006
  my QQ is 304202545(do  you county have? ) I  am from  China.I hope I can get the help of you,can you help me.I like asp.net,But I am poor at asp.net.So I hope you can help me to improve  the asp.net,thank you!