패 키 징 운동 프레임 워 크 실전 좌우 와 상하 로 미 끄 러 지 는 초점 윤 방 도(인 스 턴 스)

12815 단어 포장 하 다운동 틀포커 스 라운드
이 글통용 되 는 등 속 운동 프레임 워 크 만 들 기(실례 설명)에서 등 속 운동 구 조 를 봉 했다.우 리 는 이 구 조 를 바탕 으로 완충 운동 효 과 를 더 한 다음 에 운동 구조 로 슬라이드(상하,좌우)를 만 들 었 다.

완충 운동 은 보통 두 가지 흔히 볼 수 있 는 표현 이 있다.예 를 들 어 하나의 div 를 0 운동 에서 500 까지 하 게 하 는 것 이다.하 나 는 사건 이 발생 할 때 속도 가 매우 빠 르 고 하 나 는 사건 이 발생 할 때 느 린 다음 에 천천히 빨 라 지 는 것 이다.우 리 는 먼저 블록 을 만 든 후에 느 린 것 을 실현 한다.흔히 볼 수 있 는 것 은 바로 운전 이다.예 를 들 어 고속도로 에서 내 린 차 는 120 km/시간 이다.그리고 진입로 에 들어간다.40km/시 로 변 하거나 40km/시간 에 동네 에 들 어가 서 마지막 에 차 를 세우 면 0km/시간 으로 변 합 니 다.120 km/시간->40km/시간,또는 40km->0km/시간 모두 속도 가 먼저 블록 을 세운 후에 느 립 니 다.이런 운동 은 어떻게 프로그램 으로 표시 합 니까?

목표 거리(500)-현재 거리(200)/하나의 계수(예 를 들 어 12)를 사용 하면 속도 가 블록 에서 느 린 변화 에 도달 할 수 있 습 니 다.현재 거 리 는 출발점 에 있 고 분자(500-0)가 가장 크기 때문에 속도 가 가장 큽 니 다.만약 에 현재 거리 가 500 에 가 까 워 지면 분자 가 가장 작고 그 후의 속도 도 가장 작 습 니 다.

<style>
 div{
  width: 200px;
  height: 200px;
  background:red;
  position: absolute;
  left: 0px;
 }
 </style>
 <script>
 window.onload = function(){
  var oBtn = document.querySelector( "input" ),
  oBox = document.querySelector( '#box' ),
  speed = 0, timer = null;
  oBtn.onclick = function(){
  timer = setInterval( function(){
   speed = ( 500 - oBox.offsetLeft ) / 8;
   oBox.style.left = oBox.offsetLeft + speed + 'px';
  }, 30 );
  }
 }
 </script>
</head>
<body>
 <input type="button" value="   ">
 <div id="box"></div>
</body>
그러나 div 는 500 px 라 는 목표 위치 에서 순 순 히 멈 추 지 않 고 결국은 497.375px 에 멈 추 었 습 니 다.현재 의 속 도 를 보면 현재 의 값 은 원인 을 알 수 있 습 니 다.


당신 은 속도 가 영원히 0.375 에 멈 춰 있 고 얻 은 현재 거 리 는 497 px 에 멈 춰 있 는 것 을 발견 할 수 있 습 니까?여기 문제 가 있 습 니 다.우리 div 는 497.375px 에 멈 춰 있 지 않 습 니까?어떻게 얻 은 것 은 뒤의 소수 0.375 가 없 습 니까?컴퓨터 가 부동 소수점 을 처리 하고 있 으 면 정밀도 손실 이 있 을 것 이다.우 리 는 단독으로 작은 테스트 를 할 수 있다.

<div id="box"></div>
 <script>
 var oBox = document.querySelector( '#box' );
 alert( oBox.offsetLeft );
 </script>
이 코드 는 줄 스타일 에 적 힌 30.2px 가 아 닌 왼쪽 오프셋 30px 를 가 져 올 수 있 습 니 다.현재 위 치 를 얻 을 때 소 수 를 버 리 기 때문에 속 도 는 0.375 px 에 영원히 멈 추고 위치 도 497 에 영원히 멈 출 수 있 습 니 다.그래서 목표 에 도달 하기 위해 우 리 는 속 도 를 1 로 바 꾸 고 속 도 를 위로 조정 해 야 합 니 다(Math.ceil).우 리 는 속 도 를 1 로 바 꾸 고 div 도 500 에 도달 할 수 있 습 니 다.

