Animations

Home ›

ASP.NET Forums » ASP.NET AJAX » ASP.NET AJAX Control Toolkit » Animations

Shortcuts

Previous Next

Last post 09-28-2007 11:19 AM by Sanson. 4 replies.

Sort Posts:

Animations

09-25-2006, 11:29 AM

Contact

Loading...
Fubarian
Joined on 04-27-2006, 5:27 PM
Posts 124
Points 220

I posted up over here a quick comment and Ted asked that I post my question here, so I shall!

I was dorkin around with the new animation controls and noticed AnimationExtender, AnimationProperties, AnimationExtenderDesigner and Animation are all items I can play with in code behind -- but I'm not sure how to use these. I'm thinking I can make a class that handles this and makes it a bit faster for me later, but are there any examples or how-to's someone could throw out? Also, is there a way to use an actual XML file to load the sequences, animation actions, etc instead of coding it to the page directly?

Filed under: Animation, Atlas Control Toolkit, C#

Re: Animations

09-26-2006, 5:58 PM

Contact

Loading...
Ted Glaza [MSFT]
Joined on 04-12-2006, 11:51 PM
Microsoft
Posts 847
Points 4,198

Hi Fubarian,

Yes - you can do all of this. This post provides a simple example of using the Animation class. You can get an Animation instance from your AnimationProperties (for example AnimationProperties.OnClick) and exploring it a little will show it's just a simple tree structure mapped directly over the XML. There are three important properties on Animation that you can use to programatically manipulate animations on the server. The Animation.Name property is the text of the XML tag (i.e. it will have values like "sequence" or "fadeout"). Animation.Properties is a dictionary that maps property names to their string values. All properties of the XML animation element are stored in this collection (so if your markup has <OnClick><Parallel duration=".5"> ... </Parallel></OnClick>, then MyAnimationProperties.OnClick.Properties["duration"] will return the value ".5"). Finally, the Animation.Children list contains other Animation instances that represent its children.

You can also use an XML string to set the animations instead of manipulating the object model, but there are a few details to note. The AnimationTargetControlPropertiesBase<T>.Animations property is a string containing the XML found inside the <Animations> tag. You can set this on your AnimationProperties instance, but it must contain the XML for all the animations (i.e. <OnLoad>, <OnClick>, <OnMouseOver>, etc.) and must not contain a root node (i.e. AnimationTargetControlPropertiesBase is expecting the <Animations> tag not to be there so it adds it back). Here's an example showing how to do this:

<%@ Page Language="C#" %>
<%@ Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %>
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);

        // Hide the button, as explained in the Using Animations walkthrough
        MyAnimations.Animations =
            "<OnClick>" +
            "  <Sequence>" +
            "    <EnableAction Enabled=\"false\" />" +
            "    <Parallel Duration=\".2\">" +
            "      <Resize Height=\"0\" Width=\"0\" Unit=\"px\" />" +
            "      <FadeOut />" +
            "    </Parallel>" +
            "    <HideAction /> " +
            "  </Sequence>" +
            "</OnClick>";
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server"><title>Test Page</title></head>
<body><form id="Form1" runat="server"><div>
    <atlas:ScriptManager id="ScriptManager" runat="server" />
    <asp:Button ID="btnClick" runat="server" Text="Click Me" OnClientClick="return false;" />
    
    <atlasToolkit:AnimationExtender ID="MyExtender" runat="server">
        <atlasToolkit:AnimationProperties ID="MyAnimations" TargetControlID="btnClick" />
    </atlasToolkit:AnimationExtender> 
</div></form></body>
</html>

If you have any questions or would like more clarification, just keep posting.

Thanks,
Ted

This posting is provided "AS IS" with no warranties, and confers no rights.

Filed under: Animation

Re: Animations

10-13-2006, 8:51 AM

Contact

Loading...
Fubarian
Joined on 04-27-2006, 5:27 PM
Posts 124
Points 220

Ok, so you have to write them out, regardless if you use code behind or directly on the page. I was hoping I was working toward a "cheater" way of doing the animations -- more specifically, envisioning adding a parameter like a sql command...

param.enable = true;
param.duration = 1.5;
param.fadeout();
myextender.animation.add(param);

Something slick like that. Hmm...I feel a class coming on.

Re: Animations

10-25-2006, 5:36 PM

Contact

Loading...
Ted Glaza [MSFT]
Joined on 04-12-2006, 11:51 PM
Microsoft
Posts 847
Points 4,198

Hi Fubarian,

I would like to have provided a server side model that contained classes for the specific animations (mostly so we could provide intellisense), but unfortunately this limits extensibility and prevents other people from adding their own animations in the same way. We could still create wrappers for generating specific animations, but I'm not sure they would be a whole lot more useful than what's currently there.

Thanks,
Ted

This posting is provided "AS IS" with no warranties, and confers no rights.