[react-spring] Basics

이렇게 아름다운 애니메이션을 canvas 없이 쉽게 만들 수 있다!

• 타로카드
• 슬라이드 쇼
• Draggable List

기본적인 사용법은 다음과 같다.

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>
}

First, you fetch your imports

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

animated는 리액트 외부에서 애니메이션이 실행되도록 한다.(성능상의 이유라고 한다) 이 animated는 animated.div처럼 native element들을 extend하여 애니메이션값들을 props 의 형태로 받는다.

Next, define your spring

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

spring은 단순히 한 상태에서 다른 상태로 값을 animate한다. spring은 전달받는 모든 값들을 기억하며, "from"과 같은 예약어들이 있다. api에 대해서는 여기서 확인할 수 있다.

Finally, tie the animated values to your view

return <animated.div style={props}>I will fade in</animated.div>

이 부분에서 이제 위에서 만든 props를 component에 전달해준다. 이미 div, span, svg, h1, ... 와 같은 포함하고 있으며, 만약 React component나 styled-component, 아니면 다른 플랫폼에서 쓰고 싶다면 아래와 같이 하면 된다.

// React components
const AnimatedDonut = animated(Donut)

// React-native
const AnimatedView = animated(View)

// styled-components, emotion, etc.
const AnimatedHeader = styled(animated.h1)`
  ...;
`

Up-front interpolation

spring은 숫자뿐만 아니라 상당히 다양한 값들을 다룰 수 있다.

• 색 (names, rgb, rgba, hsl, hsla, gradients)
• 절대 길이 (cm, mm, in, px, pt, pc)
• 상대 길이 (em, ex, ch, rem, vw, vh, vmin, vmax, %)
• 각도 (deg, rad, grad, turn)
• Flex, grid 단위 (fr, etc)
• 모든 HTML attributes
• SVG 경로 (as long as the number of points matches, otherwise use custom interpolation)
• 배열
• String patterns (transform, border, boxShadow, etc)
• Non-animatable string values (visibility, pointerEvents, etc)
• ScrollTop/scrollLeft

const props = useSpring({
  vector: [0, 10, 30],
  display: 'block',
  padding: 20,
  background: 'linear-gradient(to right, #009fff, #ec2f4b)',
  transform: 'translate3d(0px,0,0) scale(1) rotateX(0deg)',
  boxShadow: '0px 10px 20px 0px rgba(0,0,0,0.4)',
  borderBottom: '10px solid #2D3747',
  shape: 'M20,20 L20,380 L380,380 L380,20 L20,20 Z',
  textShadow: '0px 5px 15px rgba(255,255,255,0.5)',
})