나는 너처럼 클릭베이트 문장을 싫어하지만, 이것은 그 중의 하나가 아니다.그러니 여기서 지금부터 비결을 털어놓고 10분의 독서 시간을 절약하겠습니다.

Define a handful of CSS animations with @keyframes. Set the element’s initial state (opacity:0, scale(0), etc). Set the element’s animation CSS property to be one of the animations you just defined. Set the animation’s fill-mode to forwards. Don’t always use the good old ease timing function but instead try some cool cubic-bezier. Orchestrate the whole thing via animation-delay. Keep it clean and classy by avoiding wide range movements. Only animate transform and opacity. Always strive for 60fps.

편하게 해, 응?이것은 프레임과 무관합니다. 원소의 animation 가 DOM에 삽입된 후에 터치되거나, 원소의 display 속성이 none 에서 보이기 때문입니다.이것은 모든 프레임워크 공유기의 정상적인 행동이기 때문에 당신이 좋아하는 전단 창고가 무엇이든지 잘 사용할 수 있습니다.
읽어주셔서 감사합니다.
잠깐만, 더 디테일하고 더 많은 고기를 원하나 봐.너무 멋있어, 나도 할 수 있어.따라서 다음 몇 단락에서 상술한 애니메이션을 어떻게 쉽게 실현할 수 있는지 더 상세하게 설명해 드리겠습니다.

기술을 익히다

dat 제목 표시

나는 예시 사이트의 제목을 한 걸음 한 걸음 보여줌으로써 전체 애니메이션 기술이 어떻게 작동하는지 설명할 것이다.먼저 애니메이션을 독립적으로 제작할 세 개의 에이전트를 결정합니다.

우리는 기본적으로 세 명의 스파이가 있는데, 우리는 서로 다른 시간에 폭로하고 싶다.나는 모든 에이전트가 자신의 시간 이동을 표시해야 한다고 파란색으로 표시했다.우리는 탐정 1과 탐정 3이 왼쪽에서 은근히 사라지기를 바란다.프록시 2의 경우 왼쪽에서 오른쪽으로 애니메이션을 확대하는 것은 선이 프록시 1에서 프록시 3으로 흐르는 것과 같은 의미가 있다.핵심 CSS 애니메이션 정의부터 시작하겠습니다.

