ReactJs 애니메이션:Reactspring 애니메이션을 사용하여 로그인/등록 양식 만들기

인터넷 애니메이션은 줄곧 핫이슈였다.reactjs 응용 프로그램 개발에 있어서 애니메이션을 실현하기 위한 대량의 옵션이 있습니다.다음 그림과 같이 온라인에서 해당 기능의 예를 볼 수 있습니다.
Animation - React.js Examples
본문의 목적에서, 나는 당신을 위해 사용할 수 있는 몇 가지 옵션을 집성했습니다. (여기에 열거된 옵션은 5개에 그치지 않습니다.)내 react 애니메이션 방법은 다음과 같습니다.
CSS 메서드 - 기본 CSS 스타일을 사용하기 때문에 코드가 필요하지 않습니다.
React transition group - 기본 CSS 애니메이션 및 변환 기능을 포함하는 추가 구성 요소입니다.
React Motion - React의 팝 라이브러리입니다.생성된 애니메이션은 자연스러워 보이며 물리적 개념을 사용하여 사실적인 느낌을 제공합니다.
React spring은 또 다른 물리적 기반 애니메이션 라이브러리로, 고급 모션 애니메이션 기능을 제공합니다.
따라서 React에서 사용할 수 있는 라이브러리/방법을 알아봅니다.나는 React.js와 React spring에서 나의 이전 프로젝트를 다시 쓰기로 결정했다.
나는 이것에 관한 교과서 영상을 만들었는데, 너는 여기서 완전한 영상을 볼 수 있다.

설계 및 레이아웃

애니메이션에 대해 저는 과거에 css 방법과 React transition group을 사용한 적이 있기 때문에 이번에는 더 높은 것을 탐색하기로 했습니다.따라서 저는 리얼리티-spring을 리얼리티 애니메이션을 실현하는 주요한 방법으로 선택했습니다.프레젠테이션의 디자인은 다음과 같습니다.

이 디자인은 격자 모양의 레이아웃으로 분해될 수 있으며, 우리가 필요로 하는 HTML 요소를 참고하여 이 레이아웃을 실현할 수 있습니다. 이것은 매우 유용합니다. 왜냐하면 이것은 내가react 프로그램에서 어떤 부분/구성 요소/용기를 필요로 하는지 확인할 수 있기 때문입니다.자세한 내용은 다음을 참조하십시오.

위에서 HTML로 프레임 레이아웃을 작성할 수 있습니다. 아래와 같습니다. 이것은 제 이전 구조와 같습니다.

<div className="container">
        <div className="login-register-wrapper">
            <div className="nav-buttons">
                <button id="loginBtn" class="active">Login</button>
                <button id="registerBtn">Register</button>
            </div>
            <div className="form-group">
                <form action="" id="loginform">
                </form>
                <form action="" id="registerform">    
                </form>
            </div>
            <div id="forgot-panel">
            </div>
        </div>
    </div>

참고: 이 외에도 JSX "className"을 사용했습니다. 표준 HTML일 뿐입니다.
애니메이션에 있어서 우리는 로그인 폼과 등록 폼의 위치에 애니메이션을 설정할 것이다.테이블은 클릭한 버튼, 즉 등록 또는 로그인 버튼에 따라 초점으로 이동합니다.단추는 단추를 눌렀을 때 전환할 수 있는 밑에 있는 경계선을 담백하게 합니다.

우리의 응용 프로그램 구조

create react app를 사용하여 템플릿 응용 프로그램을 만들고 필요한 정리를 수행한 후 다음과 같이 위의 프레임워크 코드를 응용 프로그램의 주요 구조로 사용할 수 있습니다.

import React, { useState } from "react";
import "./App.css";

function App() {

  return (
         <div className="login-register-wrapper">
            <div className="nav-buttons">
                <button id="loginBtn" class="active">Login</button>
                <button id="registerBtn">Register</button>
            </div>
            <div className="form-group">
                <form action="" id="loginform">
                </form>
                <form action="" id="registerform">    
                </form>
            </div>
            <div id="forgot-panel">
            </div>
        </div>
  );
}

