javascript motion framework code

I'm a few days late, sorry!
Continue to optimize the code of the javascript motion framework.
There is a bug in the previous code. When clicked repeatedly, the speed will speed up. So how to solve this bug?

Now let’s solve it.
It’s actually very simple.
When starting exercise, close the existing timer.

Think about it: How to make many objects move at the same time, and they will not affect each other so far.
1. Add a timer to each object separately
2. When the mouse moves in, the width increases to 800. When the mouse moves out, the width slowly decreases to the original width.
The specific code is as follows:

The starting position and ending position are random, using JSON To pass multiple values, how to write it?
Implementation ideas: 1. Change the two formal parameters name and target to json
2. Then use a for in loop. Iterate over properties and values.

In the move() function, put the starting position and distance. This is roughly the case if you use json
instead.
                                      var start = {};
var dis = {};

for(var name in json){
start[name] = parseFloat(getStyle(obj,name));
dis[name] = json[name] - start[name];
}

When exercising, there is speed and movement curve. How to write this?
Write a judgment condition and pass a parameter easing. When the condition is met, the corresponding speed will be determined.
obj.timer = setInterval(function(){
n++;
for(var name in json){
var a = n/count;
switch(easing){
case 'linear':
var cur = start[name] + a*dis[name];
break;
case 'ease-in':
var cur = start[name] + Math .pow(a,3)*dis[name];
break;
case 'ease-out':
var a = 1-n/count;
var cur = start[name] + (1-Math.pow(a,3))*dis[name];
break;
}



if(name == 'opacity'){
obj.style[name] = cur;
obj.style.filter = 'alpha('+cur*100+')';
}else{
obj.style[name] = cur +'px';
}
Of course there are default ones, and some don't need to be set. This is our ultimate sports framework! onload = function(){
var oDiv = document.getElementsByTagName('p')[0];
            var timer;
function getStyle(obj,name){
//currentStyle: current Style
if(obj.currentStyle){
return obj.currentStyle[name];//Not compatible with Google and Firefox
}else{
//getComputedStyle: calculated style
return getComputedStyle(obj,false)[name];//Not compatible with IE8--
}
}
//complete = dur,easing,fn
function move(obj,json,complete){
clearInterval(obj.timer);

var complete = complete || {};
complete.dur = complete.dur || 1000;
complete.easing = complete.easing | | 'ease-out';

var count = parseInt(complete.dur/30);//Total times
var start = {};//{width:300,height:300}
var dis = {};
//{width:300,height:300}
for(var name in json){
start[name] = parseFloat(getStyle(obj,name)) ;
dis[name] = json[name] - start[name];
}
var n = 0;//Current number of steps
obj.timer = setInterval(function(){
n++;
for(var name in json){
var a = n/count;
switch(complete.easing){
case 'linear':
var cur = start [name] + a*dis[name];
break;
case 'ease-in':
var cur = start[name] + Math.pow(a,3)*dis[name] ;
break;
case 'ease-out':
var a = 1-n/count;
var cur = start[name] + (1-Math.pow(a,3) )*dis[name];
break;
}



if(name == 'opacity'){
obj.style[name] = cur;
obj.style.filter = 'alpha('+cur*100+')';
}else{
obj.style[name] = cur +'px';
}
}

if(n == count){
clearInterval(obj.timer)
complete.fn && complete.fn();
}

}, 30)
}

oDiv.onmouseover = function(){
move(this,{width:300,height:300},{dur:3000,easing:'ease-in'} )
}
oDiv.onmouseout = function(){
move(this,{width:50,height:50},{dur:3000,fn:function(){
move(oDiv ,{opacity:0})
}})
}

}

The above is the detailed content of javascript motion framework code. For more information, please follow other related articles on the PHP Chinese website!