@keyframes fade-in-right {
  from {
    opacity: 0;
    transform: translateX(-15px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes grow-left {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

fade-in-right에 대해 원소의 초기 상태를 숨기고 왼쪽으로 조금만 이동하는 것으로 정의하면 최종 상태는 원소를 완전히 불투명하게 하고 자연 위치로 되돌려줍니다.봐라, 나의 이동 범위는 15px밖에 없다.장거리 이동을 시종 피하기;모든 비밀은 미세한 동작에 있다.grow-left의 코드는 거의 자명하기 때문에 나는 정말 상세하게 설명할 필요가 없다.여기서 멋있는 점은 다음과 같은 두 개의 CSS 속성 애니메이션만 만들었다는 것이다. transform과opacity.만약 당신이 정말로 고성능, 초당 60 프레임의 애니메이션에 주력한다면, 당신은 why you should avoid animating any other property에 관한 내용을 더 많이 읽고 싶을 것이다.
이제 우리는 애니메이션을 정의해서 에이전트에 적용할 것이다.코드를 보기 전에 세 가지 중요한 것을 기억해야 한다.

기본 CSS 속성

에서 요소의 초기 상태 설정

forwards를 애니메이션의 충전 모드로 사용하여 최종 상태를 유지한다

애니메이션 지연 편성으로 전시

.agent-1, .agent-3 {
  opacity: 0;
  animation: fade-in-right ease 0.4s forwards;
}

.agent-2 {
  transform: scaleX(0);
  transform-origin: left;
  animation: grow-left cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.5s forwards;
  animation-delay: 0.4s;
}

.agent-3 {
  animation-delay: 0.8s;
}

에이전트1과 에이전트3의 초기 상태를 opacity: 0 로 어떻게 정의하는지 보십시오. 에이전트1과 에이전트3의 초기 상태가 덤핑 전환에 들어갈 때까지 숨기기를 원하기 때문입니다.그 다음에 우리는 애니메이션을 이전에 정의한 fade-in-right로 설정하고 좋은 구ease 함수와 forwards 충전 모드를 사용할 것이다.Agent 3이 장면에 들어가기를 원하기 때문에 잠시 후에 animation-delay: 0.8s를 설정했습니다. 이것은 기본적으로 요소가 DOM에 놓여 있거나 display 속성을 통해 볼 수 있게 된 후에 애니메이션이 800밀리초 후에 시작된다는 것을 의미합니다.
지금은 스파이 2의 경우 사정이 좀 다르다.초기 상태가 transform: scaleX(0)로 설정되어 있지 않으면 애니메이션이 시작될 때까지 요소가 완전히 확대됩니다.따라서 초기 세트를 설정하여 애니메이션이 시작되기 전에도 요소가 렌더링되는 방법을 나타낼 수 있습니다.그 다음에 우리는 그것의 transform-origin: left 속성을 설정하여 선을 왼쪽에서 오른쪽으로 확대한다. 그렇지 않으면 기본적으로 그것의 닻점은 중심이 될 것이다.그리고 우리는 설정animation: grow-left을 통해 충전 모드forwards로 설정하고 DOM에서 0.4초 동안 렌더링된 후에만 자신을 표시하여 프록시 1과 프록시 3과 유사한 동작을 수행할 수 있도록 합니다.흥미로운 것은 기본 ease 함수를 애니메이션 타이머 함수로 사용하지 않고 사용자 정의 cubic-bezier 함수를 정의한 것이다.이것은 브라우저의 기본 설정보다 더 재미있고 시각적인 전환을 만들 수 있도록 합니다.계속해서 this fun tool로 자신을 정의해 보세요cubic-bezier.
최종 결과를 살펴보겠습니다.

멋있죠?animation-delay가 지금 얼마나 큰 의미를 가지고 있는지 살펴보자. 탐정1과 탐정3은 모두 같은 제시 동작을 하고 있다.정확한 애니메이션 지속 시간과 애니메이션 지연을 제시하는 것은 시도와 오류를 통해 조정하는 문제이기 때문에 지나치게 강조하지 말고 즐기기만 하면 된다.

이제 시체를 보여주세요.

같은 기술이 한 번 또 한 번 반복될 때 나머지 내용에 대해 애니메이션을 만드는 과정은 정말 무의미하다.

대리인 확정 및 공개 시간

적절한 애니메이션 만들기

초기 상태를 에이전트로 설정

각 에이전트에 애니메이션을 설정하고 적당한 애니메이션 지연을 통해 편성

시도 및 오류를 통한 애니메이션 조정

이익

멋있지만 #성능이 중요하다는 거 알잖아.

네, 성능이 중요합니다. 이것이 바로 우리가 transform와 opacity로 전체 프로그램을 운영하려고 노력하는 이유입니다.이것들은 브라우저 렌더링 과정에서 합성을 터치하는 유일한 속성이기 때문에 계산 작업을 피하고 jank가 없는 체험을 하게 된다.
표시된 애니메이션에서 성능 평가를 실행합니다.

저 초록색 술집 좀 봐.이것은 전체 애니메이션에서 99퍼센트의 시간이 60프레임/초에 달한다는 것을 의미한다.젠장, 초당 60프레임.이것은 정말 더할 나위 없이 좋다.애니메이션 요소가 많을수록 (본고에서 에이전트라고 함) CSS 황금 도구를 사용해도 응용 프로그램 jankier 이 똑같아 보인다는 것을 기억하십시오.애니메이션마다 GPU 작업량이 조금씩 늘어나는 것은 불가피하기 때문이다.그래서 애니메이션 요소의 수를 제한하려고 했지만 시종일관 60 프레임/초에 도달하려고 노력했다.

너무 신기해요.

“I’m really not that creative to come up with fancy animations like these”

뛰어난 애니메이션을 만드는 것은 기술 능력의 문제가 아니라 상당한 디자인 감각과 타고난 구동력으로 좋은 UI 상호작용을 만들어야 한다.이것은 매우 어려울 것이다. 가장 재능이 있는 디자이너만이 이런 장거를 완성할 충분한 창조력을 가질 수 있다.그러나 우리 범인들은 여전히 모방과 진정한 전문가로부터 가능한 한 많은 영감을 얻어 배울 수 있다.이를 위해 Awwwards나Dribbble 같은 사이트를 자주 방문하고 애니메이션을 보여주는 멋진 페이지에서 아이디어를 보는 것을 권장합니다.
나는 정말 네가 이 문장이 애니메이션을 폭로하는 것에 대한 두려움에서 벗어날 수 있기를 바란다.이것은 네가 본 로켓 과학이 아니지만, 만약 잘 한다면, 그것은 틀림없이 너의 응용 프로그램이 오늘 부족한 놀라운 요소를 증가시킬 것이다.그래서 계속해서 당신의 사이트에서 멋진 애니메이션을 만들고 당신의 생각으로 저에게 트위터를 보내주세요!
만약 당신이 이 글에서 어떤 영감을 얻었거나 평론을 남겼다면, 이 마음과 딱정벌레를 두드려서 당신의 사랑을 표현하세요.

파렴치한 플러그

소프트웨어를 제외하고 나는 직업 발전, 프로그래밍 면접과 원격 업무도 쓴다.만약 당신이 나의 내용을 좋아한다면, 나를 따라서, 나의 댓글과 토론에 관심을 가져주세요!