#8 Animations

#8.0 Introduction

ㄴㅇ

---

#8.1 Installation

1. framer-motion 라이브러리 설치 npm install framer-motion

2. CRA로 react를 사용중이라면 위 라이브러리 설치 후 <motion.div/>를 하면 error가 발생한다. croco를 사용하여 react-sript를 덮어씌워주면 해결이 된다.

3. Vite로 react를 사용하면 error도 안뜨고 잘 실행된다.

---

#8.2 Basic Animations

- Framer Motion의 애니메이션은 모션 컴포넌트의 유연한 animate 속성을 통해 제어된다. 간단한 애니메이션의 경우 animate props에서 직접 값을 설정할 수 있다.

- 속성들

  - initial에는 element의 초기 상태. 원하는 상태를 넣는다. start의 개념?

  - animate는 최종 스타일임.

  - transition은 과정

- 문서 참고 https://motion.dev/docs/react-transitions

---

#8.3 Variants part One

- variants는 컴포넌트가 가질 수 있는 미리 정의된 시각적 state이다. initial, finish, showing, hidden, from to, 0% 100% 등.

 

이걸 만든다.

https://framermotion.framer.website/

---

#8.4 Variants part Two

- Orchestration
delayChildren: 딜레이 시간(초) 후에 하위 애니메이션이 시작된다.
staggerChildren: 하위 컴포넌트의 애니메이션에 지속 시간(초)만큼 시차를 둘 수 있다. 예를 들어, staggerChildren이 0.01이면 첫 번째 자식은 0초, 두 번째 자식은 0.01초, 세 번째 자식은 0.02초 지연되는 식임. 계산된 stagger 딜레이가 delayChildren에 추가된다.

---

#8.5 Gestures part One

- Hover
hover 제스처는 포인터가 컴포넌트 위로 이동하거나 컴포넌트를 떠날 때를 감지한다. onMouseEnter 및 onMouseLeave와는 달리 실제 마우스 이벤트의 결과로만 호버가 실행되도록 보장된다.

- whileHover: VariantLabels | TargetAndTransition
호버 제스처가 인식되는 동안 애니메이션할 속성 또는 변형 레이블이다.
< motion.div whileHover={{ scale: 1.5 }} / >

- Tap
whileTap: VariantLabels | TargetAndTransition
컴포넌트를 누르고 있는 동안 애니메이션할 속성 또는 변형 레이블이다.
< motion.div whileTap={{ scale: 0.8 }} / >

- Drag
drag: boolean | "x" | "y"
이 요소에 대해 끌기를 활성화한다. 기본적으로 false로 설정된다. 양방향으로 드래그하려면 true로 설정하시오. 특정 방향으로만 드래그하려면 "x" 또는 "y"를 설정한다.
< motion.div drag="x" / >

- whileDrag: VariantLabels | TargetAndTransition
드래그 제스처가 인식되는 동안 애니메이션할 속성 또는 변형 레이블이다.
< motion.div whileDrag={{ backgroundColor: 'rgb(46, 204, 113)', transition: { duration: 5 }}} / >

5초동안 배경색으로 천천히 변한다. hex코드나, rgb, rgba로 넣어줘야한다. string값으로 넣으면 안됨'blue'X.

 

위의 Circle관련 삭제.
Gestures와 drag를 함.

다음 part two에서는 박스안에서만 드래그 가능하게하는것을 배운다.

---

#8.6 Gestures part Two

drag를 박스 안에서 제한한다.

biggerBox를 만들고 그 안에 drag박스를 children으로 둔다.

---

#8.7 MotionValues part One

MotionValue

- MotionValues는 애니메이션 값의 상태(state)와 속도(velocity)를 추적한다.

React Rendering Cycle(렌더링 싸이클)을 발동시키지 않는다.

모든 모션 컴포넌트는 내부적으로 MotionValues를 사용하여 애니메이션 값의 상태와 속도를 추적한다.

일반적으로 이들은 자동으로 생성된다.

(MotionValue는 React State가 아니기 때문에 Motion Value값이 바뀌어도 리랜더링이 일어나지 않는다.=== React Rendering Cycle(렌더링 싸이클)을 발동시키지 않는다.)

 

- const x = useMotionValue(0)
useMotionValue 후크로 MotionValues를 생성할 수 있다. useMotionValue에 전달된 값은 MotionValue의 초기 상태로 작동한다.

- x.set(100)
set 메서드로 업데이트할 수 있다.
이것은 React 리렌더링을 트리거하지 않는다.

- x.get() // 100
MotionValue는 문자열이나 숫자가 될 수 있다.
get 메소드로 값을 읽을 수 있다.

---

#8.8 MotionValues part Two

- 크기 조절

- useTransform
useTransform 훅을 통해 MotionValues를 연결한다.
useTransform()는 한 값 범위에서 다른 값 범위로 매핑하여 다른 MotionValue의 output을 변환하는 MotionValue를 만든다.
x(Motion Value)값을 다른 output값으로 변환해준다.
ex) x: -400=>2 , 0 =>1, 400=>0

useMotionValueEvent에서 scale의 change를 콘솔에 찍어보았을 때, 왼쪽으로 드래그를 아무리 해도 2까지만 표시되고, 오른쪽으로 계속 드래그해도 0.999999...만 표시되는걸 볼 수 있다.

---

#8.9 MotionValues part Three

배경 그라데이션

- linear-gradient
"linear-gradient(135deg, rgb(0, 210, 238), rgb(0, 83, 238))",
"linear-gradient(135deg, rgb(238, 0, 153), rgb(221, 0, 238))",
"linear-gradient(135deg, rgb(0, 238, 155), rgb(238, 178, 0))",

