애니메이션 제작!React Spring#1 사용: React Spring이란 무엇입니까?

애니메이션: 정성스럽게 디자인된 웹 페이지의 설탕과 개발자의 존재의 화근.이미 잘 아시다시피 웹 페이지에 요소 애니메이션을 설정하는 것은 매우 고통스러운 일일 수 있습니다.다행히도 우리는 이 방면에 많은 도서관이 도움을 제공한다.그러나 이러한 라이브러리의 대부분은 다음과 같은 다양한 문제에 직면해 있습니다.

보통 원활하지 않다

그것들은 좋은 유지 보수를 받지 못했을 것이다

복잡하고 곤혹스러울 수도 있다

가공되지 않은 다이아몬드가 있지만 개인적으로 가장 밝은 것은 React-Spring 이라고 생각한다.이 시리즈에서 우리는 그것이 제공하는 애니메이션 API를 깊이 이해하고 배운 내용을 이용하여 실제적인 예시를 구축할 것이다.

카탈로그

What is React-Spring

Intro to the code

Series Objective

본문에서 보여준 예는 github 에서 찾을 수 있다

봄은 무엇입니까?

React-Spring는 부드러운 애니메이션을 조합할 수 있는 구성 블록을 제공하는 라이브러리입니다.그러나 이러한 애니메이션의 작업 방식은 독특하다. 스프링 동작의 물리를 모의하여 애니메이션 값을 정하는 것이지 시간의 간격을 바탕으로 값을 설정하는 애니메이션을 사용하는 것이 아니기 때문에 비현실적인 운동을 초래할 수 있다.
이것은 무슨 뜻입니까?이것은 우리가 정적 설정의 값 경로를 따르지 않고 한 값에서 다른 값으로의 유동적이고 사용자 정의 가능한 변환을 만들 수 있다는 것을 의미한다.용수철이 당겨지고 방출될 때, 용수철이 평온하게 멈출 때까지 어떻게 서로 다른 정도의 장력을 자연스럽게 통과하는지 상상해 보세요.우리는 강도, 속도, 초기 속도와 원소 운동의 많은 다른 물리적 지표를 바꾸어 우리가 원하는 애니메이션의 행위 방식을 만들 수 있다.이 시리즈의 과정에서 우리는 이러한 지표를 이해하고 사용할 것이다.

코드 얘기해!

자, 이제 우리는 무엇이 React-Spring를 돋보이게 하는지 알게 되었다.

이것은 우리가 자신의 애니메이션을 구축하는 데 구축 블록을 제공하는 것이지 정적 애니메이션을 제공하여 우리가 선택하고 설정할 수 있도록 하는 것이 아니다

애니메이션 값을 생성하는 독특한 방법으로 매끄럽고 리얼한 애니메이션을 생성한다

... 이제 코드 얘기 좀 하자!
먼저 React-Spring 라이브러리는 두 개의 API, Hooks API와 Render-Props API를 제공합니다.이 시리즈에서는 Hooks API에만 집중하지만 걱정하지 마십시오!Hooks API의 대부분의 개념은 Render Props API로 잘 옮겨졌습니다.

API

APIReact-Spring는 실제로 그리 크지 않습니다.여기에는 다음과 같은 다섯 가지 주요 연결고리가 포함되어 있습니다.

useSpring - 한 점에서 다른 점까지의 값에 대한 애니메이션 설정

useSprings - 여러 개의 개별 구성 스프링을 생성합니다.
(이 두 요소가 다른 애니메이션을 실행하고 있음을 주의하십시오.)

useTrail - useSprings와 유사하게 스프링이 여러 개 만들어졌지만 모두 같은 설정을 공유하고 하나씩 실행됩니다.
(각 요소는 동일한 애니메이션을 실행합니다.

useTransition - 항목 목록을 수신하고 목록에 항목을 추가하거나 삭제할 때 정의된 애니메이션을 실행합니다.

useChain - 애니메이션 연결의 실행 순서를 정의합니다.
(이 경우, 우리는 집합에서 과도를 실행하고 스프링을 실행하여 프로젝트의 비율을 조정한다.)

이 다섯 가지 애니메이션 중에서 우리는 당신이 원하는 것처럼 복잡한 애니메이션을 만들 수 있는 능력이 있습니다!

뷰에서 애니메이션 값 사용하기

이 갈고리를 사용하기 위해 React-Spring 는 animated 라는 원어를 제공했다. 이 원어는 원생 요소의 기능을 확장하여 우리의 애니메이션 값을 받아들일 수 있도록 한다.animated를 사용하려면 animated 키워드를 사용하여 다음과 같이 모든 요소에 접두사를 간단하게 추가할 수 있습니다.

return (
    <animated.div></animated.div>
)

비HTML React 구성 요소는요?너도 대처할 수 있어!

// React Components
return const AnimatedComponent = animated(Component)

// Styled Components
return const AnimatedStyledComponent = styled(animated.div)

React-Spring 거의 모든 플랫폼을 처리할 수 있습니다!따라서 이 라이브러리는 React Native에서도 사용할 수 있습니다.지원되는 플랫폼과 animated 원어에 대한 더 많은 정보는 here를 클릭하여 문서를 빠르게 읽을 수 있습니다.

이 시리즈의 목표

알겠습니다. React-Spring가 무엇인지, 무엇이 그것을 독특하고 강력한 애니메이션 도구로 만들었는지, 그리고 우리에게 제공한 개술이 무엇인지 알고 있습니다.지금 너는 아마도 "나는 문서에서 이 모든 것을 읽을 수 있다."라고 생각할 것이다.React-Spring의docs는 정말 곤혹스러울 수 있습니다. 갈고리가 어느 정도 구축 블록이기 때문에 복잡한 애니메이션을 만들 수 있습니다!이해해야 할 내용이 많고, 제공된 예시는 일반적으로 무슨 일이 일어났는지 설명할 수 없다(#3 애니메이션 라이브러리가 직면한 문제 참조).😉). 이 시리즈의 목적은 이러한 기능을 사용하기 위해 몇 가지 실제 예시를 깊이 있게 이해하는 것이다.API에 이러한 개념을 도입하여 보다 쉽게 관리할 수 있도록 함으로써 놀라운 유연성을 활용할 수 있는 도구를 제공하고자 합니다.
그래서 당신의 창의력을 끊임없이 발휘하고 애니메이션을 준비하세요!!
읽어주셔서 감사합니다!나는 네가 우리가 창작을 시작할 때 남아 있기를 바란다😁🎉