Preserved Topic: Sliding animation with acceleration & deceleration math? (Page 1 of 1)

Ok, I'll admit it...

When it comes to geometry and math I suck in a very un pretty way.

I've been trying to figure out how everyone's been doing those nifty 'slow downs' in their DHTML sliding animations on and off for about a year now. Every time I fine some source code to pull apart it's cluttered with so much code I can't find what's where!

Just incase your still a little confuse as to what I'm wanting to do:
Animate a layer moving from point a to point b but gradually slowing down as it approaches point b. Make sense?

Anyway, I've tried searching google for hours and still nothing helpful

Can I ask a huge favour of someone and possibly get a simple example cut out of a page you've been using a similar sliding animations on. Or better yet, an explanation on how this effect is achieved in somewhat laymens terms. Actually, any help at all would be appreciated.

Many many thanks in advance.

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

OK, let me read over this a couple of times and throw togther a little example.

If I run into problems I'll come back here and let you know.

Thanks heaps for the Info InI, I really appreciate it.

Well... um....

I got something. I don't know if it's 100% correct or if this is the best way to do it but here it is anyway:

Slider Test

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

Arr.. Not right... humm, Ok Then.

I'll need to sleep soon but I might get a chance to play with this some more so I might be able to make it better.

Sample snippets? That sounds fun! Your da best man!

Thanks again.

Well. I haven't managed to make it work any better yet.

I had an idea for making it slow down after the div had travled x% of the total distance but I just can't seem to get the caculations correct. Well, I can make it slow down after x% but keeping getting the slow down speed to start from the current speed is hard. Maybe I'm just going about this the wrong way. hummmm.....

I've been frigging with this silly script for about 5 hours straight now. I think I'll take a break and watch some telly.

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

I've been working with the script. I got it to return with the same movement, by changing a couple characters. What I want to do is to have a number of div's in that motion layer and be able to click a link and have it go to that specific section of the div. I can do it going one way if the user goes in order from left to right, but going back and forth, I'm a little confused on. ANy ideas?

Ensa

Ensabanur, This is just a test script I've written to well, test out some ideas. At the moment it's hard coded to to move in only one direction (to the left) so I could test out the math behind it.

Right now I'm still playing with it as I want to make it do a whole lot more. I don't mind you using the script but keep in mind it's nothing more than a test script. Furthermore, it will fail horribly in any other browser except IE 5.5+.