그런 다음 Install react spring 명령을 입력하여 react spring을 설치한 다음 응용 프로그램에 설치합니다.js, react spring에 사용할 다음 가져오기 명령이 있는지 확인하십시오.

import React, { useState } from "react";
import { useSpring, animated } from "react-spring"; // react-spring
import "./App.css";

참고: 구성 요소usespring 및 애니메이션이 react spring 모듈에서 로드됩니다.

봄에 대한 기본 지식

참조react-spring api버튼 클릭 시 페이드 인 간단한 애니메이션은 다음과 같습니다.

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

function App() {
  const [toggle, setToggle] = useState(true);
  const props = useSpring({
    opacity: toggle ? 1 : 0,
  });

  return (
    <div>
      <animated.div style={props}>
        This content will fade in and fade out when you press the toggle button
      </animated.div>
      <button onClick={() => setToggle(!toggle)}>Toggle</button>
    </div>
  );
}

export default App;

여기서 설명하는 개념은 다음과 같이 불투명한 스프링 애니메이션을 정의합니다.

  const props = useSpring({
    opacity: toggle ? 1 : 0,
  }); 

이것은 마치 갈고리처럼 전환된 값이 바뀌었을 때, 즉 단추를 눌렀을 때 실행된다.삼원 표현식'toggle?1:0'이 있는데 이것은 전환 메커니즘입니다.그리고 보기에서 우리는 애니메이션을 설정할 HTML 요소의 접두사로'animated'를 사용한 다음에 스타일 속성을'props'에서 정의한 애니메이션으로 설정합니다.

 <animated.div style={props}>
        This content will fade in and fade out when you pree toggle button
 </animated.div>

우리 프로그램 보기에는 애니메이션 패키지가 있어요...

이제 개별 항목의 애니메이션을 만드는 방법을 알게 되었으므로 애니메이션 패키지와 스타일의 애니메이션 속성을 포함하여 데모 응용 프로그램 보기를 다시 작성할 수 있습니다.

스타일에 입력한 애니메이션 속성은 다음과 같습니다.

const loginProps = useSpring({ // animatimg login form
    left: registrationFormStatus ? -500 : 0

  })
  const registerProps = useSpring({ // animatimg register form
    left: registrationFormStatus ? 0 : 500

  })
  // animatimg buttons
  const loginBtnProps = useSpring({borderBottom: registrationFormStatus ? 'solid 0px transparent' : 'solid 2px #1059FF'})
  const registerBtnProps = useSpring({borderBottom: registrationFormStatus ? 'solid 2px #1059FF' : 'solid 0px transparent'})

보시다시피, 우리는 표의 왼쪽 위치를 바꾸고 있습니다.loginProps는 로그인 양식의 애니메이션 속성을 포함합니다.등록 단추를 누르면 로그인 폼이 왼쪽 위치-500에 위치하기 때문에 넘침 구역에 있기 때문에 보기에 없습니다.그러나 로그인 단추를 누르면 로그인 폼은 위치 0으로 복원되어 다시 표시됩니다.상수registerprops는 등록표의 애니메이션 값을 포함합니다.레지스트리를 위치 500으로 이동하여 숨기고 위치 0으로 이동하여 초점을 맞춥니다.상수 loginBtnProps와 registerBtnprops는 이 두 단추의 애니메이션 속성을 포함합니다.

결론

나는 react spring만 사용하여 서비스를 접했다. 나는 우리의 간단한 예시를 실현하는 것이 매우 쉽다고 생각한다."usespring()"갈고리를 사용하여 단일 항목에 애니메이션을 설정합니다.그러나 react-spring은 더 복잡한 갈고리를 제공합니다. react-spring API 문서에서 참조한 목록을 참조하십시오.

스프링 단일 스프링을 사용하여 a->b에서 데이터를 이동

스프링 다중 스프링을 사용하여 목록에 사용하는데 그 중에서 각 스프링이 a->b에서 데이터를 이동

단일 데이터 세트를 사용하여 여러 스프링을 추적하는데 한 스프링이 다른 스프링을 따라가거나 뒤떨어진다

Transition을 사용한 마운트/언로드 변환(항목 추가/삭제/업데이트 목록)

체인을 사용하여 여러 애니메이션을 정렬하거나 연결

기타 Reactjs 관련 비디오