[라이브러리] react-spring 애니메이션 구현

 

const styles = useSpring({
  from: { transform: 'translateX(0px)' },
  to: { transform: 'translateX(100px)' },
  reset: true,
});

https://www.react-spring.dev/

react-spring

 

 

현재 내가 구현하고자 하는 애니메이션은 

 

1. 버튼을 클릭하면 사이드바가 X축으로 펼쳐지는 애니메이션

2. 사이드바에서 특정 메뉴를 클릭하면 서브메뉴가 Y축으로 펼쳐지는 애니메이션이다. 

 

react-spring은 애니메이션을 쉽게 구현할 수 있도록 도와주는 라이브러리로,

React와 함께 사용되며 부드럽고 자연스러운 전환을 만들 수 있는 도구이다. 

 

 

---

 

1. 설치방법

npm install @react-spring/web

 

또는

yarn add @react-spring/web

 

 

 

 

 

---

 

2. useSpring 

useSpring 훅은 단일 애니메이션을 다룰 때 사용

예를 들어, 버튼을 클릭하면 박스의 크기와 위치가 부드럽게 변하는 애니메이션을 구현할 수 있다.

import { useSpring, animated } from '@react-spring/web'

function MyComponent() {
  const props = useSpring({
    from: { opacity: 0 },
    to: { opacity: 1 },
  })

  return <animated.div style={props}>Hello World</animated.div>
}

 

useSpring 훅: useSpring을 사용해 초기 상태 (from)와 애니메이션 목표 상태 (to)를 설정

animated 컴포넌트: 애니메이션이 적용될 요소로 변환

 

 

애니메이션이 동작했으면 하는 부분에 animated.div 컴포넌트를 사용해서 적용하면된다.

 <animated.div style={props}>Hello World</animated.div>

 

 

2-1 useSpring 구성객체

 

1. from과 to

• from: 애니메이션의 시작 상태를 정의
• to: 애니메이션이 도달해야 하는 최종 상태를 정의

이 속성들은 useSpring의 가장 기본적인 요소

import React from 'react';
import { useSpring, animated } from '@react-spring/web';

function Example() {
  const styles = useSpring({
    from: { opacity: 0, transform: 'translateY(-50px)' },
    to: { opacity: 1, transform: 'translateY(0px)' },
  });

  return <animated.div style={styles}>Hello World!</animated.div>;
}

 

• from: 애니메이션의 시작 상태로 opacity: 0과 translateY(-50px)을 설정하여 화면 밖에서부터 시작하게 한다.
• to: 최종 상태로 opacity: 1과 translateY(0)을 설정하여 화면 안으로 이동하면서 투명도를 1로 만든다.

2. config

• config: 애니메이션의 속도와 탄성, 감속 등을 설정하는 구성 옵션입니다. config 속성은 tension, friction, mass 등의 값을 통해 애니메이션의 특성을 정의한다.

const styles = useSpring({
  from: { opacity: 0 },
  to: { opacity: 1 },
  config: { tension: 170, friction: 26 },
});

 

 

• tension: 애니메이션의 스프링 강도를 정의. 값이 높을수록 애니메이션이 더 빠르게 변한다.
• friction: 스프링의 마찰을 정의하여 애니메이션이 얼마나 부드럽게 감속될지 설정. 값이 높을수록 애니메이션이 더 느리게 멈춤

3. delay

• delay: 애니메이션이 시작되기 전에 대기할 시간을 밀리초 단위로 정의

const styles = useSpring({
  from: { opacity: 0 },
  to: { opacity: 1 },
  delay: 500, // 500ms 후 애니메이션 시작
});

 

• 이 예시에서는 애니메이션이 0.5초 후에 시작

4. reset

• reset: true로 설정하면 매번 애니메이션을 다시 시작할 때 초기 상태에서 시작하도록 한다.

const styles = useSpring({
  from: { transform: 'translateX(0px)' },
  to: { transform: 'translateX(100px)' },
  reset: true,
});

 

• reset을 true로 설정하면, 매번 애니메이션을 시작할 때마다 from 상태로 돌아간다.

5. loop

• loop: 애니메이션을 반복할지 여부를 설정합니다. true나 객체 형태로 반복 횟수와 조건을 설정할 수 있음

const styles = useSpring({
  from: { opacity: 0 },
  to: { opacity: 1 },
  loop: { reverse: true }, // 애니메이션을 계속 반복하면서 반대로 진행
});

• loop: { reverse: true }로 설정하면, from에서 to로, 다시 to에서 from으로 계속 애니메이션이 반복

6. onRest

• onRest: 애니메이션이 끝난 후 호출되는 콜백 함수입니다. 특정 작업이 애니메이션이 완료된 이후에 실행되도록 할 수 있다.
•  

