자바스크립트 모션 프레임워크 코드

몇일 늦어서 미안해요!
자바스크립트 모션 프레임워크의 코드를 계속해서 최적화하세요.
이전 코드에 버그가 있습니다. 반복해서 클릭하면 속도가 빨라집니다. 그러면 이 버그를 어떻게 해결할 수 있을까요?

이제 풀어보겠습니다.
실제로는 매우 간단합니다.
운동을 시작할 때는 기존 타이머를 닫으세요.

생각해 보세요. 많은 물체를 동시에 움직이게 만드는 방법은 지금까지 서로 영향을 미치지 않습니다.
1. 각 개체에 타이머를 별도로 추가합니다
2. 마우스가 안으로 들어가면 너비가 800으로 증가하고, 마우스가 밖으로 움직이면 너비가 천천히 원래 너비로 줄어듭니다
구체적인 코드는 다음과 같습니다.
< script type="text /javascript">
window.onload = function(){
var oDiv = document.getElementsByTagName('p');
var 타이머;
function getStyle(obj,name){
//currentStyle: 현재 스타일
if (obj.currentStyle){
return obj.currentStyle[name];//Google 및 Firefox와 호환되지 않음
}else{
//getCompulatedStyle: 계산된 스타일
return getCompulatedStyle(obj,false)[name]; //IE8과 호환되지 않음--
}
}
function move(obj,name,target,dur,fn){
clearInterval(obj.timer);
var count =parseInt(dur/30);//총 개수 횟수
var start = parseFloat(getStyle(obj,name));//시작으로부터의 거리
var dis = target - start;//Distance
// 단계 길이
var step = dis/count;
var n = 0 ;//현재 단계 수
obj.timer = setInterval(function(){
n++;
obj.style[name] = start+ n*step +'px';
if(n == count){
clearInterval( obj.timer)
fn && fn();
}

},30)
}
for(var i=0;i oDiv[i].onmouseover = function(){
move(this,'width',800,1000)
}
oDiv[i].onmouseout = function(){
move(this,'width',30,1000)
}
}
}

시작 위치와 끝 위치는 무작위이며, 여러 값을 전송하는 데 JSON을 사용합니다. 어떻게 작성하나요?
구현 아이디어: 1. 두 개의 형식 매개변수 이름과 대상을 json
        2. 그런 다음 for in 루프를 사용합니다. 속성과 값을 반복합니다.

move() 함수에 시작 위치와 거리를 입력합니다. 대신 json을 사용하세요
대략 그렇습니다.
                                      var start = {};
var dis = {};

for(json의 var 이름){
start[name] =parseFloat(getStyle(obj,name));
dis[name] = json[name] - 시작[이름];
}

운동할 때 속도와 움직임 곡선이 있는데 어떻게 써야 할까요?
판단 조건을 작성하고 조건이 충족되면 해당 속도가 완화됩니다.
obj.timer = setInterval(function(){
n++;
for(var name in json){
var a = n/count;
switch(easing){
case 'linear':
var cur = start[name ] + a*dis[이름];
break;
case 'ease-in':
var cur = start[이름] + Math.pow(a,3)*dis[이름];
break;
case 'ease -out':
var a = 1-n/count;
var cur = start[이름] + (1-Math.pow(a,3))*dis[이름];
break;
}



if(name == 'opacity'){
obj.style[name] = cur;
obj.style.filter = 'alpha('+cur*100+')';
}else{
obj.style[name ] = cur +'px';
}
}
물론 기본 항목이 있으며 일부는 설정할 필요가 없습니다.
window.onload = function(){
var oDiv = document.getElementsByTagName('p')[0];
              var 타이머;
function getStyle(obj,name){
//currentStyle: 현재 스타일
if(obj.currentStyle){
return obj.currentStyle [name]; //Google 및 Firefox와 호환되지 않음
}else{
//getCompulatedStyle: 계산된 스타일
return getComputeStyle(obj,false)[name];//IE8과 호환되지 않음--
}
}
// 완료 = dur, easing,fn
함수 move(obj,json,complete){
clearInterval(obj.timer);

var 완료 = 완료 || {};
Complete.dur = 완료.dur || Complete.easing || 'ease-out';

var count =parseInt(complete.dur/30);//총 횟수
var start = {};//{width:300,height:300 }
var dis = {};
//{너비:300, 높이:300}
for(json의 var 이름){
start[name] =parseFloat(getStyle(obj,name));
dis[name] = json [이름] - 시작[이름];
}
var n = 0;//현재 단계 수
obj.timer = setInterval(function(){
n++;
for(json의 var 이름){
var a = n/count;
스위치(complete.easing){
케이스 '선형':
var cur = 시작[이름] + a*dis[이름];
break;
케이스 'ease-in':
var cur = 시작 [이름] + Math.pow(a,3)*dis[이름];
break;
case 'ease-out':
var a = 1-n/count;
var cur = start[이름] + ( 1 -Math.pow(a,3))*dis[이름];
break;
}



if(name == 'opacity'){
obj.style[이름] = 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( ) {
이동(oDiv,{불투명도:0})
}})
}

}

위 내용은 자바스크립트 모션 프레임워크 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!