네 이 티 브 로 js 묘사 애니메이션 과 개선 방향, 그리고 현재 topar 의 요 소 를 강조 합 니 다.

1345 단어
애니메이션
사고의 방향.
setInterval 로 느 린 동작 만 들 기
  • 설정 횟수 n, 총 몇 번 움 직 입 니까
  • 규정된 시간 s (밀리초), 몇 밀리초 에 한 번 s / n = time
  • 을 움 직 이 는 지 계산 합 니 다.
  • 현재 페이지 상단 높이 currtenTop = window. scrollY
  • 가 져 오기
  • 목표 div 의 높이 targetTop 가 져 오기 (지난 절 설명)
  • 매번 몇 px 를 움 직 여야 합 니까? (targetTop - currtop) / n
  • 그리고 애니메이션 을 설정 합 니 다. i = = 25 시 에 이 시 계 를 지 웁 니 다. 매번 거리 = 최초의 currentTop + distance * i, time 은 몇 시간 마다 한 번 씩 순환 합 니까
  • 애니메이션 시간 이 고정 되 어 거리 가 짧 고 느리게 움 직 이면 빨리 움직인다
  • 사고방식
    tween. js 라 이브 러 리 사용
  • tween. js 는 일련의 완 동 함 수 를 제 공 했 는데 상세 한 애니메이션 효 과 는 다음 과 같다.http://easings.net/zh-cn
  • 우선 우 리 는 js 라 이브 러 리 를 도입 하여 cdn 방식 으로 도입
  • 텍스트 코드 복사
  • 구체 적 인 상황 에 따라 코드 를 수정 하고 느 린 동작 유형 을 설정 합 니 다. 시작 거리 currentTop=window.scollY (스크롤 바 가 구 르 는 거리), 목표 거리 targetTop=element.offsetTop (목표 dom 거리 페이지 상단 의 거리), element 는 우리 가 얻 은 목표 dom 입 니 다. 시간 우 리 는 함수 와 운동 거 리 를 정비례 로 설정 합 니 다. time=(s/100)*300 그 다음 에 최대 시간 을 설정 합 니 다. coords.y우리 console 가 나 와 서 이것 이 수시로 업 데 이 트 된 좌표 라 는 것 을 발 견 했 습 니 다. 그래서 우 리 는 그 안에 window.scrollTo(0, coords.y)
  • 을 채 웠 습 니 다.
    요소 하 이 라이트
  • 우리 의 목표 요 소 를 표시 합 니 다
  • 좋은 웹페이지 즐겨찾기