프레이머 101 | 프레이머 모션으로 시작하는 기본 사항 및 방법.

웹은 아름다운 웹사이트로 가득 차 있고 몇 개를 탐색하는 동안 가끔 내가 그런 것을 만들 수 있다면 얼마나 멋질지 생각합니다, 그렇죠? 저는 이 Framer Weekly 시리즈를 시작하여 웹에서 보는 애니메이션과 상호 작용을 살펴보고 이를 다시 만들거나 Framer 모션으로 아름다운 웹 사이트를 구축하는 팁과 요령을 공유하려고 합니다.
이것은 애니메이션과 프레임 모션의 기초, 구현 방법 및 애니메이션 작동 방식에 대해 배우는 시리즈의 첫 번째 게시물이 될 것입니다.

다음 스택을 사용하겠습니다.

다음JS

프레이머 모션

TailwindCSS

추가로 사용되는 것이 있으면 추가해서 설명하도록 하겠습니다.

저장소와 다음 프로젝트를 초기화하여 시작하겠습니다.

npx create-next-app framer-weekly with-tailwindcss

그렇게함으로써 우리는 시작 nextjs 프로젝트를 갖게 될 것입니다.

이제 애니메이션 속으로 들어가 봅시다.
프레이머 모션으로 요소에 애니메이션을 적용하는 데는 세 가지 기본 부분이 있습니다.

초기의
초기 로드 시 요소가 화면에 배치되는 방법을 정의하는 초기 단계입니다.

생명 있는
이것은 애니메이션 단계로 구성 요소 마운트 단계를 보여줍니다. 구성 요소가 마운트되면 요소가 수행할 작업입니다.

출구
이는 구성 요소를 마운트 해제하는 동안 구성 요소를 마운트 해제하는 것과 유사합니다.

다음은 화면의 요소에 애니메이션을 적용하는 동안 처리해야 하는 기본 3가지 사항입니다. 이들 모두는 소품으로 framer-motion 구성 요소에 전달됩니다.

다음은 참조용 기본 애니메이션입니다.



framer motion은 모션을 추가하기만 하면 모든 HTML 요소를 framer 구성 요소로 변환합니다. 이와 같은 요소 앞에

<motion.div></motion.div>

위의 가져오기 모션 컴포넌트를 이렇게 사용하려면

import { motion } from 'framer-motion'

모션 부분이 없으면 위의 3가지 소품을 구성 요소에 추가할 수 없습니다.

위의 3가지 소품은 객체이며 변경/애니메이션하려는 CSS 값을 사용합니다.

intial = {{
      opacity: 0,
      x: 10,
    }}
animate = {{
      opacity: 1,
      x: 100,
    }}

모션 구성 요소에 전달될 때 위의 코드는 대상 요소의 불투명도 및 x 위치에 애니메이션을 적용합니다.

이것이 프레이머 동작의 기본이었습니다. 다음 게시물에서는 변형, 어린이 비틀거림, 이 아름다운 텍스트 애니메이션을 만드는 방법에 대해 알아볼 것입니다.

이것들을 만드는 방법에 대해 더 알고 싶고 알고 싶다면 여기와 트위터에서도 저를 팔로우해 주세요.