다음 페이지의 페이지 변환.js와 프레임 운동

우리 뭐 짓고 있어?

나는 너를 도와 너의 다음 일에 더 많은 즐거움을 더하기 시작할 것이다.js 응용 프로그램 (or other React apps) with transitions between pages.Framer Motion API의 AnimateSharedLayout 구성 요소를 사용하여 페이지 간의 원활한 융합을 실현합니다.
See the demo

왜?

네트워크는 기능이 강한 플랫폼으로 많은 것을 제공할 수 있다.웹 페이지 사이에 틈이 없는 과도를 추가함으로써 우리는 더욱 현지적인 사용자 인터페이스로 전환하여 사용자를 즐겁게 하고 당신의 웹 사이트나 웹 응용 프로그램을 자신만의 유형으로 끌어들이기 시작합니다.

왜 다음이야?js？

다음.js는 웹 응용 프로그램의 유행 프레임워크를 구축하는 데 충분한 이유가 있다.그것은 React의 기초 위에서 세워져 좋은 개발자 체험을 제공했다.우리가 이용하고 있는 가장 뚜렷한 기능 중 하나는 내장 루트다.우리는 이미 세운 기초 위에서 다음 단계로 세울 것이다.만약 네가 이 기술을 기존의 프로젝트에 응용하고 싶다면, 매우 쉽게 할 수 있을 것이다.

왜 틀 동의입니까?

Framer motion은 사용이 간편한 라이브러리로서 원하는 전환 효과를 빠르게 구현할 수 있으며 강력한 기능을 제공합니다.이것은 우리로 하여금 다양한 애니메이션 유형을 혼합할 수 있게 하고, 당신의 페이지를 더욱 즐겁게 하는 좋은 기초가 될 수 있게 한다.Next와 결합할 때js, 이것은 내가 좋아하는 풍부한 사용자 체험과 개발자 체험을 제공합니다.

저희가 애니메이션을 시작해야 돼요.

다음은 두 가지 관건적인 요소다.js 및 Framer 동작.Next를 사용하지 않으면js와 React 공유기는 다른 React 공유기 라이브러리를 사용합니다. 이 라이브러리를 어떻게 융합시키는지 알 수 있습니다.이것은 넥스트의 특허가 아니다.js 또는 Framer Motion, 이것은 단지 내가 가장 좋아하는 두 개의 조합일 뿐이다.편하게 섞어서 코디하실 수 있어요.

이 항목에 관하여

이 항목에는 애니메이션을 설정하는 두 개의 페이지가 포함되어 있습니다.페이지 간에 공유되지 않은 요소는 에서 애니메이션을 설정하고 공유된 요소는 페이지 간에 애니메이션을 설정합니다.

페이지 변환 자습서

변하지 않는 원소를 찾아내다

우리의 예에서 우리는 두 페이지 사이에 애니메이션을 설정할 것이다.첫 번째 페이지는 간단한 로그인 페이지로 그림, 제목, 단락, 단추를 포함합니다.단추를 누르면 우리의 다른 페이지로 내비게이션을 할 수 있습니다.제목과 이미지가 같은 기능 페이지이지만 그 주변에 다른 아이콘과 기능 설명이 있습니다.
두 페이지에 있지 않기 때문에 모든 요소를 변환할 수 없습니다.제목과 그림이 같기 때문에 가장 뚜렷한 후보들이다.이 단추는 작동할 수 있을 것 같지만, 텍스트 내용이 다르기 때문에, 몇몇 작업을 통해 통과할 수 있을 것 같은 것을 만들 수 있지만, 나는 이 요소의 레이아웃 전환을 건너뛸 것이다.

AnimateSharedLayout을 응용 프로그램에 추가

첫 번째 단계는 구성 요소를 설정하고 잊어버리는 것입니다.이 구성 요소를 사용하면 서로 다른 구성 요소 간의 레이아웃 변경을 위한 애니메이션을 설정하고 Framer에서 공유되는 요소를 알려주므로 새 상태로 전환해야 합니다.설정하려면 내부AnimateSharedLayout에서 가져옵니다._app 그리고 우리 import { AnimateSharedLayout } from "framer-motion";를 싸라.
우리Component는 이렇게 보인다.Bulma CSS 라이브러리와 SASS, 그리고 멋진 아이콘을 사용하고 있습니다._app 상하문 중의 Component 도구는 우리가 현재 있는 페이지입니다.다음.js, 이것은 레이아웃과 같아서, 우리 페이지에서 사용합니다.응용 프로그램의 모든 페이지 사이에 애니메이션을 빈틈없이 설정하기를 원하기 때문에 이것은 우리의 목적에 특히 유용하다.

import "../styles/theme.sass"
import "@fortawesome/fontawesome-free/css/all.css"
import { AnimateSharedLayout } from "framer-motion"

function MyApp({ Component, pageProps }) {
  return (
    <AnimateSharedLayout>
      <Component {...pageProps} />
    </AnimateSharedLayout>
  )
}

export default MyApp

