[react-spring] Common / Configs

Spring은 입맛에 따라 변경이 가능하다. 만약 이런 설정을 바꾸고 싶다면 useSpring에서 config를 사용하면 된다.

useSpring({ config: { duration: 250 }, ... })

그리고 버전 9 부터 config는 다음처럼 부분적인 업데이트가 가능하다.

const { x } = useSpring({
  from: { x: 0 },
  config: { frequency: 1 },
})
useEffect(() => {
  x.start({ config: { velocity: 0 } })
  x.start({ config: { friction: 20 } })
}, [])

Props

다음은 Config에서 사용할 수 있는 property들이다.

Property	Default	Description
mass	1	질량
tension	170	에너지
friction	26	저항
clamp	false	참이면 스프링이 지정된 범위를 넘어섰을 때 정지
precision	0.01	정확도
velocity	0	처음 속도
easing	t => t	default는 linear, d3-ease처럼 커스텀 가능
damping	1	느려지는 정도를 나타내는 비율, frequency가 정의됐을 때 작동
progress	0	duration과 함께 쓰면 easing이 시작될 거리
duration	undefined	0보다 크면 스프링 대신 duration 기반 애니메이션으로 작동
decay	undefined	감속 정도, true면 default는 0.998
frequency	undefined	damping이 없을 때 초당 진동수, tension은 여기서 파생, friction 은 tension과 damping에서 파생
round	undefined	애니메이션 중 이 값의 배수로 반올림. from과 to 제외
bounce	undefined	0보다 클때 overshoot 대신 튀어오름
restVelocity	undefined	움직이지 않는 것으로 간주되는 가장 작은 속도, default는 precision 값

Presets

스프링은 config의 몇가지 preset들을 제공한다.

import { ..., config } from 'react-spring'

useSpring({ ..., config: config.default })

Property	Value
config.default	{ mass: 1, tension: 170, friction: 26 }
config.gentle	{ mass: 1, tension: 120, friction: 14 }
config.wobbly	{ mass: 1, tension: 180, friction: 12 }
config.stiff	{ mass: 1, tension: 210, friction: 20 }
config.slow	{ mass: 1, tension: 280, friction: 60 }
config.molasses	{ mass: 1, tension: 280, friction: 120 }

위 prop과 preset들은 여기에서 테스트해볼 수 있습니다.