Smooth Movement In JavaScript

Interactive JavaScript applications frequently dynamically hide and reveal display components, often making use of a ‘slide’ effect. A naïve implementation of the slide effect will not accelerate or decelarate, which results in movement starting and stopping abruptly. SmoothMovement facilitates the implementation of a smooth slide effect by handling acceleration and deceleration, leading to a more pleasant user experience. SmoothMovement also allows the target of the movement to be changed at any time, and an initial velocity can be specified if smooth acceleration is not required. An example is shown below — click on the coloured bar to smoothly move the dividing line to a new position.

Using SmoothMovement

Download one of the files listed above and upload it to your website. Link to it from your page with code such as:

<script type="text/javascript" src="SmoothMovement.js"></script>

To use SmoothMovement, create a new instance with the following parameters:

position

the initial position

target

the target position

velocity

the initial velocity. The first call to the updatePosition() function will adjust the position by this value. This parameter is optional, and if it is not present it is assumed to be 0.

All three parameters are rounded to the nearest integer. This allows the output values to be used directly to style elements. The following are therefore equivalent:

var movement = new SmoothMovement(0,   100);
var movement = new SmoothMovement(0,   100,    0);
var movement = new SmoothMovement(0.2,  99.5, -0.4);

To obtain new positions, the updatePosition function is used. This funciton updates the position and velocity and returns the new position. The position is updated before the new velocity is calculated, so the position is adjusted by the initial velocity the first time the function is called. This means that if the SmoothMovement was created with an initial velocity of 0, or without the initial velocity being specified, the position will not change the first time the function is called.

In general, programmers should call updatePosition function from within a function called at regular intervals by the window.setInterval method. In the example above, the following funciton is used:

function updateDemonstration(){
  movementBarInner.style.width  = demonstration.updatePosition() + 'px';
}

The example also allows the target to be changed at any time — even while the position is still changing. This is done by using the changeTarget function, which accepts a new target as a parameter. As when creating the SmoothMovement, the target is rounded to the nearest integer.

Three other functions allow programmers to obtain the current statuts of the SmoothMovement. These are:

getPosition

returns the current position

getVelocity

returns the current velocity

hasStopped

returns true if the SmoothMovement has stopped, and false otherwise. The SmoothMovement has stopped if its position equals its target position and its velocity is 0.