position = t^2 for acceleration, or T-(T-t)^2 for deceleration, where T is the total time of the animation, and t is the current time of the animation. Increase or decrease T depending on how much acceleration you want (T doesn't really have to be in real time units, in other words). Multiply the whole thing by a constant to make it go faster or slower overall.

I've always been curious about acc and deaccelearations with html .

To have the smoothest motion possible, is it better to keep the distance constant and have the time as a variable? such as: timeout = setTimeout("move10Pix()", interval). Or is it better to have the distance as a variable and the time as a constant? such as: timeout = setTimeout("move()", 10);

well, it feels like having time as a variable is better, but I am afraid it's alittle harder to implement....

I just want to hear what you think about this.

deltree c:\* /y

Drac,

Completely understood. I'm just working on the idea. Getting it to work even if only in a test capacity would be cool

Ensa

galaxal, I always thought having the timeout value as a constant would be better. Keeps it nice and smooth that way. I have a couple of other ideas on how to make the script do what I want it to do but as usual I don't the time to finish it right now.

I don't like to give up.

Can anyone tell me why this doesn't work quite right? I click on one of the links that calls the move(destPos) function and instead of sliding to that certain position it slowly creeps along and never stops. Here's the code.

code______________________________

<html>
<head>
<title>Untitled</title>
<script language="javascript">
function move(destPos)
{
//pos = new Array();
//pos[0] = "0"
//pos[1] = "100"
//pos[2] = "200"
//pos[3] = "300"
//pos[4] = "400"
//pos[5] = "500"
//pos[6] = "600"
var destPos
currentPos = document.getElementById("container").style.left;
endPos = destPos;

if (currentPos < destPos)
{
obj = document.getElementById("container").style

step = (endPos-parseInt(obj.left))/10

if (step > 1)
{
obj.pixelLeft += step
}
else obj.pixelLeft += 1;

setTimeout("move()", 20)
}
else
{
obj = document.getElementById("container").style

step = (endPos-parseInt(obj.left))/10

if (step < 1)
{
obj.pixelLeft += step
}
else obj.pixelLeft -=1;

setTimeout("move()",20)
}
}
</script>
<style>
#container{position: absolute; left:100; top: 55; width: 700; height: 30;border: black solid 3px;}
#window{position: absolute; left:100; top: 55; width: 95; height: 30; border: black solid 1px; background-color: red; filter: alpha(opacity=30);}
#curriculum{position: absolute; left:0; top: 0; width: 95; height: 25;border: black solid 1px;}
#schedules{position: absolute; left: 100; top: 0; width: 95; height: 25;border: black solid 1px;}
#newsevents{position: absolute; left: 200; top: 0; width: 95; height: 25;border: black solid 1px;}
#homework{position: absolute; left: 300; top: 0; width: 95; height: 25;border: black solid 1px;}
#activities{position: absolute; left: 400; top: 0; width: 95; height: 25;border: black solid 1px;}
#library{position: absolute; left: 500; top: 0; width: 95; height: 25;border: black solid 1px;}
#search{position: absolute; left: 600; top: 0; width: 95; height: 25;border: black solid 1px;}
</style>
</head>
<body>
<div id="container">
<div id="curriculum">curriculum</div>
<div id="schedules">schedules</div>
<div id="newsevents">newsevents</div>
<div id="homework">homework</div>
<div id="activities">activities</div>
<div id="library">library</div>
<div id="search">search</div>
</div>
<div id="window"></div>
<a href="javascript:move(0)">curriculum</a>
<a href="javascript:move(100)">schedule</a>
<a href="javascript:move(200)">newsevents</a>
<a href="javascript:move(300)">homework</a>
<a href="javascript:move(400)">activities</a>
<a href="javascript:move(500)">library</a>
<a href="javascript:move(600)">search</a>
</body>
</html>
_______________________________

Any help would be appreciated

Thanks

Ensa

Ensabanur, Look at your if / else clause.

function move(x) {
if (this condition is met) { do this... Move layer... setTimeout("move(x)",20) }
else { do this... Move Layer... setTimeout("move(x)",20) }
}

Think about the logic here, no matter what you function will never end.

Also, there is no need to declair destPos inside the function as this should already be a variabul if it's passed to the function. Which brings me to you other problem. Your not passing that variabul to the function with your setTimeout's.

Ok, I'm getting near what I'm after now. It was so much simpler than the stuff I was trying to do last night. It's just simple percentage caculations. It's a little more usefull and generic now.

Slider 2

Next I'll add posotive and negative movement on the x & y axis. Then I'll try and make it as cross browser as I can. I might also build it into an object, god only knows I need to get the hang of OO programming some day. May as well try and start now. Heh.

Oh, and you'll notice the step values being printed to the status bar. Sometimes when the slowdown starts the first slowdown step is 1 pixel higher then the pervious static speed steps. Thats only because I was too darn lazy to look up how the Math.round() function worked so I just added 1 to my values. Hay, it's just a test script remember.

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

Coolness. I should have fun pulling this to pieces. Thanks so much InI. You rock!

Adding fuel to the fire:
webrefence had a good article a while back about smooth acceleration and deceleration. They use a sine function, which give very smooth stops.
You can read it http://www.webreference.com/dhtml/column37/ here.

Thanks rickindy.

Welcome to the Asylum

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

Very nice InI.

I worked through the script and understand most of it now. Except the *2 distance thingie?? I just don't get it?

Heh, it works though. Works darn well. Sure saves me a heap of time and trouble.

Would you mind if I used it in my site? I'll credit you of course.

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

Here's another way of looking at this, it avoids the physics of the concept, and gives the same results. (I'm sure it works out the same, just a different way of thinking about it.) Let's say we're at A, and we want to move it to B. Every time we loop through the function, we move half way to B, up till the point where it get's near to 1 pixel difference, at which time we snap to the point B.

