통용 되 는 등 속 운동 프레임 워 크 만 들 기(실례 설명)

16134 단어 등 속운동 틀
본문 은 등 속 운동 의 인 스 턴 스 설명(사 이 드 바,페이드아웃) 에 이 어 계속 하 겠 습 니 다.이 글 의 마지막 부분 에서 우 리 는 두 개의 작은 인 스 턴 스 를 만 들 었 습 니 다.사 이 드 바 와 투명 도 를 바 꾸 는 페이드아웃 효 과 를 만 들 었 습 니 다.본 고 는 위의 animate 함 수 를 계속 개조 하여 그 를 더욱 통용 되 고 강하 게 만 들 었 습 니 다.
1.여러 물체 의 운동 을 지원 한다.
2,동시에 운동
3,순서 운동
이 세 가지 운동 방식 도 jquery 에서 animate 함수 가 지원 합 니 다.
1.animate 함수 에서 서로 다른 스타일 을 어떻게 구분 합 니까?
위 글 에서 사 이 드 바 효과 에 사용 되 는 animate 함수 가 left 값 으로 바 뀌 었 습 니 다.

function animate(obj, target, speed) {
 clearInterval(timer);
 timer = setInterval(function () {
 if (obj.offsetLeft == target) {
  clearInterval(timer);
 } else {
  obj.style.left = obj.offsetLeft + speed + 'px';
 }
 }, 30);
}
페이드아웃 효과 에 사용 되 는 animate 함수 가 투명 도 를 바 꿉 니 다.

function animate(obj, target, speed) {
  clearInterval(timer);
  var cur = 0;
  timer = setInterval(function () {
   cur = css( obj, 'opacity') * 100;
   if( cur == target ){
   clearInterval( timer );
   }else {
   cur += speed;
   obj.style.opacity = cur / 100;
   obj.style.filter = "alpha(opacity:" + cur + ")";
   }
  }, 30);
  }
한편,우리 가 포장 한 함수 가 통용 되 려 면 먼저 직면 하 는 문 제 는 바로 이 함수 가 left 값 과 투명도 의 변 화 를 동시에 지원 해 야 한 다 는 것 이다.더욱 통용 되 는 방법 은 모든 스타일 변 화 를 지원 해 야 한다.예 를 들 어 윤 방 기능,그 는 좌우 미끄럼 도 있 고 상하 미끄럼 도 있다.
우 리 는 스타일 을 가 져 오고 스타일 을 바 꿀 때 판단 을 하면 됩 니 다.판단 은 2 가지 로 나 누 면 목적 을 달성 할 수 있 습 니 다.다른 스타일(margin,left,top,right,font-size 등)은 모두 px 이 고 투명 도 는 px 단위 가 없 기 때 문 입 니 다.

function animate(obj, attr, target, speed) {
 clearInterval(timer);
 var cur = 0;
 timer = setInterval(function () {
 if (attr == 'opacity') {
  cur = css(obj, 'opacity') * 100;
 } else {
  cur = parseInt(css(obj, attr));
 }

 if (cur == target) {
  clearInterval(timer);
 } else {
  if (attr == 'opacity') {
  obj.style.opacity = ( cur + speed ) / 100;
  obj.style.filter = "alpha(opacity:" + (cur + speed) + ")";
  } else {
  obj.style[attr] = cur + speed + "px";
  }
 }
 }, 30);
}
합 친 animate 는 이전 보다 매개 변수 attr 가 하나 더 생 겼 습 니 다.이 매개 변 수 는 변 화 된 스타일 입 니 다.obj:변 화 된 대상,target:스타일 이 변화 해 야 할 목표 값 입 니 다.speed:스타일 이 매번 변화 하 는 크기 입 니 다.
예:

