Motion-Motion Frame

The first step:
First, get the div you want to change.
var Obox=document.getelementbyid (' box '); div Object

Step Two:
(1). Define a move function. How to define?
What do we have to do first? How does it work? The finishing touches after the operation?
-----> OBox (div object)
-----> What do we want him to look like? For example, left changes, such as top changes. This must be in the form of JSON. {left:200, top:400}
-----> Finishing work? That's a function. Optional.
Move (obj, JSON, options)

Step Three:
Steps in the Move function:
(1). Since the third parameter options are optional, we first need to determine this parameter, if any, use, if not, the default parameter settings.
options=options| | {};
options.duration=options.options| | 700;
Options.easing=options.easing| | ' Liner ';

(2) Set the initial value and distance

Since the motion of our object has an end position at the end, this position is specified by the second parameter JSON, and since there is an end position, we need to determine the starting position, the range of the change is the end position minus the start position, where we are referring to the distance

var start={}; Initial value
var dis={}; The value of the change
for (var name in JSON) {
Start[name]=parsefloat (GetStyle (obj,name)); Get the initial value
Dis[name]=json[name]-start[name]; The change value equals the end value minus the initial value.
};

(3). How long do we want to go through the whole process? This is the options.duration specified in the third parameter. And you need to exercise count times altogether.

var count=math.floor (OPTIONS.DURATION/30);

Define a variable that holds the number of times the current has been moved:

var n=0;

(4). Open timer, every 30ms movement

Obj.timer=setinterval (function() {n++;  for(varNameinchJSON) {                Switch(options.easing) { Case' Liner ':                        varA=n/count;varcur=start[name]+dis[name]*A;  Break;  Case' Ease-in ':                        varA=n/count;varCur=start[name]+dis[name]*math.pow (a,3);  Break;  Case' Ease-out ':                        varA=1-n/count;varcur=start[name]+dis[name]* (1-math.pow (a,3));  Break;                }; if(name== ' opacity ') {obj.style.opacity=cur; Obj.style.filter= ' Alpha (opacity: ' +cur*100+ ') '; }Else{Obj.style[name]=cur+ ' px ';            }            }; if(n==count) {clearinterval (obj.timer) Options.complete&&Options.complete (); }        },30);

(a). First movement:

(1). N=n+1, at which point N is 1.

(2). Judge how the object moves, at a constant speed, and so on. Here, we analyze the uniform motion.

At this time we go the total whole is: N/count--------> 1/count, the proportion of sports.

Our whole movement distance is dis[name], for example, we are now analyzing the left movement, is the uniform movement to the right, the change is the value, then the whole distance is dis[left]. For example, equals 200px.

Then our first movement distance is: dis[left] * (1/count) ===200* (1/count).

Then the end distance of our object after the first movement is equal to the initial value plus the distance of the first motion: cur = start[left] + 200* (1/count)

So after the first movement, the object's position: obj.style[left]=cur+ ' px ';

(b). Second movement:

(1). N=n+1, at which point N is 2.

(2). Judge how the object moves, at a constant speed, and so on. Here, we analyze the uniform motion.

At this time we go the total whole is: N/count--------> 2/count, the proportion of sports.

Our whole movement distance is dis[name], for example, we are now analyzing the left movement, is the uniform movement to the right, the change is the value, then the whole distance is dis[left]. For example, equals 200px.

Then our first movement distance is: dis[left] * (2/count) ===200* (2/count).

Then the end distance of our object after the first movement is equal to the initial value plus the distance of the first motion: cur = start[left] + 200* (2/count)

So after the first movement, the object's position: obj.style[left]=cur+ ' px ';

........ Later and so on

(5) When the N==count movement is over

(a) Close the timer, the end of this campaign

(b) Determine if there is an incoming callback function in the options, and if there is an incoming callback function, execute this callback function

if (n==count) {    clearinterval (obj.timer)    options.complete&&options.complete ();}

Full code:

<!     DOCTYPE html>{margin:0; padding:0;            } #box {width:150px;            height:150px;            background:red;            Position:absolute; Left:0; Top:0; }    </style> <script>functionGetStyle (obj,name) {return(obj.currentstyle| | getComputedStyle (obj,false) ) [name]; }    functionMove (obj,json,options) {//Set Default valuesOptions=options| |{}; Options.duration=options.options| | 700; Options.easing=options.easing| | ' Liner; //total number of times        varCount=math.floor (OPTIONS.DURATION/30);//set initial values and distances        varstart={}; vardis={};  for(varNameinchJSON) {Start[name]=parsefloat (GetStyle (obj,name)); Dis[name]=json[name]-Start[name];        }; //Current number of walks        varN=0; Obj.timer=setinterval (function() {n++;  for(varNameinchJSON) {                Switch(options.easing) { Case' Liner ':                        varA=n/count;varcur=start[name]+dis[name]*A;  Break;  Case' Ease-in ':                        varA=n/count;varCur=start[name]+dis[name]*math.pow (a,3);  Break;  Case' Ease-out ':                        varA=1-n/count;varcur=start[name]+dis[name]* (1-math.pow (a,3));  Break;                }; if(name== ' opacity ') {obj.style.opacity=cur; Obj.style.filter= ' Alpha (opacity: ' +cur*100+ ') '; }Else{Obj.style[name]=cur+ ' px ';            }            }; if(n==count) {clearinterval (obj.timer) Options.complete&&Options.complete (); }        },30); } window.onload=function(){        varObox=document.getelementbyid (' box '); Move (obox,{left:300,width:300},{Complete:function() {Move (obox,{top:200})            }        })    }; </script>
Motion-Motion Frame