js 애니메이션 학습 (5)

9. 여러 속성이 동시에 이동합니다



이전 예에서는 각 속성이 독립적으로 이동하도록 하려면 어떻게 해야 할까요? 예를 들어 onmouseover 이벤트에서 div의 너비와 높이가 동시에 변경되기를 원합니다. 다음 기능은 별도의 확대입니다.

window.onload=function(){
var ob1=document.getElementById('div1');
ob1.onmouseover=function(){
startMove(ob1,'width',400);
}
}

startMove 아래에 startMove를 추가하는 아이디어가 있습니다.

window.onload=function(){
var ob1=document.getElementById('div1');
ob1.onmouseover=function(){
startMove(ob1,'width',400);

　　　　　 startMove(ob1,'height',400);
}
}

이 아이디어만은 잘못된 것으로 나타났습니다. 높이는 변경되었지만 너비는 변경되지 않았습니다. 왜? startMove 함수는 처음에 타이머를 닫으므로 첫 번째 startMove 함수가 막 실행되기 시작했을 때 두 번째 startMove는 이미 실행을 시작했으며 두 번째 startMove의 닫기 타이머 함수는 첫 번째 startMove의 타이머를 덮어씁니다. 객체는 변경할 수 없으며 높이만 변경됩니다. 그렇다면 어떻게 해결해야 할까요? 여기서는 json을 사용해야 합니다:

var json={a:12,b:13};
for(var i in json){
alert(i);
alert(json[i]);
}

json의 값은 쌍으로 나타나며 각 쌍은 변수와 변수의 값입니다. for in 루프를 사용하여 각 변수 쌍과 해당 값을 얻을 수 있습니다. 위 프로그램은 a,12,b,13 순으로 팝업됩니다.

stareMove 프레임워크를 살펴보면 매개변수의 "속성"과 "대상 값"이 한 쌍의 값임을 알 수 있습니다. 즉, 하나의 startMove는 한 쌍의 값만 변경할 수 있다는 의미입니다. 여러 쌍의 값에 대한 변경 사항을 구현하는 방법은 무엇입니까? startMove를 이렇게 살펴보겠습니다.

startMove(obj,{attr1:target1,attr2:target2},fn) 파란색 부분이 json 형태이므로 원래 startMove를 기준으로 변경합니다. 파란색 부분을 json으로 바꾸고, 프로그램의 대상을 json[attr](해당 속성의 대상 값)로 바꿉니다. 변경된 startMove 함수는 다음과 같습니다. (1, 4, 13, 16행이 변경되었습니다.)

function startMove(obj,json,fn) {//元素，改变的样式属性，达到的目标值，回调函数
     clearInterval(obj.timer);
     obj.timer=setInterval(function(){
         for(var attr in json){
             //1.取当前值
             var icur=0;//icur返回物体样式属性值的大小
             if (attr=='opacity') {//如果属性是透明度，透明度的返回值是零点几的小数
                 icur=Math.round(parseFloat(getStyle(obj,attr))*100);//round函数避免透明度值在小数之间来回跳动
             } else {
                 icur=parseInt(getStyle(obj,attr));
             }
             //2.算速度
             var speed=(json[attr]-icur)/8;//分母为比例系数K，可调
             speed=speed>0?Math.ceil(speed):Math.floor(speed);//缓冲速度要取整，不然移动不到终点就停止
             //3.检测运动是否停止
             if (icur==json[attr]) {
                 clearInterval(obj.timer);
                 if(fn){//上一个运动停止后判断一下是否还有下一个运动
                     fn();
                 }
             } else {
                 if (attr=='opacity') {
                     obj.style.filter='alpha(opacity:'+(icur+speed)+')';//IE浏览器
                     obj.style.opacity=(icur+speed)/100;//火狐浏览器
                 } else {
                     obj.style[attr]=icur+speed+'px';
                 }
             }
         }
     },30)
 }

다음은 div에서 startMove 함수를 호출하여 너비와 높이를 변경한 효과입니다. 동시에:

<style type="text/css">
     #div1{
         width: 200px;
         height: 200px;
         background: red;
         border: 2px solid black;
         filter: alpha(opacity:30);
         opacity: 0.3;
     }
 </style>

<script type="text/javascript">
 window.onload=function(){
     var ob1=document.getElementById(&#39;div1&#39;);
     ob1.onmouseover=function(){
         startMove(ob1,{width:400,height:400});//json格式
     }
 }    
 </script>

한 쌍의 투명도를 추가하여 너비, 높이 및 투명도를 동시에 변경할 수 있습니다.

<script type="text/javascript">
 window.onload=function(){
     var ob1=document.getElementById(&#39;div1&#39;);
     ob1.onmouseover=function(){
         startMove(ob1,{width:400,height:400,opacity:100});
     }
 }    
 </script>

이 프레임워크의 문제점: 언제 너비를 201로 변경하고 싶은데 높이가 변경됩니다. 값이 400이고 투명도가 100으로 변경되면 문제가 발생합니다. 너비는 201이 되지만 높이와 투명도가 목표값에 도달하지 못하고 움직임이 발생합니다. 중지합니다. 그 이유는 17번째 줄에서 타이머가 꺼졌기 때문이다. 원본 프로그램에서는 하나의 속성값이 목표값에 도달하는 한, 각 속성이 목표값에 도달했는지에 대한 판단은 없다. 따라서 너비가 목표 값에 도달하고 높이와 투명도가 목표 값에 도달하지 않으면 타이머가 꺼집니다. 해결 방법: 타이머를 닫기 전에 모든 속성이 목표 값에 도달했는지 확인해야 합니다. (2행과 17행 이후 변경사항이 있습니다.)

function startMove(obj,json,fn) {//元素，改变的样式属性，达到的目标值，回调函数
     var flag=true;//定义一个标杆，假设所有运动都达到了目标值
     clearInterval(obj.timer);
     obj.timer=setInterval(function(){
         for(var attr in json){
             //1.取当前值
             var icur=0;//icur返回物体样式属性值的大小
             if (attr=='opacity') {//如果属性是透明度，透明度的返回值是零点几的小数
                 icur=Math.round(parseFloat(getStyle(obj,attr))*100);//round函数避免透明度值在小数之间来回跳动
             } else {
                 icur=parseInt(getStyle(obj,attr));
             }
             //2.算速度
             var speed=(json[attr]-icur)/8;//分母为比例系数K，可调
             speed=speed>0?Math.ceil(speed):Math.floor(speed);//缓冲速度要取整，不然移动不到终点就停止
             //3.检测运动是否停止
             if (icur!=json[attr]) {//如果不是所有的运动都达到目标值
                 flag=false;
             }
             if (attr=='opacity') {//没达到目标值的继续运动
                 obj.style.filter='alpha(opacity:'+(icur+speed)+')';//IE浏览器
                 obj.style.opacity=(icur+speed)/100;//火狐浏览器
             } else {
                 obj.style[attr]=icur+speed+'px';
             }
             
             if(flag){//如果所有的运动都达到了目标值，再关闭定时器，然后看看有没有链式运动
                 clearInterval(obj.timer);
                 if(fn){
                     fn();
                 }
             }
         }
             
     },30)
 }

이제 이 수정된 프레임워크는 웹사이트에서 일반적으로 사용되는 일부 작은 애니메이션을 이 프레임워크를 사용하여 구현할 수 있는 완벽한 프레임워크입니다.

위는 js 애니메이션 학습(5) 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 주목해주세요!