반응 스프링을 이해합니다

React Animation 구현은 항상 개발에서 어려운 시점이었습니다. 이 기사는 이해하기 쉬운 방식으로 React-Spring을 소개하고 일부 실제 신청 사례를 탐색 할 것입니다. React-Spring은 React의 유일한 애니메이션 라이브러리는 아니지만 가장 인기 있고 강력한 라이브러리 중 하나입니다.

이 기사에서는 최신 9.x 버전 (작성 당시 릴리스 후보 버전)을 사용합니다. 이 기사를 읽을 때 공식적으로 게시되지 않은 경우 react-spring@next 를 설치하십시오. 내 경험과 주요 관리자에 따르면 코드는 매우 안정적입니다. 내가 가진 유일한 문제는 동시성 모드와 함께 사용될 때 작은 오류이며, 이는 Github 저장소에서 추적 할 수 있습니다.

반응 스프링 퀵 룩

실제 적용 사례를 파고 들기 전에 Springs, High Animations 및 Transition Animation을 간단히 살펴 보겠습니다. 이 섹션의 끝에 실행 가능한 데모가 제공되므로 프로세스 중에 발생할 수있는 혼란에 대해 걱정할 필요가 없습니다.

스프링

애니메이션의 고전적인 "Hello World": The Fading in and onton 컨텐츠를 고려해 봅시다. 애니메이션없이 보여주고 숨기도록 전환하는 방법에 대해 잠시 멈추고 생각합시다. 다음과 같이 보입니다.

 내보내기 기본 기능 app () {
  const [showing, setshowing] = usestate (false);
  반품 (
    <div>
      <div style="{{" opacity: showing :>
        이 내용은 사라지고 사라질 것입니다
      </div>
      <button onclick="{()"> setShowing (val =>! val)}> 토글</button>
      <hr>
    </div>
  );
}

단순하지만 지루합니다. 불투명도의 변화를 어떻게 애니메이션 합니까? 위와 같이 상태를 기반으로 원하는 불투명도를 선언적으로 설정할 수 있지만 이러한 값을 원활하게 애니메이션으로 만들 수 있다면 좋지 않습니까? 이것이 반응 스프링이하는 일입니다. React-Spring은 끊임없이 변화하는 스타일 값을 처리하여 우리가 원하는 애니메이션 값 사이를 원활하게 전환하는 중개인으로 간주 될 수 있습니다. 이와 같이:

 const [showa, setshowa] = usestate (false);

const fadestyles = usepring ({
  구성 : {... config.stiff},
  보낸 사람 : {불투명도 : 0},
  에게: {
    불투명도 : showa? 1 : 0
  }
});

초기 스타일 값을 지정하고 현재 상태에 따라 to 섹션의 현재 값을 지정하기 from 사용합니다. 반환 값 fadeStyles 에는 콘텐츠에 적용하는 실제 스타일 값이 포함되어 있습니다. 우리는 단지 마지막 일을해야합니다 ...

당신은 당신이 이것을 할 수 있다고 생각할 수 있습니다 :

<div style="{fadeStyles}">
  ...
</div>

그러나 이것은 작동하지 않습니다. 우리는 일반적인 div 사용할 수는 없지만 animated 내보내기에서 생성 된 React-Spring div 사용해야합니다. 이것은 혼란 스러울 수 있지만 실제로는 다음을 의미합니다.

<animated.div style="{fadeStyles}">
  ...
</animated.div>

그게 다야.

고도로 애니메이션

우리가 애니메이션하는 것에 따라, 우리는 주변 콘텐츠가 부드럽게 조정하고 제자리로 흐르도록 컨텐츠가 높이나 높이에서 전체 크기로 올라 가기를 원할 수 있습니다. 위의 코드를 간단히 복사 할 수 있기를 바랍니다. 높이가 0에서 자동으로 변경되지만 불행히도 자동 높이로 애니메이션 할 수는 없습니다. 이것은 정상적인 CSS와 React-Spring에서 작동합니다. 대신, 우리는 내용의 실제 높이를 알고 스프링 to 에 지정해야합니다.

