JS 구성 요소 라 이브 러 리 AlloyTouch 이미지 윤 방 프로 세 스 분석 실현

윤 방도 터치 와 터치 피드백 과 관련 이 있 으 며,Alloy Touch 는 관성 운동 을 열거 나 닫 을 수 있 으 며,min 과 max 를 운동 구역 으로 설정 하여 자동 으로 튕 길 수 있 습 니 다.
일반적인 세로 스크롤 을 제외 하고 Alloy Touch 도 가로 스크롤,심지어 모든 속성의 운동 을 지원 할 수 있 습 니 다.디자인 의 본질은 속성 과 상 관 없 이 터치 가 모든 속성 을 피드백 할 수 있 는 운동 이기 때 문 입 니 다.그래서AlloyTouch다양한 라운드 구성 요 소 를 만 드 는 것 이 잘 되 었 다.

첫 번 째 윤 파 도 는 위의 그림 과 같다.다음 부터 실현 되 는 과정.
0 초

<div id="carousel-container">
 <div class="carousel">
  <div class="carousel-scroller" id="carousel-scroller">
   <img style="width: 88%;" src="asset/ci1.jpg">
   <img style="width: 88%;" src="asset/ci2.jpg">
   <img style="width: 88%;" src="asset/ci3.jpg">
   <img style="width: 88%;" src="asset/ci4.jpg">
   <img style="width: 88%;" src="asset/ci5.jpg">
  </div>

 </div>
</div>

모두 다섯 장의 그림 으로 한 장의 그림 이 화면 비례 의 88%를 차지 하기 때문에 사용자 의 화면 에서 한 장의 더 많은 그림 을 볼 수 있 고 사용자 에 게 가로로 미끄러져 볼 수 있 는 느낌 을 줄 수 있다.
10 초

<script src="../transformjs/transform.js"></script>
<script src="../alloy_touch.js"></script>
<script>
 var scroller = document.querySelector("#carousel-scroller");
 Transform(scroller); 
</script>

Transform(scroller)을 통 해;CSS 3 transform 속성 을 주입 합 니 다.
20 초

new AlloyTouch({
 touch: "#carousel-container",//     dom
 vertical: false,//         
 target: scroller, //     
 property: "translateX", //      
 min:0.88 * window.innerWidth * -5 + window.innerWidth, 
 max: 0
})

여기 서 가장 큰 난점 은 바로 min 의 값 이다.초기 값 이 0 이기 때문에 모든 왼쪽으로 미 끄 러 지 는 것 은 마이너스 입 니 다.맥 스 를 얻 을 수 있 습 니 다.무조건 0 입 니 다.
그러면 min 의 값 은 화면의 너비-그림 의 장수*그림 의 너비 입 니 다.

그림 의 너 비 는 0.88*window.inner Width

입 니 다.

화면의 폭 은 window.inner Width

입 니 다.

사진 의 장 수 는 5

이다.

제3 0 초
위의 그림 에서 보 듯 이 전통 적 인 swipe 에 비해 스크롤 을 촉발 하고 위의 손 을 따라 교정 하 는 체험 이 더욱 좋 습 니 다.그럼 어떻게 이 루어 질 까요?
우선,Alloy Touch 는 step 설정 을 지원 합 니 다.
new AlloyTouch({
step: 100，
...
...
...
})
사용자 가 설정 한 step 만 있 으 면 마지막 운동 이 끝나 면 Alloy Touch 는 사용자 가 가장 가 까 운 step 의 정수 배 위치 로 교정 해 줍 니 다.
예 를 들 어 위 에 100:

운동 대상 이 120 에 멈 추 면 100

으로 교정 된다.

운동 대상 이 151 에 멈 추 면 200

으로 교정 된다.

운동 대상 이 281 에 멈 추 면 300

으로 교정 된다.

운동 대상 이 21 에 멈 추 면 0

으로 교정 된다.
제4 0 초
물론 이것 은 문제 가 있 습 니 다.예 를 들 어 사용자 가 0 에서 30 으로 미 끄 러 졌 습 니 다.사실은 그 는 100 에 가 고 싶 지만 0 으로 교정 되 었 습 니 다!!
그래서 교정 만 으로 는 부족 합 니 다.논리 적 으로 굴 러 가 는 위 치 를 교정 하 는 것 을 막 기 위해 API 가 필요 하 다.그래서 Alloy Touch 를 지원 해 야 합 니 다:
방법
to(v [, time, easing])
그 중에서 time 과 easing 은 필수 가 아니다.time 의 기본 값 은 600 입 니 다.
50 초

var items = document.querySelectorAll("#nav a");
var scroller = document.querySelector("#carousel-scroller");
Transform(scroller);
new AlloyTouch({
 touch: "#carousel-container",//     dom
 vertical: false,//   ，   true        touch
 target: scroller, //     
 property: "translateX", //      
 min: window.innerWidth * -3, //   ,        
 max: 0, //   ,        
 step: window.innerWidth,
 inertia: false, //   ,     。   true
 touchEnd: function (evt, v, index) {

  var step_v = index * this.step * -1;
  var dx = v - step_v;

  if (v < this.min) {
   this.to(this.min);
  } else if (v > this.max) {
   this.to(this.max);
  } else if (Math.abs(dx) < 30) {
   this.to(step_v);
  }
  else if (dx > 0) {
   this.to(step_v + this.step);
  } else {
   this.to(step_v - this.step);
  }

  return false;
 },
 animationEnd: function (evt , v) {
  var i = 0,
   len = items.length;
  for (; i < len; i++) {
   if (i === this.currentPage) {
    items[i].classList.add("active");
   } else {
    items[i].classList.remove("active");
   }
  }

 }
})

모두 네 장의 그림 이기 때문에
min 이 얻 은 결 과 는 window.inner Width*-3 입 니 다.
max 의 값 은 여전히 0 입 니 다.
step 의 값 은 window.inner Width 입 니 다.
inertia:false 설정 을 통 해 관성 운동 을 끄 세 요.
터치 엔 드 의 return false 를 주의 깊 게 보 세 요.손가락 이 화면 을 떠 난 후의 교정 위치,관성 운동 등 논 리 를 계산 하지 않 기 위해 서 입 니 다.
touch End 는 현재 위치 v 와 현재 위치 index 를 가 져 올 수 있 습 니 다.
animation End 는 운동 이 끝 난 후의 반전 으로 nav 의 active 를 설정 합 니 다.물론 모든 브 라 우 저가 classList 를 지원 하 는 것 은 아 닙 니 다.코드 를 간결 하 게 보 여주 기 위해 서 입 니 다.
또한,touch End 와 animation End 에서 this,즉 Alloy Touch 현재 대상 의 인 스 턴 스 를 얻 을 수 있 습 니 다.그 중
to 방법 은 현재 대상 을 운동 하 는 데 쓰 인 다.
step 는 현재 보폭 입 니 다.
현재 있 는 페이지 를 가 져 올 수 있 습 니 다.
min 과 max 값 을 받 아 운동 구간 을 얻 을 수 있 습 니 다.
마지막.
모든 예시 와 코드 는 Github 에서 찾 을 수 있 습 니 다.
Github： https://github.com/AlloyTeam/AlloyTouch
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.