oImg.onmouseover = function () {
　　animate(this, 'opacity', 100, 10);
}
oImg 은 가 져 온 그림 대상 입 니 다.여기 서 매개 변 수 는 다음 과 같 습 니 다.
this:현재 그림 대상
opacity:변 화 된 스타일 은 투명도 입 니 다.
100:그림 으로 마우스 이동 시 투명도 100
10:투명 도 는 매번 원래 의 기초 위 에 10 을 더 합 니 다.

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>      - by ghostwu</title>
 <style>
 img {
  border: none;
  opacity: 0.3;
  filter: alpha(opacity:30);
  position: absolute;
  left: 200px;
 }

 #box {
  width: 150px;
  height: 300px;
  background: red;
  position: absolute;
  left: -150px;
  top: 50px;
 }

 #box div {
  width: 28px;
  height: 100px;
  position: absolute;
  right: -28px;
  top: 100px;
  background: green;
 }
 </style>
 <script>
 window.onload = function () {
  var oImg = document.getElementById("img"),
  oBox = document.getElementById("box"),
  timer = null;

  oImg.onmouseover = function () {
  animate(this, 'opacity', 100, 10);
  }
  oImg.onmouseout = function () {
  animate(this, 'opacity', 30, -10);
  }

  oBox.onmouseover = function () {
  animate(this, 'left', 0, 10);
  }

  oBox.onmouseout = function () {
  animate(this, 'left', -150, -10);
  }

  function animate(obj, attr, target, speed) {
  clearInterval(timer);
  var cur = 0;
  timer = setInterval(function () {
   if (attr == 'opacity') {
   cur = css(obj, 'opacity') * 100;
   } else {
   cur = parseInt(css(obj, attr));
   }

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

  function css(obj, attr) {
  if (obj.currentStyle) {
   return obj.currentStyle[attr];
  } else {
   return getComputedStyle(obj, false)[attr];
  }
  }
 }
 </script>
</head>
<body>
<div id="box">
 <div>   </div>
</div>
<img src="./img/h4.jpg" alt="" id="img"/>
</body>
</html>
상술 한 것 이 바로 완전한 코드 실례 이다.
당신 이 이 두 가지 기능 을 각각 테스트 할 때:
그림 으로 이동 해서 빼 주세요.
공유 로 이동 하고 이동 합 니 다.
이렇게 하 는 것 은 문제 가 없다.
만약 당신 이 이렇게 테스트 한다 면:
공유 로 이동 한 후 빠르게 그림 으로 이동 합 니 다.이 럴 때 공유 가 멈 췄 다 는 것 을 알 게 될 것 입 니 다.이것 은 논리 에 맞지 않 습 니 다!이치 상 마 우 스 를 그림 으로 이동 시 키 는 것 은'공 유 된'mouseout(마우스 이동 이벤트)을 촉발 하 는 것 과 같 습 니 다.그러면'공 유 된'이 럴 때 숨 기 는 것 은 멈 추 는 것 이 아 닙 니 다.왜 이러 지?이 두 운동 은 하나의 타 이 머 를 공 유 했 기 때문에 마우스 가 그림 으로 이동 하여 타 이 머 를 켰 을 때'공유'타 이 머 를 멈 추 었 다.그러면 여러 물체 운동 을 할 때 우 리 는 타 이 머 를 나 누 어야 한다.모든 대상 에 타이머 가 있어 야 하 는데 어떻게 해 야 합 니까?매우 간단 합 니 다.간단 한 timer 변 수 를 정의 하지 마 십시오.우 리 는 timer 를 obj 대상 에 추가 하면 모든 대상 이 timer 속성 을 가지 고 타이머 의 분리 효 과 를 얻 을 수 있 습 니 다.
수 정 된 전체 코드 는 다음 과 같 습 니 다.스스로 펼 치 십시오.

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 img {
  border: none;
  opacity: 0.3;
  filter: alpha(opacity:30);
  position: absolute;
  left: 200px;
 }

 #box {
  width: 150px;
  height: 300px;
  background: red;
  position: absolute;
  left: -150px;
  top: 50px;
 }

 #box div {
  width: 28px;
  height: 100px;
  position: absolute;
  right: -28px;
  top: 100px;
  background: green;
 }
 </style>
 <script>
 window.onload = function () {
  var oImg = document.getElementById("img"),
  oBox = document.getElementById("box");

  oImg.onmouseover = function () {
  animate(this, 'opacity', 100, 10);
  }
  oImg.onmouseout = function () {
  animate(this, 'opacity', 30, -10);
  }

  oBox.onmouseover = function () {
  animate(this, 'left', 0, 10);
  }

  oBox.onmouseout = function () {
  animate(this, 'left', -150, -10);
  }

  function animate(obj, attr, target, speed) {
  clearInterval(obj.timer);
  var cur = 0;
  obj.timer = setInterval(function () {
   if (attr == 'opacity') {
   cur = css(obj, 'opacity') * 100;
   } else {
   cur = parseInt(css(obj, attr));
   }

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

  function css(obj, attr) {
  if (obj.currentStyle) {
   return obj.currentStyle[attr];
  } else {
   return getComputedStyle(obj, false)[attr];
  }
  }
 }
 </script>
</head>
<body>
<div id="box">
 <div>   </div>
</div>
<img src="./img/h4.jpg" alt="" id="img"/>
</body>
</html>
이로써 우 리 는 다 물체 운동 과 서로 다른 양식의 수정 을 완성 하 였 다
2.animate 함수 가 여러 스타일 을 지원 하 는 동시에 변경 합 니 다.
예 를 들 면:

oBox.onmouseover = function(){
　　animate( this, { "width" : 500, "height" : 400 }, 10 );
}
oBox 는 div 요소 이 고 animate 각 매개 변수 라 는 뜻 입 니 다.
this:현재 div 요소
{width:500,"height":400}:너 비 를 500 으로,높이 를 400 으로,이 두 스타일 은 같은 시간 에 완성 해 야 합 니 다.
10:스타일 이 원래 의 기초 위 에서 10 씩 변 합 니 다(예 를 들 어 width 초기 값 200-->210,220,230...)
완전한 동시 운동 변화 코드:

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 div {
 width: 200px;
 height: 200px;
 background: red;
 }
 </style>
 <script>
 window.onload = function () {
  var oBox = document.getElementById("box");
  oBox.onmouseover = function(){
//  animate( this, { "width" : 500, "height" : 500 }, 10 );
  animate( this, { "width" : 500, "height" : 400 }, 10 );
  }

  function animate(obj, attr, speed) {
  clearInterval(obj.timer);
  var cur = 0;
  obj.timer = setInterval(function () {
   for ( var key in attr ) {
   if (key == 'opacity') {
    cur = css(obj, 'opacity') * 100;
   } else {
    cur = parseInt(css(obj, key));
   }
   var target = attr[key];
   if (cur == target) {
    clearInterval(obj.timer);
   } else {
    if (key == 'opacity') {
    obj.style.opacity = ( cur + speed ) / 100;
    obj.style.filter = "alpha(opacity:" + (cur + speed) + ")";
    } else {
    obj.style[key] = cur + speed + "px";
    }
   }
   }
  }, 30);
  }

  function css(obj, attr) {
  if (obj.currentStyle) {
   return obj.currentStyle[attr];
  } else {
   return getComputedStyle(obj, false)[attr];
  }
  }
 }
 </script>
</head>
<body>
 <div id="box"></div>
</body>
</html>
이 코드 를 스스로 펼 쳐 보 세 요.이 코드 는 동시에 운동 할 수 있 지만 문제 가 있 습 니 다.
div 의 초기 너비 와 높이(width:200,height:200)
변화 보폭 같다(10)
변화 시간 이 같다(30 밀리초 마다 한 번 씩 변 한다)
대상(width:500,height:400)
뭐 공부 해요?두 사람 은 같은 라인 에서 속도 가 같 고 시간 이 같 지만 동시에 다른 목표 에 도달 해 야 한다.하 나 는 500,하 나 는 400)
답 은 분명 하 다.목표 가 가 까 운 것(height:400)이 먼저 도착 한 다음 에 대상 의 타 이 머 를 끄 고 다른 목표 가 더 먼 것(width:500)은 도착 하지 못 할 것 이다.
이 코드 아래 에서 현재 값 과 목표 값 을 출력 할 수 있 습 니 다:

var target = attr[key];
console.log( key, cur, target );
진 결 과 는:


위의 그림 에서 알 수 있 듯 이 height 는 이미 400 px 에 이 르 렀 지만 width 는 410 px 에 멈 추 었 습 니 다.왜 400 px 가 아 닙 니까?width=400 일 때(cur==500)는(400==500)성립 되 지 않 기 때문에 else 문 구 를 실 행 했 습 니 다.width=cur+10=400+10=410,그리고 height 가 400 px 에 도달 하여 타 이 머 를 멈 추 었 기 때문에 width 는 410 px 에 멈 추 었 습 니 다.
그럼 우 리 는 이 문 제 를 어떻게 해결 합 니까?
사실 하기 도 쉽 습 니 다.바로 height=400 일 때 타 이 머 를 끄 지 마 세 요.width=500 일 때 타 이 머 를 닫 아야 합 니 다.같은 시간 에 동시에 목표 에 도달 하 는 효 과 를 완성 하지 않 았 습 니까?
수 정 된 코드 는 다음 과 같 습 니 다.

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 div {
 width: 200px;
 height: 200px;
 background: red;
 }
 </style>
 <script>
 window.onload = function () {
  var oBox = document.getElementById("box");
  oBox.onmouseover = function(){
  animate( this, { "width" : 500, "height" : 400 }, 10 );
  }

  function animate(obj, attr, speed) {
  clearInterval(obj.timer);
  var cur = 0;
  obj.timer = setInterval(function () {
   var bFlag = true;
   for ( var key in attr ) {
   if (key == 'opacity') {
    cur = css(obj, 'opacity') * 100;
   } else {
    cur = parseInt(css(obj, key));
   }
   var target = attr[key];
   if (cur != target) {
    bFlag = false;
    if (key == 'opacity') {
    obj.style.opacity = ( cur + speed ) / 100;
    obj.style.filter = "alpha(opacity:" + (cur + speed) + ")";
    } else {
    obj.style[key] = cur + speed + "px";
    }
   }
   }
   if ( bFlag ) {
   clearInterval( obj.timer );
   }
  }, 30);
  }

  function css(obj, attr) {
  if (obj.currentStyle) {
   return obj.currentStyle[attr];
  } else {
   return getComputedStyle(obj, false)[attr];
  }
  }
 }
 </script>
</head>
<body>
 <div id="box"></div>
</body>
</html>
변 수 를 설명 합 니 다.매번 한 번 씩(width,height)스타일 이 바 뀌 면 bFlag=true 입 니 다.for 순환 에서 목표 에 도달 하지 못 한 것 이 있 으 면 bFlag 의 값 은 false 입 니 다.그러면 타 이 머 를 닫 지 않 습 니 다.둘 다 목표 에 도달 해서 야 타 이 머 를 닫 습 니 다.
3.순서 운동
만약 스타일 이 변 한다 면 순서대로 하 는 것 은 동시에 변화 하 는 것 이 아니다.예 를 들 어:

oBox.onmouseover = function(){
//    ：                
　　animate( this, { 'width' : 500 }, 10, function(){
　　　　animate( this, { 'height' : 500 }, 10 );
　　} );
}
width 를 500 px 로 바 꿀 때 반전 함 수 를 전달 한 다음 에 반전 함수 안의 운동 을 수행 합 니 다.
수 정 된 전체 코드:

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>          - by ghostwu</title>
 <style>
 div {
  width: 200px;
  height: 200px;
  background: red;
 }
 </style>
 <script>
 window.onload = function () {
  var oBox = document.getElementById("box");
  oBox.onmouseover = function(){
  //    ：                
  animate( this, { 'width' : 500 }, 10, function(){
   animate( this, { 'height' : 500 }, 10 );
  } );
  }

  function animate(obj, attr, speed, fn ) {

  clearInterval(obj.timer);
  var cur = 0;
  obj.timer = setInterval(function () {
   var bFlag = true;
   for (var key in attr) {
   if (key == 'opacity') {
    cur = css(obj, 'opacity') * 100;
   } else {
    cur = parseInt(css(obj, key));
   }
   var target = attr[key];
   if (cur != target) {
    bFlag = false;
    if (key == 'opacity') {
    obj.style.opacity = ( cur + speed ) / 100;
    obj.style.filter = "alpha(opacity:" + (cur + speed) + ")";
    } else {
    obj.style[key] = cur + speed + "px";
    }
   }
   }

   if (bFlag) {
   clearInterval(obj.timer);
   fn && fn.call( obj );
   }
  }, 30);
  }

  function css(obj, attr) {
  if (obj.currentStyle) {
   return obj.currentStyle[attr];
  } else {
   return getComputedStyle(obj, false)[attr];
  }
  }
 }
 </script>
</head>
<body>
<div id="box"></div>
</body>
</html>
이상 의 이 편 은 통용 되 는 등 속 운동 틀(실례 설명)을 만 드 는 것 이 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 고 저희 도 많이 응원 해 주시 기 바 랍 니 다.
등 속 운동 의 인 스 턴 스 설명(사 이 드 바,페이드아웃)
그림 의 수미 부 드 러 운 윤 방 실현(JS 원생 방법―절 류)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage