React용 Framer Motion API

박람회.

우리는 모두 거기에 있었습니다. 수많은 웹 페이지의 아름다운 애니메이션을 보고 자체 CSS를 보고 몇 시간 동안 작업한 와이어 프레임에 한숨을 쉬고 div를 중앙에 배치하는 방법을 인터넷 검색합니다. 그리고 우리를 오해하지 마십시오. 즉, 배우는 방식이자 물론 Codepen입니다.🌚


그러나 프런트 엔드가 중요합니다. 일부는 웹앱의 핵심 백엔드만큼 중요하다고 주장합니다. 결국, 그것은 모두가 보고, 실수를 찾고, 아름다움에 감탄하고, 디자인에 대해 코웃음을 치는 부분입니다. 그리고 이것은 우리를 Framer로 인도합니다. 프런트 엔드 디자인 및 애니메이션을 위한 온라인 무료 프로토타이핑 도구 ...


... 코드를 작성하지 않고.

아뇨, 감사합니다.

주문.

고맙게도(?) 그들의 React용 모션 API는 NPM 패키지로 오픈 소스이며 필요에 따라 CSS와 결합하여 다양한 구성 요소를 애니메이션화할 수 있습니다. (이봐, 나는 더 나은 애니메이션이 아니라 더 적은 작업이라고 말했습니다.)



이를 위해서는 React 기반 프로젝트가 필요합니다. Vue와 Angular 갱, Facebook의 한도에는 또 다른 한도가 있습니다.

계속해서, 이것은 Vue 대 Angular 대 React 토론이 아니며, 더 이상 관련성이 있기까지 여러 번 '완전히 해결'되었습니다.

그렇다면 Framer Motion API는 정확히 무엇입니까? CSS가 할 수 없는 것을 수행합니까?

아니.

그럼 쓸데없는거아님? 아니.

무엇을 하느냐가 아니라 얼마나 빠르고 쉽게 하느냐가 가장 중요합니다. 이것에 대해 우리를 인용하지 마십시오. 이것은 대부분의 API/프레임워크가 개념화되는 방식입니다.

그리고 현실을 직시하세요. 이러한 정의를 따른다면 대부분의 새로운 JavaScript 프레임워크는 쓸모 없게 될 것입니다.(대부분이 그렇습니다.)

반응 프로젝트를 만듭니다.

먼저 터미널로 이동하여 npm 패키지를 설치하고

npm install framer-motion

Enter 키를 누릅니다.

Framer Motion API는 매우 간단한 방식으로 작동합니다. 필요에 따라 페이지 또는 구성 요소 파일의 framer-motion npm 패키지에서 모션 구성 요소를 가져옵니다.

import {motion} from "framer-motion"

그런 다음 고전적인 HTML/JSX 구성 요소 대신 모션 구성 요소를 선언할 수 있습니다. 처럼,

<motion.div/>

대신에

<div/>

이러한 모든 대체 구성 요소에는 애니메이션, 변환, 심지어 하드 코딩된 인라인 CSS 및 GPU 가속 그래픽에 대해 구성 가능한 많은 값이 함께 제공됩니다.

매직.

이 약간 가속되는 토글을 확인하십시오.



또는 이 스크롤 종속 애니메이션...



또는 브랜드 로고를 위한 이 모양이 변하는 물체.



꽤 깔끔하죠? 마지막 샌드박스의 Example.tsx에는 21줄의 코드만 있습니다.

이제 간단합니다.

다시 말하지만 Framer 온라인 도구가 나쁘다고 말하는 것은 아닙니다. 그러나 다시, 우리는 주로 코딩에 대해 논의합니다. 클래식한 스타일링에 대한 예리한 지식으로 숨이 멎을 듯한 비주얼을 선사할 수 있는 사람이 있다면 찬사를 보냅니다. 그러나 API를 사용하면 많은 개발자가 아름다운 것을 만들 수 있습니다. 마법 같은.

그리고 하루가 끝나면 그것이 전부입니다.

여기에서 확인하십시오.

프레이머 / 운동

React용 오픈 소스, 프로덕션 준비 애니메이션 및 제스처 라이브러리

그리고 API 설명서here.


이 정보가 도움이 되었기를 바랍니다.
당사website를 방문하여 당사에 대해 자세히 알아보고 당사를 팔로우하십시오.

Facebook

좋아요와 댓글도 잊지마세요.

그때까지,
안전을 유지하고 근원이 당신과 함께하기를 바랍니다!