Expirements with Ms AJAX 1 : Plot a Path and follow it
While working on some documentation and presentations for MS AJAX Animation ( wait for it , its gonna rock !! ) , I made what you see in the demo video.
Its basic premise is this :
- Allow the User to plot points on a plane
- Then trigger an animation that goes over all the points and stops
Why do this ?
No Perceptible use , pure fun factor .
I just though that it'd be cool to control an animation by clicking on points and asking an element to go to those points .
Well, here you have it .
Once the demo is hosted, you can see the same as an online app.
Take a look at a screenshot .
Lets see how we can achieve this ..
We need the following functionality
- Allow the User to plot an arbitrary number of points on a plane
- Create an animation that moves to all the points.
1.Allow the User to plot an arbitrary number of points on a plane
The "Plane" would be a DIV element on the page.
<div id="pathPallette">
</div>
The user plots a point on the plane by clicking on the plane.
We will have a global collection of points called pointsInpath which will be a javaScript array .
var pointsInPath = new Array();
We can attach an eventhandler to the Click event of the Div by using the $addHandler function of the Ms AJAX framework explained Here .
Syntax: $addHandler(element, eventName, handler);
$addHandler($get("pathPallette"),"click",markPoint);
We will now define the function "markPoint".
function markPoint(eventArg)
{
var evt = window.event || eventArg;
var xCoOrd = evt.clientX ;
var yCoOrd = evt.clientY ;
Addpoint( xCoOrd , yCoOrd );
createMarker( xCoOrd - $get("pathPallette").offsetLeft , yCoOrd - $get("pathPallette").offsetTop );
}
MarkPoint calls 2 functions .
- AddPoint , to add the point to a collection of points
- Createmarker ,to mark the spot as a point on the plane which will be visited by the Animated element
AddPoint
function Addpoint( xCoOrd,yCoOrd)
{
anyMorePoints= true;
pointsInPath[index++] = "{\"X\" : \""+xCoOrd +"\",\"Y\":\""+yCoOrd +"\"}";
}
The AddPoint function recieves the X and Y co-ordinates of the Point in the Element's Path.
Add the Point to the existing points collection.
Createmarker
function createMarker( xCoOrd,yCoOrd )
{
var newmarker = document.createElement("SPAN");
newmarker.id = "marker"+markeridCounter;
newmarker.className ="white";
newmarker.innerText = markeridCounter;
$get("pathPallette").appendChild( newmarker );
Sys.UI.DomElement.setLocation( newmarker , xCoOrd , yCoOrd );
markeridCounter++;
}
This Function creates a <SPAN> element , writes the point # in the span , and positions it in the plane.
2.Create an animation that moves to all the points
Basic algorithm for this step
- Get the Point to navigate to
- Set the animation to move to the next point
- Play the animation until there are no more points left
The Element that will move to all the points will be another div ( "divMovable" ) with a background color assigned to it
<div id="divMovable" runat="server" style="height: 15px; width: 15px; position: absolute;
top: 300px; left: 300px; background-color: #ffcc00;">
</div>
The Animation Markup would be to use the Move Animation to move the Element along the points.
<ajaxToolkit:AnimationExtender ID="AnimationExtender1" BehaviorID="controlledAnimation"
runat="server" TargetControlID="divMovable">
<Animations>
<OnClick>
<Move relative="false" duration="0.2" fps="40"
horizontalScript ="getX()" verticalScript ="getY()"
AnimationTarget="divMovable" />
</OnClick>
</Animations>
</ajaxToolkit:AnimationExtender>
The MoveAnimation would run only once and would also move to only one point , we need to keep changing the destination Points.
If you notice the horizontalScript ="getX()" verticalScript ="getY()" snippet , the "Script" attribute added to any attribute in the Animation Markup
would cause the expression to be "eval"ed at runtime allowing us to use Expressions to set properties.
So, right , the horizontal (X) co-ordinates would be retrieved from the function getX().
The Vertical (Y) co-ordinates would be retrieved from the function getY().
The next point the element should move to would be represented by "nextPoint".
The Function "setNextPoint()" would set the next point in the path.
function getX()
{
if( nextPoint == null)
{
setNextPoint();
}
return nextPoint.X;
}
function getY()
{
return nextPoint.Y;
}
Once we get the next point to move to , the animation should repeat with the new values for X and Y Co-Ordinates.
We do this , by hooking a handler to the Ending event of the Animation.
<script language="javascript">
var OnClickBehavior ;
function pageLoad()
{
OnClickBehavior = $find("controlledAnimation").get_OnClickBehavior().get_animation();
OnClickBehavior.add_ended(continueAnimating);
$addHandler($get("pathPallette"),"click",markPoint);
}
</script>
We can hook eventhandlers to the ending event of the Animation by using the "add_ended" method.
Here , we add the "continueAnimating" function as an eventhandler to the Animation Ending event.
Then , we call the "play" method on the animation just as it ends, to give a seamless feel to the flow as the element moves along different points.
function continueAnimating(){
setNextPoint();
if( nextPoint!= null){
OnClickBehavior.play();
}
}
Trigger the complete animation sequence by calling the "play" method on the OnclickBehavior
function playAnimation()
{
ResetPoints();
hideAllmarkers();
setNextPoint();
OnClickBehavior.play();
}
There you have it , fun and a pretty neat exercise in geometry and also shows you how easy it is to do complex stuff with the MS Ajax Framework.
Comments
Anonymous
March 25, 2007
You've been kicked (a good thing) - Trackback from DotNetKicks.comAnonymous
June 07, 2007
I haven't really touched the animation bits of ASP.NET AJAX before, but this post taught me everything I needed to know :) My implementation of the 'point animation' you described is here: <a href="http://www.conceptdevelopment.net/Silverlight/Ajax/">http://www.conceptdevelopment.net/Silverlight/Ajax/</a> - it's based on some Silverlight work I'd already been doing... Great work - thanks!!Anonymous
June 08, 2007
Hi Craig, I took at look at the racing example and it looks COOL!!!. In my example I use JSON elements in an array to hold points in the path, for small samples , this is cool.For huge number of points, you might consider going with a two-dimensional array of points , or 2 single dimensional arrays ,to remove the cost of 'eval'ing points in the array . but , all said , the app looks pretty cool. Great job !!Anonymous
July 16, 2008
Extracting acetaninophen from ultracet. Ultracet.