기본 js에서 jquery 함수 animate() 애니메이션 효과를 구현하는 간단한 예

회사에서 한 달 동안 인턴 생활을 한 후 점차 CSS와 HTML에 익숙해졌습니다. 지난 며칠간 js를 공부하기 시작했습니다. 오늘은 js에서 jquery animate 함수를 작성해본 결과 성능이 좋았습니다. 좋아요. 개인적으로 jquery는 프레임워크이기 때문에 상대적으로 작성하기 어려운 부분이 있고, 선택적 매개변수가 많지 않아 원하는 효과를 얻지 못하는 경우도 있다고 생각합니다.

댓글 달린 부분은 테스트용입니다. 제가 js를 잘 사용하지 않아서 일반적으로 사용법을 알고 사용해 본 적이 있기 때문에 코드 작성 과정이 매끄럽지 않습니다. wait 실제로 애니메이션 기능을 구현하고 싶을 때, 세부 사항을 잘못 기재하면 혼란스러울 수 있습니다.

함수에는 설명할 여러 매개변수가 있습니다.

•obj, 함수의 개체

•json, 값 쌍({attr: 형식) "value", attr: " value"}, 여기서는 애니메이션할 객체의 모션 속성을 의미합니다

•interval, 각 변경의 간격, 여기서 변경되는 것은 객체의 속성 값입니다

•sp, 값 변환 Speed, 애니메이션이 일정한 속도가 아닌 버퍼링 효과를 가지도록 함(sp는 1)

·fn, 콜백 함수, 애니메이션 실행 후 동작

코드는 비교적 간단합니다. 주의해야 할 몇 가지 세부 사항이 있습니다.

• 객체의 속성은 직접 선언할 필요가 없으므로 함수의 첫 번째 문장은 오류를 보고하지 않습니다.

• 각 개체에 타이머를 추가해야 합니다. 그렇지 않으면 타이머를 공유하면 타이머의 여러 개체 이동이 중단됩니다.

•son 데이터 형식: 객체의 애니메이션 속성을 탐색할 때 각 속성이 목표 값에 도달했는지 확인하려면 icur != json[arr]이 필요합니다. 플래그의 기능은 속성 중 하나가 처음 목표 값에 도달할 때 ClearInterval(obj.timer)이 타이머를 지우는 것을 방지하는 것입니다. 결과적으로 다른 애니메이션 속성은 목표 값에 도달하지 않습니다. 따라서 각 순회 중에 플래그 값이 true로 초기화됩니다. 대상 속성에 도달하지 못한 개체가 발견되면 해당 개체의 모든 속성이 대상 값에 도달하고 타이머가 지워질 때까지 플래그가 false로 설정됩니다.

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

이 문장의 기능은 속성 값을 반올림하는 것입니다. 불투명도 제외 ​​소수점 이하 자릿수 없음.

• 애니메이션 객체를 마지막으로 호출할 때 주의하세요. for 루프를 사용할 때 특히 중첩 루프를 사용할 때 i 값이 최대값이 된 경우 arr[i] 형식을 임의로 사용할 수 없습니다. .

js

function animate(obj, json, interval, sp, fn) {
  clearInterval(obj.timer);
  //var k = 0;
  //var j = 0;
  function getStyle(obj, arr) {
    if(obj.currentStyle){
      return obj.currentStyle[arr];  //针对ie
    } else {
      return document.defaultView.getComputedStyle(obj, null)[arr]; 
    }
  }
  obj.timer = setInterval(function(){
    //j ++;
    var flag = true;
    for(var arr in json) {
      var icur = 0;
      //k++;
      if(arr == "opacity") {
        icur = Math.round(parseFloat(getStyle(obj, arr))*100);
      } else {
        icur = parseInt(getStyle(obj, arr));
      }
      var speed = (json[arr] - icur) * sp;
      speed = speed > 0 ? Math.ceil(speed): Math.floor(speed);
      if(icur != json[arr]){
        flag = false;
      } 
      if(arr == "opacity"){
        obj.style.filter = "alpha(opacity : '+(icur + speed)+' )";
        obj.style.opacity = (icur + speed)/100;
      }else {
        obj.style[arr] = icur + speed + "px";
      }
      //console.log(j + "," + arr +":"+ flag);
    }
 
    if(flag){
      clearInterval(obj.timer);
      //console.log(j + ":" + flag); 
      //console.log("k = " + k);
      //console.log("j = " + j);
      //console.log("DONE");
      if(fn){
        fn();
      }
    }
  },interval);
}

호출 방법:

<script>
  var move = document.getElementById("move").getElementsByTagName("li");
  for(var i = 0; i < move.length; i ++){
    move[i].onmouseover = function(){
      var _this = this;
      animate(_this, {width: 500, height: 200},10, 0.01, function(){
        animate(_this, {width: 300, height: 200},10, 0.01);
      });
 
    }
  }
 
</script>

위의 간단한 네이티브 js 구현 jquery 함수 animate() 애니메이션 효과는 편집자가 모든 사람과 공유합니다. 전체 내용은 여기에 있습니다. 모든 사람이 참고할 수 있기를 바랍니다. 또한 모든 사람이 PHP 중국어 웹사이트를 지지하기를 바랍니다.

jquery 함수 animate() 애니메이션 효과를 구현하는 기본 js의 더 간단한 예를 보려면 PHP 중국어 웹사이트에서 관련 기사를 주목하세요!