oBtn.onclick = function(){
 timer = setInterval( function(){
 speed = ( 500 - oBox.offsetLeft ) / 8;
 if( speed > 0 ) {
  speed = Math.ceil( speed );
 }
 console.log( speed, oBox.offsetLeft );
 oBox.style.left = oBox.offsetLeft + speed + 'px';
 }, 30 );
}
두 번 째 문 제 는 div 의 위치 가 900 이 라면 900 운동 에서 500 까지 이런 수요 가 있 습 니까?분명히 있 을 거 야.라운드 그림,오른쪽 에서 왼쪽으로 가 는 게 그 렇 잖 아.

<style>
 #box{
  width: 200px;
  height: 200px;
  background:red;
  position: absolute;
  left: 900px;
 }
 </style>
 <script>// <![CDATA[
 window.onload = function(){
  var oBtn = document.querySelector( "input" ),
  oBox = document.querySelector( '#box' ),
  speed = 0, timer = null;
  oBtn.onclick = function(){
  timer = setInterval( function(){
   speed = ( 500 - oBox.offsetLeft ) / 8;
   if( speed > 0 ) {
   speed = Math.ceil( speed );
   }
   oBox.style.left = oBox.offsetLeft + speed + 'px';
  }, 30 );
  }
 }
 // ]]></script>
</head>
<body>
 <input type="button" value="   ">
 <div id="box"></div>
</body>
마지막 목 표 는 503.5px 에 멈 추 었 습 니 다.속 도 는 이때 마이너스 이 고 마지막 속 도 는-0.5 에 멈 추 었 습 니 다.반대 방향 속도 에 대해 우 리 는 그것 을-1 로 바 꿔 야 목표 에 도달 할 수 있 기 때문에 아래로 조정(Math.floor)합 니 다.

oBtn.onclick = function(){
 timer = setInterval( function(){
 speed = ( 500 - oBox.offsetLeft ) / 8;
 if( speed > 0 ) {
  speed = Math.ceil( speed );
 }else {
  speed = Math.floor( speed );
 }
 console.log( speed, oBox.offsetLeft );
 oBox.style.left = oBox.offsetLeft + speed + 'px';
 }, 30 );
}
그런 후에 우 리 는 이 완충 운동 을 등 속 운동 구조 에 통합 시 키 면 다음 과 같다.

function css(obj, attr, value) {
 if (arguments.length == 3) {
 obj.style[attr] = value;
 } else {
 if (obj.currentStyle) {
  return obj.currentStyle[attr];
 } else {
  return getComputedStyle(obj, false)[attr];
 }
 }
}

function animate(obj, attr, fn) {
 clearInterval(obj.timer);
 var cur = 0;
 var target = 0;
 var speed = 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));
  }
  target = attr[key];
  speed = ( target - cur ) / 8;
  speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
  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 );
}
이 등 속 운동 틀 이 생기 면 우 리 는 슬라이드 를 만 들 것 이다.
위아래 슬라이드 의 html 스타일 파일:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>slide - by ghostwu</title>
 <link rel="stylesheet" href="css/slide3.css" rel="external nofollow" >
 <script src="js/animate.js"></script>
 <script src="js/slide.js"></script>
</head>
<body>
<div id="slide">
 <div id="slide-img">
 <div id="img-container">
  <img src="./img/1.jpg" alt="">
  <img src="./img/2.jpg" alt="">
  <img src="./img/3.jpg" alt="">
  <img src="./img/4.jpg" alt="">
  <img src="./img/5.jpg" alt="">
 </div>
 </div>
 <div id="slide-nums">
 <ul>
  <li class="active"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
 </ul>
 </div>
</div>
</body>
</html>
slide3.css 파일:

