React with framer motion 및 React에서 PowerPoint 슬라이드와 유사한 애니메이션 만들기

음, 나는 애니메이션 라이브러리를 사용하기에는 아직 멀었지만, 나의 이전 항목에서 우리는 이런 요구가 있었다.

Clients want a webpage that will have similar effects as a presentation in PowerPoint. On mousewheel we change our slides (previous and next)

This PowerPoint effects should be available only on a desktop view (viewport 1200px and up). But for 1200px and down we must have a normal scrollable page.

Time resource — critical low(well as always because need in some days to be in a production)

시간을 낭비하지 마시고 final codesandbox를 확인하십시오.
***https://codesandbox.io/s/motion-framer-sample-3-l2y9x?file=/src/App.js:0-1912 ***
이 모든 기준을 가정할 때, 유일한 선택은 좋은 문서 (바퀴를 재발명할 필요가 없음) 와 기존 CRA init 프로젝트의 라이브러리를 사용하는 것이다.CRA가 설치되면 다음 라이브러리가 추가됩니다.
npm i 프레임 운동 반응 교차 관측기lodash
이libs를 빠르게 보려면 다음과 같이 하십시오.

프레임 동작 - 구성 요소 애니메이션을 만드는 데 도움을 주는 패키지입니다.API 여기: https://www.framer.com/api/motion/

*react intersection observator*-react intersection observator API의 구현은 * 요소가 언제 뷰포트에 들어오거나 떠나는지 알려줍니다*(공식 설명서).여기 있는 파일: https://github.com/thebuilder/react-intersection-observer#readme

유명한 로더스**-우리는 **탈온스 함수만 필요합니다.공식 문서의 공고 취소 설명: 공고 취소 함수를 만듭니다. 이 함수는func를 호출하는 것을 지연합니다. 지난번에 공고 취소 함수를 호출한 후 밀리초 후에 호출됩니다.

이제 계산 단계를 시작합니다.

제작 섹션 - 슬라이드.그들에게 100%의 너비와 높이를 주고 id를 설정합니다. id는 반드시 다른 모든 부분이어야 합니다.
우리의 응용.js는 다음과 같이 보입니다.

스타일.css는 다음과 같이 보입니다.
모든 요소의 여백과 테두리( 여백: 0, 채우기: 0)를 재설정하고 너비와 높이가 용기의 100%인 부분을 만듭니다(뷰포트에서 볼 때 용기는 100vh와 100vw).

우리는 부드러운 중심 텍스트를 만들고 텍스트에 글꼴 크기를 추가했다.

부분마다 색깔이 있어요.

