패스트캠퍼스 챌린지 10일차 (React Spring)

2022.2.2(수) +10days

react-spring

react-spring is a spring-physics based animation library that should cover most of your UI related animation needs. It gives you tools flexible enough to confidently cast your ideas into moving interfaces.

Installation

yarn add react-spring

Platforms

@react-spring/konva
@react-spring/native
@react-spring/three
@react-spring/web
@react-spring/zdog

Why springs and not durations

The principle you will be working with is called a spring, it does not have a defined curve or a set duration. In that it differs greatly from the animation you are probably used to. We think of animation in terms of time and curves, but that in itself causes most of the struggle we face when trying to make elements on the screen move naturally, because nothing in the real world moves like that.

Basic

The basic spring is useSpring, but the same concept applies to all animation primitives. Let's have a look...

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'

Next, define your spring

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

Finally, tie the animated values to your view

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

5 Hooks

• useSpring : data를 a에서 b로 이동시키는 spring이다.
• useSprings : multiple spring이다.
• useTrail : 단일 dataset을 위한 multiple spring이다. 하나의 spring을 다른 것들이 따라간다. 그래서 "Trail"이다.
• useTransition : 트랜지션의 mount/unmount을 위해 사용된다.
• useChain : 여러 애니메이션을 중첩하여 적용하거나, 순차적으로 적용하기 위해 사용한다. 그래서 "Chain"이다.

Props

https://react-spring.io/common/props

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

모든 기본 요소는 아래 속성을 상속 받는다.

CSS로 애니메이션을 줄 경우, 일시정지는 재시작, 반복 등 애니메이션 중에 특정 이벤트를 적용하는 것이 쉽지 않은데 React Spring은 고급 Props를 제공한다.

 

Code Example

import React from "react";
import { useState } from "react";
import { animated, config, useSpring } from "react-spring";

export default function Text() {
  const [flip, set] = useState(false);
  const props = useSpring({
    to: { opacity: 1 },
    from: { opacity: 0 },
    reset: true,
    reverse: flip,
    delay: 200,
    config: config.molasses,
    onRest: () => set(!flip),
  });

  return <animated.h1 style={props}>hello</animated.h1>;
}

 

정리

좀 더 나은 애니메이션 ⇒ 물리엔진

hooks ⇒ use{*}

animated ⇒ Outside React

 

 

 

 

2022.2.2 +10days

 

 

 

 

https://bit.ly/37BpXiC

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다