* {
 margin: 0;
 padding: 0;
}
li {
 list-style-type: none;
}
#slide {
 width: 800px;
 height: 450px;
 position: relative;
 margin:20px auto;
}
#slide-img {
 position: relative;
 width: 800px;
 height: 450px;
 overflow: hidden;
}
#img-container {
 position: absolute;
 left: 0px;
 top: 0px;
 height: 2250px;
 /*font-size:0px;*/
}
#img-container img {
 display: block;
 float: left;
}
#slide-nums {
 position: absolute;
 right:10px;
 bottom:10px;
}
#slide-nums li {
 float: left;
 margin:0px 10px;
 background: white;
 width: 20px;
 height: 20px;
 text-align: center;
 line-height: 20px;
 border-radius:10px;
 text-indent:-999px;
 opacity:0.6;
 filter:alpha(opacity:60);
 cursor:pointer;
}
#slide-nums li.active {
 background: red;
}
animate.js 파일:

function css(obj, attr, value) {
 if (arguments.length == 3) {
 obj.style[attr] = value;
 } else {
 if (obj.currentStyle) {
  return obj.currentStyle[attr];
 } else {
  return getComputedStyle(obj, false)[attr];
 }
 }
}

function animate(obj, attr, fn) {
 clearInterval(obj.timer);
 var cur = 0;
 var target = 0;
 var speed = 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));
  }
  target = attr[key];
  speed = ( target - cur ) / 8;
  speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
  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 );
}
slide.js 파일:

window.onload = function () {
 function Slide() {
 this.oImgContainer = document.getElementById("img-container");
 this.aLi = document.getElementsByTagName("li");
 this.index = 0;
 }

 Slide.prototype.bind = function () {
 var that = this;
 for (var i = 0; i < this.aLi.length; i++) {
  this.aLi[i].index = i;
  this.aLi[i].onmouseover = function () {
  that.moveTop( this.index );
  }
 }
 }

 Slide.prototype.moveTop = function (i) {
 this.index = i;
 for( var j = 0; j < this.aLi.length; j++ ){
  this.aLi[j].className = '';
 }
 this.aLi[this.index].className = 'active';
 animate( this.oImgContainer, {
  "top" : -this.index * 450,
  "left" : 0
 });
 }
 
 var oSlide = new Slide();
 oSlide.bind();

}
좌우 슬라이드 는 스타일 만 바 꾸 면 됩 니 다.
스타일 파일:

* {
 margin: 0;
 padding: 0;
}
li {
 list-style-type: none;
}
#slide {
 width: 800px;
 height: 450px;
 position: relative;
 margin:20px auto;
}
#slide-img {
 position: relative;
 width: 800px;
 height: 450px;
 overflow: hidden;
}
#img-container {
 position: absolute;
 left: 0px;
 top: 0px;
 width: 4000px;
}
#img-container img {
 display: block;
 float: left;
}
#slide-nums {
 position: absolute;
 right:10px;
 bottom:10px;
}
#slide-nums li {
 float: left;
 margin:0px 10px;
 background: white;
 width: 20px;
 height: 20px;
 text-align: center;
 line-height: 20px;
 border-radius:10px;
 text-indent:-999px;
 opacity:0.6;
 filter:alpha(opacity:60);
 cursor:pointer;
}
#slide-nums li.active {
 background: red;
}
js 호출 파일:

window.onload = function () {
 function Slide() {
 this.oImgContainer = document.getElementById("img-container");
 this.aLi = document.getElementsByTagName("li");
 this.index = 0;
 }

 Slide.prototype.bind = function () {
 var that = this;
 for (var i = 0; i < this.aLi.length; i++) {
  this.aLi[i].index = i;
  this.aLi[i].onmouseover = function () {
  that.moveLeft( this.index );
  }
 }
 }

 Slide.prototype.moveLeft = function (i) {
 this.index = i;
 for( var j = 0; j < this.aLi.length; j++ ){
  this.aLi[j].className = '';
 }
 this.aLi[this.index].className = 'active';
 animate( this.oImgContainer, {
  "left" : -this.index * 800
 });
 }
 
 var oSlide = new Slide();
 oSlide.bind();

}
이상 의 이 패 키 징 운동 프레임 워 크 는 실전 좌우 와 상하 로 미 끄 러 지 는 초점 라운드 맵(인 스 턴 스)이 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.참고 가 되 고 많은 응원 부 탁 드 리 겠 습 니 다.
JavaScript 는 두 개의 JSon 대상 을 합병 하 는 방법 예 시 를 간단하게 실현 합 니 다.
vue mint-ui 는 성 시내 거리 4 급 연동 예제(타 오 바 오 경 동 수령 주소 4 급 연동 모방)를 실현 합 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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