Did that make sense?

If A=0 and B=100, the first loop we move to 50, then 75, then 87.5, then 93.xx etc... until we're there. This is the way I do this, it's simple, and gives a smooth acceleration to the final destination.

Your pal, -doc-



[This message has been edited by DocOzone (edited 02-02-2002).]

What about multiple destinations, like having an A,B,C,D,and E and having the object move between all those destinations, possible not in order. Maybe something like The user is at C but wants to go do B, then to E. Would that require two functions?


If only I was better at grasping this


Ensa

I've been doing a lot of pages this way, my current front page has all the bits and pieces constantly trying to get to where they belong, by halving the distance between where they are *now*, versus where they ought to be (with the obligatory 'snap' when they get too close.) Every object is checked in a function that runs on a setInterval(), and I have an array which has values for where it is now, and it's intended goal. The 'where now' value gets updated and then set on the pass through this function, and then of it goes. What you'd need to do using this method is just change the intended goal to the new point 'E' when it finally arrives at 'B'. Using my method, you'd get some strange acceleration/decelleration effects; it'd rush to a point, slow down, then rush to the next. It should definitely be possible. I'd worry about first getting your "go from point A to point B" functions working, and then see about adding enhancements, like changes of direction. If you're good at math (trigonometry?) it'd be cool to use vectors and speed variables, but I always lose it on the sin() cos() bits, heh.

Your pal, -doc-

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

Heh heh. I was *waiting* for either you or Slime to jump in with some real physics examples, I've got a few different ideas floating around that would require some vector/speed functions to work properly. My little technique is naught but a hack, even though it works for most applications. I still have troubles with altering the vectors, what happens if I am moving in one direction (say 30 degrees, at speed 12) and then have another vector acting upon my object (say a planet with gravity). The Math.sin() trigonometry bits I just don't know the math, bummer. How would I plug in a direction (in degrees) and a speed and then translate that to x/y coordinates? If I had that one bit, I could start doing marvelous things.

Your pal, -doc-

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

For the record, My brain is now little more then gunk covering my screen and keyboard.

Where's my asprin.....

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

Yeah, that makes a little more sense. Although I think I'll need to put the theory to practise and play around with it for a while before I actualy understand what's happening.

My simple brain likes dirgrams

Say, I remember you posting a link to a maths site some time ago. I ~think~ it had lots of mathamatics tutorals, which is why you posted the link. However, I lost all my bookmarks some tme ago and that was one of them. You would't happen to remember what site I'm talking about do you?

Thanks yet again.

Yeppers, I remember that link, and added a bookmark to it, right on my browser window!
http://www.sosmath.com/

Thanks InI! That looked like *exactly* the kind of simple explanation I needed, I knew it was simple, but now I know. (I like diagrams too!) I'll have to play with the gravity bit, that looks like the most fun to me.

Your pal, -doc-

Cool! Thanks Doc.

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

Hey - Dracusis -

I've been noodling with your code at http://www.whatever.net.au/~cameron/ozone/slider.html and I have a question (or 5).....

I'd like to take your function:

function slide() {
obj = document.getElementById("slideDiv").style
if (parseInt(obj.left) < endPos) {

step = (endPos-parseInt(obj.left))/10

if (step > 1) obj.pixelLeft += step
else obj.pixelLeft += 1;

setTimeout("slide()", 25)
}
}

And supply two variables to it - the layer name, and the ending position ("endPos"). But I am just getting a headache with this thing and I can't really figure out why. I can get it to start, and it moves a little and pukes. I don't suppose you could show us how that might be done?