React Spring을 사용하여 애니메이션 생성

반응 응용 프로그램에 애니메이션을 통합하는 것은 전통적으로 어려운 일이었습니다. 그러나 Paul Henschel이 만든 강력한 도서관 인 React-Spring은 프로세스를 크게 단순화합니다. 애니메이션 및 반응 모션을 바탕으로 최적화 된 성능과 간소화 된 API를 제공합니다.

이 튜토리얼은 React-Spring의 5 개 고리 중 2 개의 useSpring 과 useTrail 탐구합니다. 우리는 실제 사례를 통해 그들의 사용법을 설명합니다.

시작하려면 React-Spring을 설치하십시오.

 # 원사
원사는 반응 스프링을 추가합니다

# npm
NPM React-Spring-SAVE 설치

useSpring 으로 애니메이션

useSpring Hook는 상태 간의 원활한 전환을 용이하게합니다. 우리는 애니메이션의 시작 및 종말점을 지정하기 to from 을 정의합니다. 초기 상태를 설정 from 최종 상태를 to 합니다.

첫 번째 예제는 useSpring 사용하여 화면에 미끄러 져 들어가는 상자를 애니메이션합니다. 처음에는 숨겨져 있으면 버튼을 클릭하면 나타납니다.

 import React, {usestate} 'react';
'React-Spring'에서 {usepring, animated} import;

const app = () => {
  const [showcontent, setshowContent] = usestate (false);
  const contentprops = usepring ({
    불투명도 : 쇼 콘텐츠? 1 : 0,
    Margintop : Showcontent? 0 : -1000,
    구성 : {지속 시간 : 500} // 선택 사항 : 애니메이션 기간 추가
  });

  반품 (
    <div classname="container">
      <button classname="button" onclick="{()"> SetShowContent (! showContent)}>
        콘텐츠 전환
      </button>
      <animated.div classname="box" style="{contentProps}">
        <h1 id="이-콘텐츠는-React-Spring-덕분에-미끄러졌습니다">이 콘텐츠는 React Spring 덕분에 미끄러졌습니다!</h1>
      </animated.div>
    </div>
  );
};

useSpring Hook는 애니메이션을 관리합니다. showContent 사실이면 상자가 미끄러 져 눈에 띄게됩니다. 그렇지 않으면 화면에서 숨겨져 있습니다.

useTrail 과 함께 애니메이션 목록

useTrail Hook는 항목 목록을 순차적으로 애니메이션합니다. 각 항목은 이전 항목 후에 애니메이션입니다. 사용자 목록을 가져 와서 렌더링을 애니메이션하겠습니다.

 import React, {usestate, useeffect} '에서'react ';
'React-Spring'에서 {Usetrail, Animated} 가져 오기;

const app = () => {
  const [users, setUsers] = usestate ([]);
  useeffect (() => {
    fetch ( 'https://jsonplaceholder.typicode.com/users')
      . then (res => res.json ())
      .
  }, []);

  const trail = usetrail (user.length, {
    보낸 사람 : {marginleft : -20, 불투명도 : 0, transform : 'translate3d (0, -40px, 0)'},
    to : {marginleft : 20, 불투명도 : 1, transform : 'translate3d (0,0px, 0)'},
    구성 : {Mass : 5, 장력 : 2000, 마찰 : 200} // 선택 사항 : 미세 조정 애니메이션
  });

  반품 (
    <div>
      <h1 id="임의의-사용자">임의의 사용자</h1>
      {trail.map (({style}, index) => (
        <animated.div key="{users[index]?.id}" classname="box" style="{style}">
          {user [index]?. 사용자 이름}
        </animated.div>
      ))}
    </div>
  );
};

useTrail 사용자 목록에 비틀 거리는 애니메이션을 만듭니다. 각 사용자 이름은 약간 지연되어 미끄러집니다. 더 부드러운 애니메이션에 대한 오류 처리 및 선택적 구성이 포함되어 있습니다.

결론

React Spring은 React 응용 프로그램의 애니메이션에 대한 사용자 친화적 인 접근 방식을 제공합니다. 광범위한 문서와 예제를 탐색하여 창의적인 애니메이션 가능성을 잠금 해제하십시오. 애니메이션을 구현할 때 접근성을 고려해야합니다.

위 내용은 React Spring을 사용하여 애니메이션 생성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!