Motion from zero: an animation is an object

Three loose arguments get swapped. An object names them. This object is the slide of a price label. durationMs is the time, 320 milliseconds. x is how far the label moves, 24 pixels. opacity is a number from 0 to 1. A function can take the object and read the field it needs.

One object is the whole animation#

Three positional arguments get swapped. An object names them. durationMs says both the role and the unit. x is the horizontal distance in pixels. opacity is a fraction from 0 to 1, and the type of the field will not stop you from storing 2. A player should clamp that or refuse it, next to the object, because every caller shares the mistake otherwise. A second animation is a second object. It does not alias the first.

1. durationMsnumber320
2. xpixels24
3. opacitynumber1

const move = {
  durationMs: 320,
  x: 24,
  opacity: 1,
};
console.log(move.durationMs, move.x, move.opacity);

320 24 1

The fields are the contract#

move.durationMs is 320. move.x is 24. move.opacity is 1, fully visible. A function function play(move) { return move.durationMs; } takes the whole animation. The caller cannot pass the distance where the duration belongs, because there is one argument and the fields have names.

opacity: 2 would be a number, and this program would print it. The type of the field does not stop a useless value. A player should clamp opacity to the range 0 through 1, or refuse it. The object is where that check belongs, next to the data.

Pass the object to the next step#

A second animation is a second object, { durationMs: 180, x: 0, opacity: 0 }. It does not disturb move. Keep one object per thing that moves. The next lesson is about which fields are cheap to change every frame, and which ones make the page recompute layout.