우리는 MyApp 을 추가했지만, 아무런 변화가 없습니다. 제목과 이미지 요소를 운동 구성 요소로 전환합니다.

layoutId 설정 변환 사용

첫 페이지AnimateSharedLayout에서 프레임 운동index.js에서 운동 구성 요소를 가져옵니다.이 구성 요소는 일반 html 요소를 애니메이션을 설정할 수 있는 구성 요소로 변환할 수 있습니다.일반적으로 우리는 import { motion } from "framer-motion"; 도구를 추가하여 애니메이션을 정의할 수 있지만 우리는 animate 도구로만 과도를 완성할 수 있다.이 문자열은 우리 프로그램에서 유일합니다.
제목은 다음과 같습니다.

<h1 className="title has-text-weight-bold is-1 is-size-2-mobile is-spaced">
  The only Todo App you'll ever need
</h1>

이 경우:

<motion.h1
  className="title has-text-weight-bold is-1 is-size-2-mobile is-spaced"
  layoutId="title"
>
  The only Todo App you'll ever need
</motion.h1>

우리는 소포 그림의figure 요소에 대해 같은 작업을 수행할 것입니다.

<motion.figure className="image" layoutId="image">
  <Image src="/assets/task.png" layout="responsive" width={780} height={501} />
</motion.figure>

페이지의 일치하는 요소도 바꾸십시오.페이지가 layoutId에서 features.js로 전환될 때, 만약 한 페이지의 요소가 두 번째 페이지의 요소와 같은 /를 공유한다면,framer는 그것들을 같은 요소로 간주할 것이다.
한번 해 보세요. 제목과 그림이 화면에서 유창하게 움직이는 것을 볼 수 있습니다.

동작으로 스타일링을 완성합니다.

이런 방법은 우리가 페이지 사이를 왔다갔다하며 예상대로 전환할 수 있도록 하기 때문에 매우 멋있다.이것은 좋은 출발점이다. 우리는 이미 핵심 효과를 거두었지만, 나는 더 많은 것이 필요하다고 생각한다.프레임 동작을 사용하여 페이지에서 공유되지 않은 요소에 소개 애니메이션을 추가하여 보기를 완성합니다.
페이지 고유의 요소에 대해서는 페이드인합니다.
다음은 색인 페이지의 부제목 예제입니다.

<motion.p
  className="subtitle"
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  transition={{ delay: 0.2 }}
>

이것은 간단한 페이드 애니메이션으로 불투명도는 0으로 시작하고 200밀리초 지연되면 애니메이션의 불투명도는 1이다.
그러나 사용자가 페이지를 처음 방문했을 때 어떤 일이 일어날까요?우리는 모든 요소에 애니메이션을 설정할 수 있습니까?Framer Motion 이 있습니다. 예, 할 수 있습니다.우리는 /features 도구를 추가하여 사용자가 페이지를 열 때 소개 애니메이션을 재생할 수 있으며 다음 페이지의 전환에 영향을 주지 않는다.
이것은 우리의 애니메이션으로 가벼운 확대 효과가 있는 페이드인입니다

<motion.h1
  initial={{ scale: 0.8, opacity: 0 }}
  animate={{ scale: 1, opacity: 1 }}
  className="title has-text-weight-bold is-1 is-size-2-mobile is-spaced"
  layoutId="title"
>

이제 최종 제품을 살펴보겠습니다.

지금 어디 가세요?

우리는 응용 프로그램에 활력을 불어넣기 위해 아주 멋진 효과를 냈고 개발자들은 아주 적은 노력만 할 수 있다.Framer Motion을 사용하면 이러한 복잡한 레이아웃 애니메이션을 쉽고 비타협적으로 만들 수 있습니다.페이지의 출입 애니메이션과 페이지 사이의 전환을 쉽게 조정할 수 있다.나는 네가 이미 새로운 것을 배웠고, 이 기술들을 너의 프로젝트에 응용하기를 바란다.
인터넷은 정적 웹 페이지에 그치지 않고 할 수 있는 플랫폼이다.사용자 체험이 풍부한 플랫폼으로서 우리는 더욱 상상력이 있는 사용자 인터페이스를 설계하여 사용자의 행위에 진정으로 반응하고 예상을 초과할 수 있는 기회를 얻을 수 있다.페이지 전환을 통해 애니메이션을 제작하는 것은 우리가 풍부하게 체험할 수 있는 도구 중 하나로 다음 단계는 매우 쉽다.js 및 Framer 동작.

리소스

See the demo

이 일과 용례에 대한 더 많은 정보를 읽기Framer Motion API: AnimateSharedLayout documentation

검색completed project repo on GitHub

내 starter project repo on GitHub에 따라 조정한다.

이 점을 좋아하고, 프레임워크 운동이나 웹 개발에 대한 더 많은 정보를 React에서 알고 싶으면, 제 Benevolent Bytes blog 를 보십시오.나는 또 하나의 사이트를 가지고 있는데, 나는 동영상 강좌를 만들어서 네가 더욱 좋은 인터넷 체험을 하도록 돕는다