React Spring을 사용한 애니메이션!

안녕 얘들아

애니메이션은 모든 UI의 필수적인 부분이며 사용자의 관심을 끄는 데 매우 유용합니다. React JS에서 요소, 팝업 등에 애니메이션을 추가하는 방법은 CSS를 사용하는 것입니다. 그러나 CSS로 할 수 있는 일이 너무 많습니다.
스프링 기반 애니메이션이며 CSS의 시간 기반 애니메이션보다 훨씬 부드럽습니다. React JS에서 가장 인기 있고 스프링 기반 애니메이션의 선구자는 React Spring입니다.

반응 스프링을 사용하면 비교적 쉽게 놀라운 애니메이션을 만들 수 있습니다. 더 깊이 들어가 보겠습니다.

시작하기

먼저 다음 명령을 사용하여 React Spring 라이브러리를 설치해야 합니다.

npm install react-spring

후크

현재 React Sring에는 5가지 후크가 있으며 각각 고유한 기능과 특징이 있습니다.

useSpring — 요소 또는 값을 한 지점에서 다른 지점으로 이동하는 단일 스프링입니다.

useSprings - useSpring과 유사하지만 여러 개의 스프링과 값이 있습니다.

useTrail — 이름에서 알 수 있듯이 서로 뒤따르는 많은 스프링입니다.

useTransition — 항목을 추가하거나 제거할 때 주로 사용되며 이러한 변경 사항에 애니메이션을 적용합니다.

useChain - 하나의 애니메이션이 순서대로 다른 애니메이션 이후에 시작됩니다.

사용봄

useSpring은 React Spring과 함께 제공되는 많은 후크 중 하나입니다. 이 후크에 대해 자세히 설명하겠습니다.
간단히 말해서 이 후크는 값을 애니메이션 값으로 바꿉니다. 사용을 시작하려면 다음 코드를 사용하여 후크를 가져옵니다.

import { useSpring, animated } from 'react-spring'

예 1

이것을 사용하여 간단한 애니메이션을 만들어 봅시다. 기본적으로 페이지를 로드할 때 div가 페이드 인되기를 원합니다. 반응 스프링을 사용하면 매우 쉽게 수행할 수 있습니다.

import { React } from "react";
import { useSpring, animated } from 'react-spring'
import "./App.css"

function App() {
  const styles = useSpring({
    from: { opacity: "0" },
    to: { opacity: "1" },
  })
  return (
    <animated.div className="test" style={styles}></animated.div>
  );
}

export default App;

기본적으로 애니메이션에 대한 값을 포함하는 스타일 변수를 생성합니다. 이니셜은 from 소품에 정의됩니다. 최종 값은 to 소품에 정의됩니다. div는 animated.div 로 작성됩니다. 마지막으로 style={} 속성을 사용하여 스타일 변수를 div에 추가합니다. div 자체의 스타일 지정은 App.css에서 별도로 수행되며 그다지 중요하지 않습니다.
꽤 빠르게 사라지는 것을 알 수 있습니다. 구성 소품을 사용하여 지속 시간을 설정할 수 있습니다.

const styles = useSpring({
    from: { color: "white" },
    to: { color: "cyan" },
    config: { duration: "1500" }
  })

이제 애니메이션 속도가 훨씬 느려졌습니다. loop 소품을 사용하여 애니메이션을 루프로 전환할 수도 있습니다.

const styles = useSpring({
    from: { opacity: "0" },
    to: { opacity: "1" },
    config: { duration: "1500" },
    loop:true
  })

이제 애니메이션이 반복해서 실행됩니다. 그러나 다시 시작할 때 부드럽지 않고 갑작스러운 것을 알 수 있습니다. 이 문제는 체인 개체에 다른 애니메이션을 추가하여 div가 페이드 인, 아웃된 다음 다시 부드럽게 페이드 인되도록 하여 해결할 수 있습니다.

const styles = useSpring({
    from: { opacity: "0" },
    to: [
      { opacity: "1" },
      { opacity: "0"},
    ],
    config: { duration: "1500" },
    loop:true
})

다음과 같은 결과가 나올 수 있습니다.

실시예 2

useSpring을 사용하는 또 다른 예를 살펴보겠습니다. 여기에서 우리는 div를 부드럽게 위아래로 움직이고 싶습니다. 다시 한번 이것은 매우 간단합니다. 불투명도를 transform translate 또는 top으로 바꾸십시오.

import { React } from "react";
import { useSpring, animated } from 'react-spring'
import "./App.css"

function App() {
  const styles = useSpring({
    from: { transform: "translateY(0%)" },
    to: [
      { transform: "translateY(100%)" },
      { transform: "translateY(0%)"},
    ],
    config: { duration: "1500" },
    loop:true
  })
  return (
    <animated.div className="test" style={styles}></animated.div>
  );
}

export default App;

산출:



이 간단한 애니메이션은 React Spring의 힘을 맛보기에 불과합니다. 이 갈고리와 다른 갈고리로도 멋진 일을 할 수 있습니다.


이 게시물을 읽어 주셔서 감사합니다!
tutorials에서 내 다른 hubpages을 확인하십시오.
내 작업이 마음에 들면 커피를 사주고 생각을 공유할 수 있습니다 🎉☕


다음 시간까지!
건배! 🎉