const styles = useSpring({
  from: { opacity: 0 },
  to: { opacity: 1 },
  onRest: () => console.log('애니메이션 완료'),
});

 

 

• onRest는 애니메이션이 완료된 후 콘솔에 "애니메이션 완료"라는 메시지를 출력한다.

7. reverse

• reverse: 애니메이션의 방향을 바꿈. 주로 상태를 토글할 때 유용하다.

const [toggle, setToggle] = useState(false);
const styles = useSpring({
  from: { opacity: 0 },
  to: { opacity: 1 },
  reverse: toggle,
});

return (
  <div>
    <animated.div style={styles}>Toggle Animation</animated.div>
    <button onClick={() => setToggle(!toggle)}>Reverse</button>
  </div>
);

 

• reverse: toggle로 설정하면, toggle 상태에 따라 애니메이션의 방향이 바뀐다.. 버튼 클릭 시 애니메이션이 반대 방향으로 진행

 

• from: 애니메이션의 시작 상태.
• to: 최종 목표 상태.
• config: 애니메이션의 물리적 특성(속도, 감속 등).
• delay: 애니메이션 시작 지연 시간.
• reset: 애니메이션을 다시 초기 상태에서 시작.
• loop: 애니메이션 반복.
• onRest: 애니메이션이 끝난 후 호출되는 콜백.
• reverse: 애니메이션의 방향을 반대로 설정.

https://www.react-spring.dev/docs/components/use-spring#usespring

useSpring | React Spring

 

 

---

3. useTransition

useTransition을 사용하면 컴포넌트가 마운트, 언마운트될 때의 트랜지션 애니메이션을 쉽게 설정할 수 있다.

 

예를 들어, 아이템 리스트가 추가되거나 제거될 때의 효과를 줄 수 있다.

 

import React, { useState } from 'react';
import { useTransition, animated } from '@react-spring/web';

function TransitionExample() {
  const [items, setItems] = useState([1, 2, 3]);

  // useTransition을 사용하여 항목에 대한 애니메이션을 설정
  const transitions = useTransition(items, {
    from: { opacity: 0, transform: 'translateY(-20px)' },
    enter: { opacity: 1, transform: 'translateY(0px)' },
    leave: { opacity: 0, transform: 'translateY(-20px)' },
    keys: items, // 각 항목을 고유하게 식별하기 위해 key 사용
  });

  const addItem = () => {
    setItems([...items, items.length + 1]);
  };

  const removeItem = () => {
    setItems(items.slice(0, -1));
  };

  return (
    <div>
      <button onClick={addItem}>Add Item</button>
      <button onClick={removeItem}>Remove Item</button>
      <div className="item-list">
        {transitions((style, item) => (
          <animated.div key={item} style={style} className="animated-item">
            Item {item}
          </animated.div>
        ))}
      </div>
    </div>
  );
}

export default TransitionExample;

 

 

https://www.react-spring.dev/docs/components/use-transition

 

 

 

---

4. useSpringValue

단일 애니메이션 값을 제어하는 데 사용된다.

이 훅은 useSpring과 비슷하지만, 단일 값을 애니메이션으로 처리하고 싶을 때 더 간단하게 사용할 수 있다.

예를 들어, 특정 스타일의 하나의 속성만을 애니메이션으로 적용해야 하는 경우 유용하다.

 

useSpringValue의 주요 특징

• 단일 값 애니메이션: useSpring은 여러 개의 속성을 동시에 제어하는 반면, useSpringValue는 하나의 속성에 집중해 간단한 애니메이션을 구현할 때 사용한다.
• 반환 값: useSpringValue는 애니메이션 중인 값을 반환합니다. 이를 animated 컴포넌트의 스타일 속성에 바로 사용할 수 있다.

아래 예제에서는 useSpringValue를 사용하여 단일 애니메이션 값으로 요소의 크기를 변경하는 방법을 보여줌

import React, { useState } from 'react';
import { useSpringValue, animated } from '@react-spring/web';

function SpringValueExample() {
  const [toggle, setToggle] = useState(false);

  // useSpringValue 훅을 사용하여 scale 애니메이션 값을 설정
  const scale = useSpringValue(toggle ? 2 : 1, {
    config: { tension: 200, friction: 15 },
  });

  const handleClick = () => {
    setToggle(!toggle);
  };

  return (
    <div>
      <animated.div
        style={{
          width: '100px',
          height: '100px',
          backgroundColor: 'skyblue',
          transform: scale.to((s) => `scale(${s})`), // scale 값을 적용
        }}
      />
      <button onClick={handleClick}>Toggle Scale</button>
    </div>
  );
}

export default SpringValueExample;

 

 

