[react-spring] Common / Props

Overview

useSpring({ from: { ... }, to: { ... }, delay: 100, onRest: () => ... })

Property	Type	Description
from	obj	출발값(optional)
to	obj/fn/array(obj)	최종값
loop	obj/fn/bool	루프 세팅값 (아래에 더 자세히 설명)
delay	number/fn	ms단위로 애니메이션 시작을 미룸 or key => delay 함수
immediate	bool/fn	참이면 애니메이션이 시작 X or key => immediate 함수
config	obj/fn	질량, 장력, 마찰력 등에 관한 값 (다음 편에서 자세히 설명) or key => config 함수
reset	bool	true면 애니메이션이 from에서 to로 처음부터 시작
reverse	bool	참이면 from과 to가 바뀜, reset과 함께 써야함
cancel	bool/string/fn	참이면 Controller의 값마다 애니메이션이 멈춤, (아래에 더 자세히 설명)
pause	bool	참이면 애니메이션 일시정지
events	fn	다양한 event callback들, (아래에 더 자세히 설명)

Loop prop

loop: true 는 애니메이션을 반복시킨다.

function LoopTrue() {
  const styles = useSpring({
    loop: true,
    from: { rotateZ: 0 },
    to: { rotateZ: 180 },
  })

  return (
    <animated.div
      style={{
        width: 80,
        height: 80,
        backgroundColor: '#46e891',
        borderRadius: 16,
        ...styles,
      }}
    />
  )
}

다음과 같이 true면 반복하고 false면 반복하지 않는 함수를 만들어서 줄 수도 있다. loop function은 loop 객체를 리턴할 수 도 있는데 이는 바로 다음에서 설명한다.

function LoopFunction() {
  const n = useRef(0)
  const styles = useSpring({
    loop: () => 3 > n.current++,
    from: { x: 0 },
    to: { x: 100 },
  })

  return (
    <animated.div
      style={{
        width: 80,
        height: 80,
        backgroundColor: '#46e891',
        borderRadius: 16,
        ...styles,
      }}
    />
  )
}

loop 객체는 loop 애니메이션을 각각의 애니메이션으로 분리해서 정의한다. 이는 useSpring의 모든 prop들을 포함할 수 있다. 예를 들어 reverse: true는 각 루프마다 애니메이션의 방향을 바꾼다.

function LoopObject() {
  const styles = useSpring({
    loop: { reverse: true },
    from: { x: 0 },
    to: { x: 100 },
  })

  return (
    <animated.div
      style={{
        width: 80,
        height: 80,
        backgroundColor: '#46e891',
        borderRadius: 16,
        ...styles,
      }}
    />
  )
}

loop 객체는 항상 그것이 정의된 useSpring객체와 병합된다.
예를 들어 아래 코드에서 loop객체는 config.duration을 오버라이드한다.

function InheritedProps() {
  const n = useRef(0)
  const styles = useSpring({
    from: { x: 0 },
    config: { duration: 1000},
    loop: {
      reset: true,
      x: 100,
      config: {friction: 5}
    },
  })

  return (
    <animated.div
      style={{
        width: 80,
        height: 80,
        backgroundColor: '#46e891',
        borderRadius: 16,
        ...styles,
      }}
    />
  )
}

Cancel prop

useSpring({
  cancel: true,
  from: { x: 0 },
  to: { x: 100 },
})

위 코드는 결코 움직이지 않는다. cancel이 항상 true이기 때문이다.
cancel prop이 true에서 false로 바뀌는 순간, 정의된 애니메이션은 주어진 prop에 따라 resume 또는 reset된다.

cancel prop은 심지어 delay된 애니메이션을 막을 수도 있다.

const [style, animate] = useSpring(() => ({ x: 0 }))

// Pass this to an element.
const onClick = () => {
  animate({ x: 100, delay: 500 })

  // Prevent the previous update. 🤣
  animate({ cancel: true })
}

위 코드에서 애니메이션은 동작하지 않는다.

또한 특정 키에 대해서 애니메이션을 취소할 수도 있는데,

// Using a single key
cancel: 'x',

// Using an array of keys
cancel: ['x', 'y'],

// Using a function
cancel: key => key !== 'x',

위와 같이 다양한 방법으로 사용할 수 있다.
reset과 immediate도 위와 같은 타입을 지원한다.

Events

Event name	Description
onStart	Callback when a spring or key is about to be animated
onChange	Frame by frame callback
onRest	Callback when a spring or key comes to a stand-still
onPause	Callback when a spring or key is paused
onResume	Callback when a spring or key is resumed
onDelayEnd	Callback when a spring or key has finished being delayed
onProps	Callback when a spring or key's props have been updated

Events as functions

onDelayEnd와 onProps를 제외한 이벤트들은 모두 같은 argument를 받는다.

(result: AnimationResult, spring: Controller | SpringValue, item?: Item) => void

• result : 호출시의 spring에 있는 값들을 포함하는 객체 (후술)
• spring : AnimationResult의 Controller나 SpringValue
• item : useTransition 훅이나 Transition 컴포넌트를 사용할때만 유효

주의 onStart는 첫번째 애니메이션 tick이 실행된 후에 호출되므로 이 값은 상당히 더럽다.

onDelayEnd와 onProps는 다음 argument를 받는다.

(props: SpringProps, spring: SpringValue) => void

• props : spring의 props object
• spring : 영향을 받는 SpringValue object

Events as objects

이벤트는 다음처럼 key에 따라서 정의될 수도 있다.

useSpring({
  from: { x: 0, y: 0 },
  onRest: {
    x: () => console.log('x.onRest'),
    y: () => console.log('y.onRest'),
  },
})

Animation result

몇몇 이벤트는 AnimationResult 객체를 첫번째 파라미터로 받는다. 이는 다음 속성들을 포함한다.

• value: any 애니메이션이 끝났을 때 현재 값
• finished?: boolean 애니메이션이 stop이나 cancel되기 전에 끝났을 때 참
• cancelled?: boolean 애니메이션이 cancel되었을 때 참