우리는 값을 반응 스프링에 전달하려면 컨텐츠의 높이를 동적으로 가져와야합니다. 웹 플랫폼은 ResizeObserver 위해 특별히 설계 한 것으로 나타났습니다. 그리고 그 지원은 실제로 꽤 좋습니다! 우리는 REACT를 사용하고 있기 때문에 물론 사용법을 고리로 감싸게됩니다. 내 후크는 다음과 같습니다.

 내보내기 함수 useHeight ({on = true / * 값 없음 on * /} = {} {{} {) {
  const ref = useref<any> ();
  const [높이, set] = usestate (0);
  const heigrtref = useref (높이);
  const [ro] = usestate (
    () =>
      새로운 resizeobserver (packet => {
        if (ref.current && heigrtref.current! == ref.current.offSetheight) {
          heigrtref.current = ref.current.offsetheight;
          set (ref.current.offsetheight);
        }
      })
  );
  uselayouteffect (() => {
    if (on && ref.current) {
      set (ref.current.offsetheight);
      ro.observe (ref.current, {});
    }
    return () => ro.disconnect ();
  }, [on, ref.current]);
  반환 [ref, 높이];
}</any>

우리는 측정 기능의 활성화 및 비활성화를 전환하기 위해 on 값을 제공하도록 선택할 수 있습니다 (나중에 편리하게됩니다). on 있을 때, 우리는 ResizeObserver 내용을 관찰하도록 지시합니다. 우리는 우리가 측정하고자하는 모든 것에 적용 해야하는 심판을 반환합니다.

그것이 실제로 어떻게 작동하는지 봅시다.

 const [heigrtref, height] = useHeight ();
Const SlideInstyles = usepring ({
  구성 : {... config.stiff},
  보낸 사람 : {불투명도 : 0, 높이 : 0},
  에게: {
    불투명도 : 쇼브? 1 : 0,
    높이 : 쇼브? 높이 : 0
  }
});

<animated.div style="{{" ...slideinstyles overflow:>
  <div ref="{heightRef}">
    이 콘텐츠는 사라지고 슬라이딩으로 사라집니다.
  </div>
</animated.div>

useHeight 우리에게 ref의 높이 값을 측정 할 값과 스프링으로 전달하는 내용을 제공합니다. 그런 다음 REF를 적용하고 높이 스타일을 적용합니다.

오, overflow: hidden . 이를 통해 조정 한 높이 값을 올바르게 포함시킬 수 있습니다.

애니메이션 전환

마지막으로, DOM에 애니메이션 아이템을 추가하고 DOM에서 애니메이션 아이템을 제거하는 방법을 살펴 보겠습니다. 우리는 이미 기존 프로젝트를 애니메이션하고 DOM의 항목의 가치 변경을 유지하는 방법을 알고 있지만 항목 추가 또는 제거를 useTransition 하려면 새로운 후크가 필요합니다.

이전에 React-Spring을 사용한 경우 9.x 버전이 API에 중대한 변화가있는 몇 안되는 곳 중 하나입니다. 봅시다.

다음과 같은 프로젝트 목록에 애니메이션을 제공합니다.

 const [list, setList] = usestate ([]);

우리는 변환 기능을 다음과 같이 선언 할 것입니다.

 const listtransitions = usetransition (list, {
  구성 : config.gentle,
  보낸 사람 : {불투명도 : 0, transform : "Translate3d (-25%, 0px, 0px)"},
  입력 : {불투명도 : 1, 변환 : "Translate3d (0%, 0px, 0px)"},
  떠나기 : {불투명도 : 0, 높이 : 0, 변환 : "Translate3d (25%, 0px, 0px)"},
  키 : list.map ((항목, 색인) => 인덱스)
});

앞에서 언급했듯이 리턴 값 listTransitions 기능입니다. React-Spring은 목록 배열을 추적하여 추가 및 삭제 된 항목을 추적합니다. 우리는 listTransitions 함수를 호출하여 단일 스타일 객체와 단일 항목을 수용하는 콜백 함수를 제공하고, React-Spring은 항목이 새로 추가되었는지, 새로 삭제되었는지 또는 목록에 위치한지에 따라 목록의 각 항목에 대해 호출하고 올바른 스타일을 사용합니다.

참고 키 섹션 : 이를 통해 반응 스프링에 목록에서 객체를 인식하는 방법을 알려줍니다. 이 경우, 나는 항목을 고유하게 정의하기 위해 배열의 항목의 색인을 반응 스프링에 알리기로 결정했습니다. 일반적으로 이것은 나쁜 생각이지만 이제는 기능이 실제로 어떻게 작동하는지 확인할 수 있습니다. 다음 데모에서 프로젝트 추가 버튼은 클릭하면 목록 끝에 항목을 추가하고 마지막 프로젝트 삭제 버튼은 목록에서 가장 최근에 추가 된 항목을 제거합니다. 따라서 입력 상자를 입력하고 추가 버튼을 신속하게 클릭 한 다음 삭제 버튼을 클릭하면 동일한 항목이 부드럽게 시작된 다음 즉시 애니메이션의 모든 단계에서 즉시 떠납니다. 대신, 항목을 추가하고 삭제 버튼과 추가 버튼을 빠르게 누르면 동일한 항목이 미끄러지기 시작한 다음 갑자기 제자리에 멈추고 위치로 다시 밀어 넣습니다.

데모

와우, 너무 많이 말했다! 이것은 우리가 방금 다룬 모든 것을 보여주는 런닝 가능한 데모입니다.

[데모 링크]

기타 세부 사항

데모에서 내용을 아래로 밀면… 이 이름은 다음과 같습니다. React-Spring은 Spring Physics를 사용하여 끊임없이 변화하는 값을 보간합니다. 값 변경을 단순히 N 동일 단위로 나누는 다음 N 동일 지연 내에 이러한 증분을 적용하지 않습니다. 대신, 더 복잡한 알고리즘을 사용 하여이 봄과 같은 효과를 생성하여 더 자연스럽게 보입니다.

스프링 알고리즘은 완전히 구성 가능하며 일부 사전 설정은 직접 사용할 수 있습니다. 위의 데모는 stiff 하고 gentle 사전 설정을 사용합니다. 자세한 내용은 문서를 참조하십시오.

또한 3D 값을 translate3d 값을 어떻게 애니메이션하는지 주목하십시오. 보시다시피, 구문은 가장 간결하지 않으므로 React-Spring은 일부 바로 가기를 제공합니다. 이것에 대한 문서가 있지만,이 기사의 나머지 부분에 대해서는 명확성을 위해 전체 비 분리 구문을 계속 사용합니다.

마지막으로, 위의 데모에서 내용을 미끄러지면 끝에서 약간 두드리는 내용을 볼 수 있습니다. 이것은 동일한 바운스 효과 때문입니다. 컨텐츠가 제자리에 튀어 나오면 분명해 보이지만 콘텐츠를 위로 밀어 넣을 때는 그렇지 않습니다. 우리가 그것을 끄는 방법을 계속 지켜봐주십시오. (스포일러, clamp 속성입니다).

이 샌드 박스에 대한 일부 메모

Code Sandbox는 Hot Reload를 사용합니다. 코드를 변경하면 변경 사항이 일반적으로 즉시 반영됩니다. 이것은 시원하지만 애니메이션에 파괴적 일 수 있습니다. 땜질을 시작한 다음 이상하고 표면적으로 부정확 한 동작을 보면 샌드 박스를 새로 고치십시오.

이 기사의 다른 샌드 박스는 양식을 사용합니다. 내가 완전히 알아낼 수없는 이유로, 모달을 켜면 코드를 수정할 수 없습니다. 모달은 초점을 포기하는 것을 거부합니다. 따라서 변경 사항을 시도하기 전에 모달을 끄십시오.

실제 응용 프로그램을 구축하십시오

이들은 React-Spring의 기본 빌딩 블록입니다. 그것들을 사용하여 더 흥미로운 것을 만들어 봅시다. 위의 모든 것을 감안할 때, 당신은 반응 스프링이 사용하기가 매우 쉽다고 생각할 수 있습니다. 불행히도 실제로, 올바르게 처리 해야하는 미묘함을 알아내는 것은 까다로울 수 있습니다. 이러한 세부 사항 중 다수는이 기사의 나머지 부분에서 깊이 살펴볼 것입니다.

이전에 저술 한 것은 어떤 식 으로든 책 목록 프로젝트와 관련이 있습니다. 이 게시물도 예외는 아닙니다. 강박 관념이 아닙니다. 프로젝트가 공개적으로 이용 가능한 GraphQL Endpoint와 악용 될 수있는 많은 기존 코드를 가지고있어 명백한 목표가된다는 것입니다.

모달을 열고 책을 검색 할 수있는 UI를 구축합시다. 결과가 나타나면 모달 아래에 표시된 선택된 책의 실행 목록에 추가 할 수 있습니다. 완료되면 모달을 끄고 버튼을 클릭하여 선택한 책과 비슷한 책을 찾을 수 있습니다.

우리는 완전히 기능적인 UI로 시작한 다음 대화식 데모를 포함하여 섹션에 애니메이션을 점차적으로 추가합니다.

최종 결과가 어떻게 보이는지 알고 싶거나 이미 React-Spring에 익숙하고 아직 모르는 것을 다루는 지 확인하고 싶다면 여기에 있습니다 (디자인 상을 수상하지 않을 것입니다. 이 기사의 나머지 부분은 최종 상태를 단계별로 달성하는 과정을 소개합니다.

우리의 모달에 애니메이션

우리의 양식부터 시작합시다. 데이터 추가를 시작하기 전에 모달을 잘 애니메이션하겠습니다. 이것이 기본적이고 절연 모달의 모습입니다. Ryan Florence의 Reach UI (특히 Modal 구성 요소)를 사용하고 있지만 모달을 구축하는 데 사용하든 아이디어는 동일합니다. 우리는 배경이 사라지고 모달 컨텐츠를 변환하고 싶습니다.

모달은 일부 "열린"속성에 따라 조건부로 렌더링되므로 useTransition 후크를 사용합니다. 나는 Reach UI Modal을 내 자신의 모달 구성 요소로 포장하고 isOpen 속성을 기반으로 빈 컨텐츠 또는 실제 모달을 렌더링했습니다. 후크를 변환하여 애니메이션하면됩니다.

변환 후크의 모습은 다음과 같습니다.

 const modaltransition = usetransition (!! isopen, {
  구성 : Isopen? {... config.stiff} : {duration : 150},
  out : {불투명도 : 0, transform :`translate3d (0px, -10px, 0px)`},
  입력 : {불투명도 : 1, transform :`translate3d (0px, 0px, 0px)`},
  떠나기 : {불투명도 : 0, 변환 :`Translate3d (0px, 10px, 0px)`}
});

여기에는 큰 놀라움이 없습니다. 우리는 모달이 활성인지 아닌지에 따라 희미 해지고 약간의 수직 전환을 제공하기를 원합니다. 이상한 부분은 이것입니다.

 구성 : Isopen? {... config.stiff} : {duration : 150},

모달이 켜져있을 때 스프링 물리학을 사용하고 싶습니다. 이에 대한 이유 - 적어도 내 경험에있어서 - 모달을 끄면 배경이 너무 오래 사라져 기본 UI가 너무 오랫동안 대화식이되기 때문입니다. 따라서 모달이 켜져 있으면 스프링 물리학에 의해 잘 바운다. 그리고 닫히면 150 밀리 초 안에 빠르게 사라질 것이다.

물론, 우리는 후크에 의해 반환 된 변환 함수를 통해 콘텐츠를 제시 할 것입니다. 스타일 객체에서 불투명 스타일을 추출하여 배경에 적용한 다음 모든 애니메이션 스타일을 실제 모달 컨텐츠에 적용합니다.

 반환 modaltransition (
  (스타일, Isopen) =>
    Isopen && (
      <animateddialogoverlay allowpinchzoom="{true}" initialfocusref="{focusRef}" isopen="{isOpen}" ondismiss="{onHide}" style="{{" opacity: styles.opacity>
        <animateddialogcontent style="{{" border: solid hsla borderradius: maxwidth:>
          <div>
            <div>
              <standardmodalheader caption="{headerCaption}" onhide="{onHide}"></standardmodalheader>
              {어린이들}
            </div>
          </div>
        </animateddialogcontent>
      </animateddialogoverlay>
    ))
);

[데모 링크]

길이가 너무 길고 이전 내용으로 반복되므로 나머지 부분은 생략됩니다. 핵심 아이디어는 ResizeObserver 와 결합하여 React-Spring의 useSpring 및 useTransition 후크를 사용하여 페이딩 및 아웃, 높이 변경, 목록 항목의 진입 및 종료를 포함한 다양한 애니메이션 효과를 달성하는 것입니다. 이 기사는 초기 상태, 애니메이션 지속 시간 및 애니메이션 충돌을 피하는 방법과 같은 애니메이션 세부 사항을 다루는 방법에 대해 자세히 설명합니다. 최종 결과는 부드럽고 사용자 경험이있는 대화식 UI입니다.

위 내용은 반응 스프링을 이해합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!