useSpring

1. 모듈 불러오기

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

2. 사용하기

2.1 기본 사용 방법

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

function App() {
  const props = useSpring({to: {opacity: 1}, from: {opacity: 0}})
  
  return <animated.div style={props}>I will fade in</animated.div>
}

2.2 useSpring 속성

  const props = useSpring({
  // 마지막에 보여지는 스타일 속성 
    to: { opacity: 1, color: '#fff' },
  // 처음 보여지는 기본 스타일 
    from: { color: '#73e77f' },
  // 지연 시간 
    delay: 1000,
  })

2.3 마지막 프레임

기본 값(from) 없이 마지막 프레임만 적용할 수 있다.

const props = useSpring({ opacity: 1, color: '#fff' })

2.4 조건 처리

const props = useSpring({opacity: toggle ? 1 : 0})

2.5 사용자 정의 transition

비동기 처리를 통해 사용자가 정의하여 애니매이션 효과를 새롭게 만들 수 있다. 방법1, 방법2 모두 같은 효과를 나타낸다.

2.5.1 방법 1

  const props = useSpring({
    to: async (next, cancel) => {
      await next({ opacity: 1, color: '#ffaaee' })
      await next({ opacity: 0.5, color: '#73e77f' })
      await next({ opacity: 0, color: '#fbea2a' })
    },
    from: { opacity: 0, color: 'red' },
  })

2.5.2 방법 2

  const props = useSpring({
    to: [
      { opacity: 1, color: '#ffaaee' },
      { opacity: 0.5, color: '#73e77f' },
      { opacity: 0, color: '#fbea2a' },
    ],
    from: { opacity: 0, color: 'red' },
  })

3. 키워드

구분	설명
to	마지막 프레임
from	시작 프레임(기본 )
delay	지연 시간 예) 1000 = 1s

3.1 키워드 단축키

  const props = useSpring({ to: { opacity: 1, color: '#fff' } })
  
  // 위의 구문을 단축하여 사용하면 
  const props = useSpring({ opacity: 1, color: '#fff' })

4. 실습