How to make a smooth movement?

How to make a smooth movement of an object? The version of jQuery I can not take, I do not need for JavaScript.

Here is how here, for example: otvety.google.ru/otvety/, in the "Popular topics".


I watched the jQuery code, found nothing there, there's not so openly.


My attempts:


At first I decided to practice on JavaScript e: to move smoothly div

First, did this:

d = distance

t — time for which it is necessary to pass distance d in seconds

t1 — start time


Here's a clipping of the code:
t1 = new Date();
setTimeout(move);

function move() {
 var t2 = new Date();
 if ((t2 - t1)/1000 > t) {
 div.style.left = d + 'px';
}
 else {
 div.style.left = ((t2 - t1) / (1000 * t)) * d + 'px';
 setTimeout(move, 50);
}
}



But it's not that, not so smoothly as in the Answers of Google.

Then I tried to add acceleration:

var a = 1.5;//how much to increase the speed
var at = 1;//how long to increase speed at a time (a / at is the acceleration)
...
function move() {
...
 else {
 var t0 = (t2 - t1) / (1000 * t);
 div.style.left = (t + t * a/at) * d + 'px'
 setTimeout(move, 50);
}
...
}



Also did not work.

Tell me if you know.
October 10th 19 at 15:30
3 answers
October 10th 19 at 15:32
Solution
In the code strongly did not penetrate, hit at random:
Perhaps you are talking about singe (easing).
If we imagine time from the start animation to the end as the interval from 0 to 1, and the initial position of the object (or other property) and end also as the interval from 0 to 1, the Ising function is a function that gives the correspondence of each point of the first interval of the second.

In the simplest case, the Ising function returns the default value unchanged (for the start time return 0 end-1). In this case, the object moves strictly linearly without accelerations and decelerations, because the movement seems Jumpy and unnatural.

To give the animation a smoother appearance, you need to simulate acceleration. In JQuery the function of Ising default has the form (simplified):
swing function(t) {
 return (-Math.cos(p*Math.PI)/2) + 0.5;
}

Ie uses a sinusoidal dependence.

Here are examples of how other functions of the Ising connected third-party plugin and not part of jquery:
www.lemonsanver.com/jQuery/easingAnimationPlugin.html

In order to use the same method of working where whatsoever, it is necessary to organize the process in the following way:
1) At the start of the animation is known for its duration and recorded time of the start of the animation
2) also know the final value of the animated parameter (or several) is written to their initial value.
3) Periodically call the function animation (timer or cycle). From the current time, start time of the animation and the duration she finds the time t is a number from 0 to 1.
4) t is passed to the function Ising
5) From the obtained values and data on the initial and final values of the parameters calculated current value.
6) Paragraph 3) is repeated until the animation time expires.
thanks, that's what I was looking for. +1 in karma. - mercedes.Dibbert commented on October 10th 19 at 15:35
October 10th 19 at 15:34
About animations in JS can be read here.
thanks, but there I found such a smoothness, like jQuery - mercedes.Dibbert commented on October 10th 19 at 15:37
October 10th 19 at 15:36
View this website: jstween.blogspot.com/

There's a js implementation for the smooth movement of objects.

If suddenly will not work, try to search in Google on the phrase:

motion tween algorithm
thank you and see. - mercedes.Dibbert commented on October 10th 19 at 15:39

Find more questions by tags JavaScript