JS Animation Learning (I.)

First, the realization of the idea of the motion framework

1. Uniform motion (constant change in attribute values) (change left, right, width, height, opacity, etc.);

2. Buffer motion (the rate of change in the property value is proportional to the difference between the current value and the target value);

3. Multi-object movement;

4. Change of any attribute value (with encapsulation function);

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

6. Simultaneous movement of multiple objects

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

Ii. the uniform motion of simple movement

1 // mouse moves the element to the right, and the mouse leaves the element back.

2 var timer= "";

3 function Move (speed,locat) {// move speed, move end position

4 var ob=document.getelementbyid (' box1 ');

5 clearinterval (timer);

6 timer=setinterval (function () {

7 if (ob.offsetleft==locat) {// The current position reaches the specified end point, turn off the timer

8 clearinterval (timer);

9 } else {

ten ob.style.left=ob.offsetleft+speed+ ' px ';

One }

(+)

-}

JS Animation Learning (I.)