js 애니메이션 학습 (4)

7. 다중 속성 캡슐화 기능



이전 섹션에서는 단일 속성의 값을 개별적으로 변경하는 애니메이션을 소개했습니다. 다중 속성 캡슐화 기능. 하나의 함수가 여러 속성 값 변경을 처리할 수 있습니다.

먼저 매우 중요한 함수인 getStyle()을 소개합니다. 이 함수는 요소의 현재 속성 값을 반환합니다. 두 가지 형식 매개변수는 요소와 속성입니다. 브라우저 호환성 문제에 주의하세요.

//获得元素样式专用封装函数，返回该属性的当前值
 function getStyle(obj,attr) {
     if (obj.currentStyle) {//IE浏览器
         return obj.currentStyle[attr];
     } else {
         return getComputedStyle(obj,false)[attr];//火狐浏览器
     }
 }

다음은 여러 속성을 변경하는 애니메이션을 구현하는 함수입니다.

//多物体改变样式(宽，高，字体大小，边框等，透明度需单独分析）速度缓冲封装函数
function startMove(obj,attr,target) {//元素，改变的样式属性，达到的目标值
    clearInterval(obj.timer);//首先清除定时器
    obj.timer=setInterval(function(){
        //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=(target-icur)/8;//分母为比例系数K，可调
        speed=speed>0?Math.ceil(speed):Math.floor(speed);//缓冲速度要取整，不然移动不到终点就停止
        //3.检测运动是否停止
        if (icur==target) {
            clearInterval(obj.timer);
        } 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를 통해 확인해 보겠습니다.

<style type="text/css">
     #div1,#div2{
         width: 200px;
         height: 200px;
         background: red;
         border: 1px solid black;
         margin-bottom: 10px;
     }
 </style>

<div id="div1"></div>
 <div id="div2"></div>
 <script type="text/javascript">
 window.onload=function(){
     var ob1=document.getElementById(&#39;div1&#39;);
     var ob2=document.getElementById(&#39;div2&#39;);
     ob1.onmouseover=function(){
         startMove(this,&#39;width&#39;,400);
     }
     ob1.onmouseout=function(){
         startMove(this,&#39;width&#39;,200);
     }
     
     ob2.onmouseover=function(){
         startMove(this,&#39;opacity&#39;,31);
     }
     ob2.onmouseout=function(){
         startMove(this,&#39;opacity&#39;,100);
     }
     //alert(parseFloat(0.07*100));弹出7.00000000001而不是7    所以上面程序中的parseFloat前加四舍五入Math.round函数
 }
 </script>

이렇게 startMove() 함수를 통해 객체의 너비와 투명도를 변경할 수 있습니다.



8. 체인 이동



위에서 이야기한 것은 이벤트가 이동을 유발한다는 것입니다. div의 너비 투명도의 체인 이동. 위의 startMove 함수를 기반으로 공식 매개변수 fn을 콜백 함수로 추가합니다. 프로그램 내부에 동작이 중지되었는지 여부를 감지하는 판단을 추가합니다. 코드의 18번째 줄에 if(fn) fn(); 🎜>

다음은 간단한 div입니다

//多物体改变样式(宽，高，字体大小，边框等，透明度单独分析）速度缓冲封装函数
 function startMove(obj,attr,target,fn) {//元素，改变的样式属性，达到的目标值，回调函数
     clearInterval(obj.timer);
     obj.timer=setInterval(function(){
         //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=(target-icur)/8;//分母为比例系数K，可调
         speed=speed>0?Math.ceil(speed):Math.floor(speed);//缓冲速度要取整，不然移动不到终点就停止
         //3.检测运动是否停止
         if (icur==target) {
             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)
 }

js 부분에 함수가 중첩되어 있다는 점에 주의하세요.

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

마우스가 떠날 때 변경되는 순서는 다음과 같습니다. 마우스가 지나갈 때와 반대입니다.

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

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