React UI Animate와 React하는 연주자 '스크롤 애니메이션'

React UI Animate와 React하는 연주자 '스크롤 애니메이션'

반응형

이전 게시물인 React with React UI Animate의 "Scroll Animation" 소개에서는 React에서 스크롤 애니메이션을 구현하는 방법에 대해 이야기했습니다. 그러나 중첩된 구성 요소가 클 경우 스크롤 애니메이션에 상태를 사용하는 것은 비용이 많이 들고 성능 문제가 있습니다. 따라서 이 게시물에서는 State를 사용하지 않고 스크롤 애니메이션을 구현할 수 있는 방법을 보여드리겠습니다. 본격적으로 해봅시다.

데모

설치

단지 npm과 반응 프로젝트 안에서 다음 코드를 실행합니다.

npm i react-ui-animate

아니면 실을 사용할 수도 있다.

yarn add react-ui-animate

기본 개념

코드

예

여기서 폭 100%와 높이 100%로 고정된 div를 만들었고 그 안에 있는 직사각형 div는 유연한 가운데에 위치합니다. 그리고 저는 문서를 스크롤할 수 있도록 높이 2000px를 사용했습니다.

이전 게시물에서 useScroll() 후크와 보간() 함수를 이미 사용했습니다. 여기서 확인하실 수 있습니다.

애니메이션 값() 사용

애니메이션의 기본 개념을 이해하려면 먼저 action-ui-animate에서 제공하는 useAnimatedValue() 후크를 이해해야 합니다.

const animationNode = useAnimatedValue(initialValue)

useAnimatedValue()는 .value 속성이 전달된 인수 initialValue로 초기화되는 애니메이션 노드를 반환합니다.

useScroll() 후크의 스크롤Y 값을 저장하는 데 상태를 사용하는 대신, 스크롤Y 위치를 저장하는 데 AnimatedValue()를 사용합니다. 상태 대신 useAnimatedValue()를 사용하는 주된 이유는 값이 변경될 때 구성 요소가 다시 렌더링되지 않아 성능이 문제 없이 제공되기 때문입니다.

까지는 할 수 있다

const y = useAnimatedValue(0); useScroll(({ scrollY }) => { y.value = scrollY; }, []);

.value 속성을 가진 애니메이션 노드 y를 만들고 useScroll() 후크의 스크롤Y 값을 y 애니메이션 노드에 할당했습니다. 문서를 스크롤할 때마다 스크롤Y 값은 각 픽셀에 대해 y.값에 할당됩니다. 이 y.값을 사용하여 보간법을 사용하여 요소의 다른 속성을 조작해 보겠습니다.

const size = interpolate(y.value, [0, 500], [100, 400], { extrapolate: “clamp” });

입력 범위 0~500에서 출력 범위 [100, 400]까지 y.값을 보간합니다. 문서를 0px에서 500px로 스크롤하면 크기가 100px에서 400px로 바뀝니다.

이제 애니메이션 노드를 만들었습니다. 이 애니메이션 노드를 div에 적용하겠습니다.

애니메이션 블록

div는 useAnimatedValue() 후크에서 이 특수 애니메이션 노드를 읽을 수 없습니다. 따라서 애니메이션 값뿐만 아니라 div의 모든 속성을 상속하는 action-ui-animate에서 제공하는 애니메이션 블록 구성 요소를 사용합니다.

애니메이션 블록에 크기를 적용하겠습니다.

코드

예

마찬가지로 테두리 반지름을 보간할 수 있습니다.

const borderRadius = interpolate(y.value, [0, 500], [“50%”, “10%”], { extrapolate: “clamp” });

코드

예

보시다시피 애니메이션이 적용된 후에는 개체의 전환이 원활합니다. 원활한 전환을 원하지 않는 경우 useAnimatedValue()의 두 번째 인수로 {즉시: true } 개체를 추가할 수 있습니다.

const y = useAnimatedValue(0, { immediate: true });

코드

예

라이브 데모

이상으로 스크롤 애니메이션을 마치겠습니다.

라이브 예제를 확인할 수 있습니다.

https://codesandbox.io/s/performant-scroll-animation-with-react-ui-animate-b5z6h

깃허브를 타고 날 따라와요.

https://github.com/dipeshrai123

이 기사를 잘 보셨다면 추천하고 공유해 주세요! 시간 내 주셔서 고마워요.

디페시라이

코드니브 이노베이션스 Pvt. Ltd.

codniv.com

from http://it-ground.tistory.com/195 by ccl(A) rewrite - 2021-09-23 02:26:31