Js animation Learning (1)

Js animation Learning (I) I. idea of implementing the motion framework

1. Constant motion (changing the attribute value at a constant speed) (changing left, right, width, height, opacity, etc );

2. Buffer motion (the speed at which the attribute value changes is proportional to the difference between the current value and the target value );

3. multi-object motion;

4. Changes to any attribute values (using encapsulated functions );

5. Chain motion (the same object completes a series of motion );

6. simultaneous movement of multiple objects

========================================================== ================

2. Uniform Motion of simple motion

The following functions are the basic framework of the motion series functions.

// Move the mouse over the element to the right, and move the mouse away from the element to go back. Var timer = ""; function Move (speed, locat) {// movement speed, Move the end point var ob = document. getElementById ('box1'); clearInterval (timer); // first clear the timer to prevent the nested call of the timer = setInterval (function () {if (ob. offsetLeft = locat) {// The current position reaches the specified end point, and the timer clearInterval (timer) is disabled );} else {// otherwise, the left attribute of the element is equal to the current left plus the speed of each change ob. style. left = ob. offsetLeft + speed + 'px '; }}, 30 )}

Example:

Call the above JS functions in the following HTML document