각 섹션은 다음과 같습니다.
특별한 것은 없고 ID가 있는 섹션 표시일 뿐입니다. (잠시 후에 이 ID를 사용하여 작업을 추가할 것입니다! 다른 ID를 추가하는 것은 섹션마다 매우 중요합니다.
/제 1 절.jsx(모든 부분에 같은 코드 포함)

지금, 우리는 일부, 우리는 우리의 가방 설정, 우리는 인코딩을 할 수 있습니다!

페이지당 4가지 효과:

섹션이 뷰포트에 있을 때 재생되는 애니메이션( 보이기)
사용자가 출력 포트를 떠날 때 재생하는 애니메이션( 숨김)
사용자가 다음 섹션에 들어가면 다음 섹션에 종료 애니메이션을 재생합니다( 다음 섹션)
사용자가 이전 섹션으로 돌아가면 다른 종료 애니메이션을 재생합니다( 이전 섹션)

그래, 우리 맞춤형 갈고리를 만들어서 이 모든 것을 완성하자.모든 상수를 저장하는 파일이 하나 더 있습니다. (지연! 물론... 온스 제거 함수는 지연이 필요합니다. 이것은 우리의 바퀴 이벤트 탐지기를 최적화합니다.)

/상수js

* ObserverHook을 사용합니다.jsx

*그럼, 우리가 거기서 뭘 했는지:

기본적으로 애니메이션의 숨김 상태를 설정합니다. 만약 애니메이션이 뷰포트에 있다면 useInView 갈고리의 도움말에 표시될 수 있도록 설정합니다

사용 효과((()=>{

만약 (inView) {

setVariant("가시")<

}else 설정 변수("숨김")<

},[inView])

이외에 사용자가 위로 스크롤하거나 아래로 스크롤할 때 상태 변경을 터치할 수 있는 알림 취소 기능을 만들었습니다. 로고 isFirst와 *isLast* (마지막 섹션에 있으면 이전 섹션을 계속할 필요가 없습니다)

const ***onMouseScroll*** = **debounce**((e) => { if (e.deltaY > 0 && variant === "**visible**") setVariant(isLast ? "**visible**" : "**next**") if (e.deltaY < 0 && variant === "**visible**") setVariant(isFirst ? "**visible**" : "**previous**") }, MAIN_DELAY)

예시 파일이 있는 코드 샌드박스:

 src=”https://codesandbox.io/embed/motion-framer-sample-1-39iji“ 스타일 = "폭: 100%, 높이: 계산(300px+8vw), 테두리: 0, 테두리 반경: 4px, 오버플로우: 숨기기;" allow = "지리적 위치추적, 마이크, 카메라, midi, vr, 가속계, 팽이, 지불, 환경광 센서, 암호화 미디어, usb" loading=“lazy” sandbox=“allow modals allow forms allow popup allow scripts allow same origin”&gt 

이제 부분 1에서 이 갈고리를 실현합시다.jsx

- 우선 */상수js* 파일을 내보내고 주 지연 상수를 600ms로 표시합니다. (그래, 이것은 사실상 우리의 갈고리의 온스 제거값입니다. 무한히 굴러갈 수 있지만, 이벤트는 마지막 '바퀴' 효과 후에 터치됩니다.)
 
- 우리 위로 좀 하자.우리의 모래상자를 기록하여 우리가 정확한 길을 걷도록 확보한다:

- 현재 우리는 마우스 롤러에서 애니메이션을 촉발하는 변체가 생겼기 때문에 다음 단계에 우리는 이렇게 할 것이다.이를 위해서는 motion framer에서 운동을 가져오고 운동으로 우리의 부분을 포장해야 한다*응, 우리는 이런 결과를 얻었어:

이러한 PowerPoint* 스타일의 슬라이드 효과를 만들려면 단독div를 만들어야 합니다. 이 div는 한 부분의 맨 위에 위치하고 서로 다른 애니메이션 변체를 가지고 있기 때문에 저희의 */풍격이 코드 블록이 있는 css*:

따라서 사용자가 wheel down 이벤트를 사용할 때drawer-*drawerVar와section-sectionVar를 재생합니다 *여기 코드 샌드박스:

 

마지막 단계는 같은 마우스 휠 이벤트에서 페이지/슬라이드를 전환하는 것입니다

이를 위해서는 * 애플리케이션을 업데이트해야 합니다.jsx 구성 요소 (내비게이션 - 스크롤 중 슬라이드를 닫고 0.4s를 남겨서 각 부분의 애니메이션을 재생합니다):

그리고 일부 소절의 작은 업데이트가 있는데, 우리는 이러한 효과를 얻었다.

a) 서랍 - 이전 및 다음

b) 컨텐트의 경우 - 숨기기 및 표시

codesandbox의 최종 결과는 다음과 같다:

***https://codesandbox.io/s/motion-framer-sample-3-l2y9x?file=/src/App.js:0-1912***

 
><즐거운 인코딩

React with framer motion 및 React에서 PowerPoint 슬라이드와 유사한 애니메이션 만들기

음, 나는 애니메이션 라이브러리를 사용하기에는 아직 멀었지만, 나의 이전 항목에서 우리는 이런 요구가 있었다.

Reference

좋은 웹페이지 즐겨찾기