반응 애니메이션: 클릭 전개

뭐 공부 해요?

우리는 카드를 만들 것이다. 당신이 그것을 눌렀을 때, 그것은 팽창할 것이다.이 예는 스크롤할 수 있는 카드 수평 목록 (CSS scroll-snap-type 을 참조하십시오.카드를 클릭하거나 클릭하면 전체 화면으로 확장되어 스크롤을 방지합니다.



세스 플러그
@ 다스 누픽스

⚠️ 여러 사용자 인터페이스 상태 사이에서 프레임 동작을 사용하여 애니메이션을 만드는 방법을 보여 주는 새 강좌를 만들고 있습니다.회사 명
15:2019년 11월 30일 오후 48시
0
0
애니메이션을 전개하는 프레젠테이션 영상을 클릭하세요
당신은 직접play with the demo 또는 탑승look at the repo을 할 수 있습니다.
만약 당신이 영상 강좌를 보고 싶다면, 나는 애니메이션을 추가하고 조정하여 필요한 효과를 얻는 전체 과정을 소개할 것이다.
애니메이션 상태를 확장하기 위해 클릭을 추가하는 전체 과정을 보여 줍니다

웹 애니메이션 힌트

일반적으로 프레임 동작이 있는 애니메이션, 기타 애니메이션 라이브러리를 React 및 JS에 추가할 때 HTML의 구조를 변경해야 할 수 있습니다.때때로 줄 바꿈div를 추가하고 애니메이션을 설정하는 것이 기존 요소보다 쉬울 수도 있습니다.만약 당신이 애니메이션을 만들기 위해 노력하고 있다는 것을 발견한다면, 한 걸음 물러서서 균형을 잡을 수 있는지 확인해 보세요.패키지를 추가하면 HTML 구조가 희석되지만 애니메이션 코드가 더 깨끗해질 수 있습니다.나는 div 요소를 사용하는 것을 더욱 좋아한다. 왜냐하면 그것을 추가하는 것은 코드에서 조작하기 위해서일 뿐 의미가 필요하지 않기 때문이다.

usecycle 연결을 사용하여 애니메이션을 설정하는 방법

Framer Motion은 몇 가지 유용한 React 연결고리를 첨부하여 애니메이션을 확장하기 위해 useCycle 연결고리를 사용하여 효과를 실현할 수 있습니다.이것은 우리가 상태를 계속하고 싶을 때 호출할 수 있는 현재 상태와 함수를 제공합니다.갈고리를 구축하려면 매개 변수 목록을 제공하십시오.우리의 예에서 우리는 두 개의 대상을 사용하여 그 중에서 애니메이션을 설정해야 하는 두 가지 다른 상태를 나타낼 수 있다.

const [animate, toggleFocus] = useCycle(
    { height: "25rem", top: "0rem", overflowX: "auto" },
    { height: "100%", top: "-4.4rem", overflowX: "hidden" }
  );

useCycle 정의
상태는 height: "25rem"부터 시작됩니다. 등등. 우리가 처음 toggleFocus 호출했을 때, 상태는 height: "100%" 등등으로 변경됩니다. 만약 우리가 toggleFocus 함수를 계속 호출한다면, useCycle 이 상태들을 무한 순환할 것입니다.
애니메이션을 만들기 위해 우리는 motion 구성 요소를 사용하고 animate 상태에서 전달한다.모션은 이 문제를 직접 처리하고 변경된 도구 사이에 애니메이션을 설정합니다.애니메이션을 터치하기 위해 onTap 도구를 사용하고 component 함수를 전달합니다.

<motion.div
    onTap={() => toggleFocus()}
    animate={animate}
/>

usecycle 연결 데이터 사용
이 갈고리를 매우 통용하게 하는 것은, 우리는 임의의 수량의 매개 변수를 제공할 수 있으며, 그것들은 어떤 종류든지 제공할 수 있다는 것이다.만약 우리가 여러 상태 사이에서 선형으로 이동해야 한다면, 이 갈고리는 매우 잘 작동한다.만약 우리가 서로 다른 UI 상태 사이를 비선형으로 내비게이션할 수 있다면, 순환 함수도 색인을 받아들인다.우리의 애니메이션에 대해 우리는 단지 두 개의 상태만 필요하지만, 만약 우리가 여러 개의 상태를 제어하고 싶다면 더욱 복잡한 대상을 제공할 수 있다.
이것은 프레젠테이션에 사용된 useCycle 갈고리의 일부분이다.useCycle를 호출할 때 복잡한 대상을 사용하면 화면에 있는 여러 요소의 상태와 애니메이션을 동기화할 수 있습니다.

const [animate, cycleCard] = useCycle(
    {
      card: { padding: "1rem" },
      image: {
        width: "100%",
        marginLeft: "0rem",
        marginRight: "0rem",
        marginTop: "0rem"
      }
    },
    {
      card: { padding: "0rem" },
      image: {
        width: "125%",
        marginLeft: "-3rem",
        marginRight: "-3rem",
        marginTop: "-1rem"
      }
    }
);

여기서 어디로 갑니까?

프레젠테이션에서 우리는 두 가지 다른 상태 사이를 전환하고 확장하고 접는다.코드를 간소화하기 위해 상태를 변체로 이동할 수 있습니다.UI가 필요로 하는 다양한 상태를 명확하게 정의할 수 있는 갈고리cycleCard를 사용해 보는 것을 권장합니다.그것은 쉽게 설정하고 이해할 수 있을 뿐만 아니라 매우 강력한 애니메이션 제어 시스템이기도 하다.

리소스

전체 소스 코드 보기, check out the repo on GitHub

내 것 보기

봐봐 official Framer Motion documentation