자바스크립트 완벽한 모션 프레임워크(코드를 한 줄씩 분석하여 모션의 원리를 쉽게 이해할 수 있음)_자바스크립트 기술

이름을 듣자마자 이 프레임워크를 사용하면 기본적으로 모든 온라인 효과를 얻을 수 있다는 것을 알 수 있습니다. 사실 이전 모션 프레임워크에는 여전히 한계가 있었습니다. 즉, 여러 값이 함께 움직이는 것을 허용하지 못했습니다.

그렇다면 이 문제를 어떻게 해결할 수 있을까요? 먼저 이전 모션 프레임을 살펴보겠습니다

function getStyle(obj, name) {
  if (obj.currentStyle) {
    return obj.currentStyle[name];
  } else {
    return getComputedStyle(obj, null)[name];
  }
}


function startMove(obj, attr, iTarget) {
  clearInterval(obj.time);
  obj.time = setInterval(function() {
    var cur = 0;

    if (attr == 'opacity') {
      cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
    } else {
      cur = parseInt(getStyle(obj, attr));
    }

    var speed = (iTarget - cur) / 6;

    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

    if (cur == iTarget) {
      clearInterval(obj.time);
    } else {
      if (attr == 'opacity') {
        obj.style.filter = 'alpha(opacity=' + cur + speed + ')';
        obj.style.opacity = (cur + speed) / 100;
      } else {
        obj.style[attr] = cur + speed + 'px';
      }
    }
  }, 30);
}

어떻게 수정하나요? 실제로는 매우 간단했습니다. 이전 프레임워크에서는 한 번에 하나의 스타일과 하나의 값만 전달할 수 있었습니다. 이제 이것을 json 객체로 변경하세요. 다들 이해해주실 거라 믿습니다.

호출하면 startMove(oDiv,{width:200,height:200}) 입니다. 필요하다면 콜백 함수를 추가하세요. 그럼 코드가 어떻게 바뀌었는지 살펴보겠습니다.

function startMove(obj, json, fnEnd)
{
  var MAX=18;
  //每次调用就只有一个定时器在工作(开始运动时关闭已有定时器)
  //并且关闭或者开启都是当前物体的定时器，已防止与页面上其他定时器的冲突，使每个定时器都互不干扰 
  clearInterval(obj.timer); 
  obj.timer=setInterval(function (){
    
    var bStop=true; // 假设：所有的值都已经到了
    
    for(var name in json)
    {
      var iTarget=json[name]; // 目标点
      
      //处理透明度，不能使用parseInt否则就为0了 
      
      if(name=='opacity')
      {
        
        // *100 会有误差 0000007 之类的 所以要用 Math.round() 会四舍五入
        var cur=Math.round(parseFloat(getStyle(obj, name))*100); 
      }
      else
      {
        var cur=parseInt(getStyle(obj, name)); // cur 当前移动的数值
      }
      
      var speed=(iTarget-cur)/5; // 物体运动的速度 数字越小动的越慢 /5 : 自定义的数字
      
      speed=speed>0?Math.ceil(speed):Math.floor(speed);
      
      if(Math.abs(speed)>MAX)speed=speed>0?MAX:-MAX;
      
      if(name=='opacity')
      {
        obj.style.filter='alpha(opacity:'+(cur+speed)+')'; //IE
        obj.style.opacity=(cur+speed)/100; //ff chrome
      }
      else
      {
        obj.style[name]=cur+speed+'px';
      }
      
      // 某个值不等于目标点 
      if(cur!=iTarget)
      {
        bStop=false;
      }
    }
    
    // 都达到了目标点
    if(bStop)
    {
      clearInterval(obj.timer);
      
      if(fnEnd) //只有传了这个函数才去调用
      {
        fnEnd();
      }
    }
  }, 20);
}

bstop 가정이 있는 이유는 무엇인가요?

실제로 startMove(oDiv,{width:101,height:200});를 호출하면 너비가 101이 되어 이동이 완료되었으나 높이에 도달하지 못한 상태인데, 현재 타이머. 무브먼트가 종료되었으며, 특별한 상황에서는 버그가 나타날 수 있습니다. 설명:

실제로는 모든 동작이 완료된 후 타이머를 꺼야 하지만, 실패가 없으면 타이머를 꺼야 합니다. 프로그램은

을 가정하여 처음에 true인 부울 값을 정의하는 것입니다.

모든 값이 도착했습니다. 목표 지점과 같지 않은 값이 있으면 bstop은 false입니다. 전체 사이클이 끝난 후 bstop이 true이면 모든 동작이 완료되었음을 의미하며 이때 타이머가 꺼집니다.

그러면 CSS2에는 적용 가능하지만 CSS3에는 적용되지 않는 모션 프레임워크가 기본적으로 완성되었습니다.

요약:

모션 프레임워크의 진화

startMove(iTarget) 모션 프레임
startMove(obj,iTarget) 여러 개체
startMove(obj,attr,iTarget) 모든 값
startMove(obj,attr,iTarget,fn) 체인 모션
startMove(obj,json,fn) 완벽한 움직임

O(∩_∩)O감사합니다~