• useSpringValue(toggle ? 2 : 1, { ... }):
  • useSpringValue는 기본적으로 애니메이션할 값을 정의합니다. 여기서는 toggle 값에 따라 scale을 2 또는 1로 설정하여 애니메이션의 목표를 바꿈
  • config: 애니메이션의 설정을 조정. 여기서 tension과 friction을 설정해 애니메이션의 속도와 감속을 제어
• scale.to((s) => scale(${s})):
  • 반환된 scale 값을 변환하여 transform 스타일에 적용합니다. scale.to() 메서드를 사용해 숫자 값(s)을 CSS scale()로 변환
• animated.div:
  • animated.div 요소의 style 속성에서 scale 값을 애니메이션에 사용. 이로 인해 클릭 시 버튼을 눌러 scale 값을 변경하면 요소의 크기가 부드럽게 변합니다.

 

 

---

5.Parallax

Parallax는 3D와 유사한 시각적 깊이를 만들어내기 위한 스크롤 애니메이션 효과를 제공하는 기능.

 웹사이트에서 스크롤 시 배경과 전경 요소들이 서로 다른 속도로 이동하는 "패럴랙스" 효과를 쉽게 구현할 수 있게 해줌.

 

Parallax의 개념

• Parallax(패럴랙스)란, 사용자 스크롤에 따라 여러 요소들이 서로 다른 속도로 이동하여 시각적으로 입체감을 만들어내는 효과를 말한다.
• 예를 들어, 배경은 천천히, 전경의 요소는 더 빠르게 움직여 스크롤 시 원근감을 느끼게 한다.

 

import React from 'react';
import { Parallax, ParallaxLayer } from '@react-spring/parallax';

function ParallaxExample() {
  return (
    <div style={{ height: '100vh', width: '100%' }}>
      <Parallax pages={3} style={{ top: '0', left: '0' }}>
        {/* Background Layer */}
        <ParallaxLayer
          offset={0}
          speed={0.5}
          style={{
            backgroundImage: 'url(https://source.unsplash.com/random/1200x800?nature)',
            backgroundSize: 'cover',
          }}
        >
        </ParallaxLayer>

        {/* Foreground Layer */}
        <ParallaxLayer offset={1} speed={1} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <h1 style={{ color: 'white' }}>Welcome to the Parallax Effect</h1>
        </ParallaxLayer>

        {/* Another Layer */}
        <ParallaxLayer offset={2} speed={2} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <h2 style={{ color: 'white' }}>Enjoy Scrolling</h2>
        </ParallaxLayer>
      </Parallax>
    </div>
  );
}

export default ParallaxExample;

1. <Parallax pages={3} />:
   • Parallax 컴포넌트는 패럴랙스 레이아웃의 컨테이너 역할을 한다.
   • pages 속성은 몇 개의 "페이지"를 사용할지 정의합니다. 이 값은 전체 스크롤 영역의 크기를 결정한다.
   • 여기서는 3개의 페이지를 사용할 수 있도록 설정했다.
2. <ParallaxLayer />:
   • ParallaxLayer는 패럴랙스 효과를 적용할 각 개별 레이어를 정의한다.
   • offset: 해당 레이어가 시작할 페이지를 지정합니다. 예를 들어, offset={1}은 두 번째 페이지에 해당하는 레이어를 의미한다
   • speed: 스크롤 속도를 정의한다. 값이 클수록 해당 레이어가 더 빠르게 스크롤됩니다. 이를 통해 원근감을 조절할 수 있다.
3. style 속성:
   • ParallaxLayer에 스타일을 적용하여 배경 이미지나 텍스트 등을 설정할 수 있다.
   • 예시에서 첫 번째 ParallaxLayer에는 랜덤한 자연 이미지를 배경으로 설정하여, 배경이 천천히 스크롤되도록 하고 있다.

Parallax의 동작 방식

• ParallaxLayer 컴포넌트의 **offset**과 speed 속성을 조합하여, 서로 다른 레이어들이 스크롤 시 서로 다른 속도로 이동하도록 만든다.
• 예를 들어, 배경 (speed={0.5})은 천천히 이동하고, 전경 요소 (speed={1} 또는 2)는 더 빠르게 이동함으로써 깊이 있는 시각적 효과를 제공한다.

https://www.react-spring.dev/docs/components/parallax-layer

Parallax Layer | React Spring

 

 

 

---

 

https://www.react-spring.dev/docs/components/use-spring-value

useSpringValue | React Spring

 

 

 

 

 

---

 

 

https://codesandbox.io/p/sandbox/nlzui?file=%2Fsrc%2FApp.tsx

https://codesandbox.io/p/sandbox/nlzui?file=%2Fsrc%2FApp.tsx