- useViewportScroll(): ScrollMotionValues
뷰포트가 스크롤될 때 업데이트되는 MotionValues를 리턴한다.
아래 값들은 모두 MotionValue< number >를 넘겨준다.
scrollX: 실제 수평 스크롤 픽셀 ex) 500px
scrollY: 실제 수직 스크롤 픽셀 ex) 500px
scrollXProgress : 0 ~ 1 사이의 수평 스크롤
scrollYProgress : 0 ~ 1 사이의 수직 스크롤(가장 상단 0, 가장 하단 1)
"linear-gradient(135deg, rgb(0, 210, 238), rgb(0, 83, 238))",
"linear-gradient(135deg, rgb(238, 0, 153), rgb(221, 0, 238))",
"linear-gradient(135deg, rgb(0, 238, 155), rgb(238, 178, 0))",

- useViewportScroll(): ScrollMotionValues
뷰포트가 스크롤될 때 업데이트되는 MotionValues를 리턴한다.
아래 값들은 모두 MotionValue< number >를 넘겨준다.
scrollX: 실제 수평 스크롤 픽셀 ex) 500px
scrollY: 실제 수직 스크롤 픽셀 ex) 500px
scrollXProgress : 0 ~ 1 사이의 수평 스크롤
scrollYProgress : 0 ~ 1 사이의 수직 스크롤(가장 상단 0, 가장 하단 1)

---

#8.10 SVG Anomation

-Line drawing
svg 엘리먼트에 'pathLength', 'pathSpacing', 'pathOffset' 속성을 사용하여 Line drawing 애니메이션을 만들 수 있다

-path (SVG)
path SVG 엘리먼트는 모양을 정의하는 일반 엘리먼트이다.모든 기본 모양은 path 엘리먼트로 만들 수 있다.
path의 속성 d는 경로의 모양을 정의한다.

-Path
motion.path 컴포넌트는 세 가지 강력한 SVG path 속성인 pathLength, pathSpacing 및 pathOffset을 가지고 있다. 수동 경로 측정이 필요 없이 모두 0과 1 사이의 값으로 설정된다.

-Line drawing
선 그리기 애니메이션은 pathLength, pathSpacing 및 pathOffset의 세 가지 특수 속성을 사용하여 많은 SVG 요소로 만들 수 있다.

 

(Fontawesome에서 Airbnb Logo를 가져온다.)

---

#8.11 AnimationPresence

- AnimatePresence
AnimatePresence를 사용하면 React 트리에서 컴포넌트가 제거될 때 제거되는 컴포넌트에 애니메이션 효과를 줄 수 있다. React에는 다음과 같은 수명 주기 메서드가 없기 때문에 종료 애니메이션을 활성화해야 한다.
-exit
이 컴포넌트가 트리에서 제거될 때 애니메이션할 대상이다.

(Wrapper동일)

---

#8.12 Slider part One

ㄴㅇ

- AnimatePresence
AnimatePresence의 단일 자식 key를 변경하여 슬라이드쇼(슬라이더)와 같은 컴포넌트를 쉽게 만들 수 있다.

-next버튼을 클릭시 Slider효과를 배워보자.

 

-다음은 prev버튼의 Slider효과를 해보자.

---

#8.13 Slider part Two ★

ㄴㅇ

-custom
각 애니메이션 컴포넌트에 대해 동적 variants를 다르게 적용할 때 사용할 수 있는 사용자 지정 데이터이다.

-exitBeforeEnter 지금은 mode:wait을 사용하면 된다.
true wait으로 설정하면 AnimatePresence는 한 번에 하나의 컴포넌트만 랜더링한다. exiting중인 컴포넌트는 entering하는 컴포넌트가 렌더링되기 전에 exit 애니메이션을 완료한다.

Wrapper에 width:100vw; 추가됨.

---

#8.14 You Need to Watch This

-Layout animation
layout: boolean | "position" | "size"
true인 경우 이 컴포넌트는 레이아웃이 변경될 때 새 위치에 자동으로 애니메이션을 적용한다. 크기나 위치가 변경될 때 모션 컴포넌트의 레이아웃에 자동으로 애니메이션을 적용하려면 레이아웃 prop을 제공한다. 부모 플렉스박스 방향, 너비, 상단/오른쪽 등 레이아웃 변경의 원인이 무엇이든 상관없이 애니메이션 자체는 최대 성능을 위해 변환으로 수행된다.
ex) < motion.div layout>< /motion.div>

-Syncing layout animations
모션 컴포넌트의 layout prop은 레이아웃이 변할 때마다, 자동으로 애니메이션을 적용한다.

-Animate between components★
AnimateSharedLayout은 동일한 layoutId prop을 가진 모션 컴포넌트들 간에 애니메이션을 적용할 수 있다. layoutId가 있는 새 컴포넌트가 추가되고 다른 컴포넌트가 제거되면 이전 컴포넌트에서 새 컴포넌트로 레이아웃 애니메이션을 수행한다. 새 컴포넌트는 이전 컴포넌트의 애니메이션 값도 초기 상태로 상속한다. 따라서 시각적으로 하나의 연속 컴포넌트로 처리된다.
ex) isSelected && < motion.div layoutId="underline" />

---

#8.15 Final Project part One

Layout 애니메이션 다양한 사용 예시들
https://www.framer.com/docs/animate-shared-layout/#syncing-layout-animations 

---

#8.16 Final Project part Two

<Grid>
  {['1', '2', '3', '4'].map(n => (
    <Box onClick={() => setId(n)} key={n} layoutId={n} />
  ))}
</Grid>;

 

Box속성 중 onClick에서 '()=>'를 빼고 onClick={setId(n)}을 사용하면 이 function은 즉시 실행될 것이다.

onClick={()=>setId(n)}을 해야 클릭했을 때 function이 실행되는 것이다.