해적과 CSS 애니메이션

I wrote this post for my newsletter, sign up here to get emails like these every week.

안녕!

내 course on React Hooks 의 경우 재미있을 수 있도록 많은 애니메이션을 만들어야 합니다.



몇몇 사람들이 그 애니메이션이 어떻게 작동하는지 물었습니다...



CSS를 사용하면 얼마나 쉬운지 놀랄 것입니다.

먼저 구성을 분석해 보겠습니다.

새와 새에 매달린 해적이 있습니다

화면 오른쪽에서 같이 들어갑니다

중간에 도달한 후 새가 해적을 떨어뜨리고 왼쪽에서 화면을 떠납니다

해적이 화면 하단으로 떨어짐

1단계: 캐릭터

<div class="bird"></div>
<div class="pirate"></div>

.bird {
  background-image: url('./bird.png');
}
.pirate {
  background-image: url('./pirate-hanging.png');
}

약간의 적중과 시도를 통해 해적을 정확한 위치에 정확히 배치할 수 있습니다.

.pirate {
  top: 27px;
  margin-left: 49px;
}

낙하 상태의 해적에 대한 또 다른 이미지가 필요합니다. 이미지는 벡터 이미지(SVG)이므로 올바른 자세를 얻기 위해 수정할 수 있습니다. (저는 스케치를 사용했는데 아무 이미지 편집기에서나 하세요)



자, 이제 그래픽이 준비되었으니 안무에 대해 생각해 봅시다.

2단계: 안무

코드를 작성하기 전에 애니메이션의 여러 단계를 적어 두는 것이 좋습니다.

t = 0     1     2     3     4     5         6     7     8     9
    ←---------  enter  --------⇥  ←  pause ⇥  ←----- exit ----⇥

1: 0s - 5s : bird: fly in + pirate: fly in
2: 5s - 6s : pause
3: 6s - 9s : bird: fly out + pirate: fall

날아가는 새부터 시작해 봅시다.

우리는 새가 화면 바깥쪽에서 중앙으로 들어오기를 원합니다. 해적은 이 부분에서 새에 매달려 있기 때문에 동일한 애니메이션을 첨부할 수 있습니다.

이 문서를 개선하는 데 도움을 준 친구에게 인사를 전합니다. 그는 애니메이션position이 모든 키프레임에서 다시 그리기를 생성하고 translation를 사용하는 것이 훨씬 더 효율적이라고 지적했습니다. 트위터를 팔로우해야 합니다. 그는 CSS 마법사입니다.

.bird {
  animation: bird-enter 5s ease-out;
}
.pirate {
  animation: bird-enter 5s ease-out;
}

@keyframes bird-enter {
  from {
    /* right end of the screen */
    transform: translateX(100vw);
  }
  to {
    /* half way */
    transform: translateX(50vw);
  }
}

좋아 보여!

기본적으로 캐릭터는 애니메이션이 끝난 후 기본 위치로 스냅을 재배치합니다. CSS 애니메이션은 첫 번째 키프레임이 재생되기 전이나 마지막 키프레임이 재생된 후에 요소에 영향을 주지 않기 때문입니다.

속성animation-fill-mode을 사용하여 이 동작을 재정의할 수 있습니다.

.bird .pirate {
  animation-fill-mode: forwards;
}

forwards는 요소를 최종 키프레임과 동일한 위치에 유지하도록 합니다.

좋아, 출구에 대해 이야기하자.

요소에는 여러 애니메이션이 적용될 수 있습니다.

.bird {
  /*         ↓ enter animation       ↓ exit animation   */
  animation: bird-enter 5s ease-out, bird-exit 3s ease-in;
}

하지만 이 두 애니메이션은 동시에 시작됩니다. 그것은 좋지 않습니다. 우리는 첫 번째 애니메이션이 끝난 후(들어가기) 얼마 후에 두 번째 애니메이션(나가기)이 시작되기를 원합니다.

이것은 animation-delay 속성이 들어오는 곳입니다. 종료 애니메이션의 지연은 첫 번째 애니메이션의 지속 시간 + 애니메이션 사이에 원하는 일시 중지: 5 + 1 = 6s 여야 합니다.

여러 애니메이션이 있기 때문에 각 애니메이션에 대한 지연을 지정해야 합니다.

.bird {
  /*         ↓ enter animation       ↓ exit animation   */
  animation: bird-enter 5s ease-out, bird-exit 3s ease-in;
  animation-delay: 0s, 6s;
  /* 0s delay for the entry animation, 6s for the exit  */
}

@keyframes bird-exit {
  from {
    transform: translateX(50vw);
  }
  to {
    /* exit outside the frame */
    transform: translateX(-10vw);
  }
}

참고: 위의 코드를 애니메이션 속기로 작성할 수도 있습니다. 여기서 네 번째 인수는 delay: bird-exit 3s ease-in 6s 입니다.

좋아, 이제 해적의 출구에 대해 이야기하자. 타이밍은 새와 같지만 애니메이션이 조금 다릅니다. 우리는 해적이 원래 위치에서 화면 하단으로 떨어지기를 원합니다.

.pirate {
  /*         ↓ enter animation       ↓ exit animation   */
  animation: bird-enter 5s ease-out, fall 3s ease-in;
  animation-delay: 0s, 6s;
  /* 0s delay for the entry animation, 6s for the exit  */
}

@keyframes fall {
  from {
    /* keep it's X position */
    transform: translateX(50vw);
  }
  to {
    /* keep X position, fall to the bottom end of the screen */
    transform: translateX(50vw) translateY(100vw);
  }
}

좋습니다. 좋은 시작이지만 이미지도 변경해야 합니다.

다른 배경 이미지를 갖도록 javascript로 해적 요소에 다른 class를 첨부할 수 있습니다. 그러나 CSS를 통해 이를 달성할 수도 있습니다.

애니메이션의 background-image와 from에 있는 요소에 새로운 to를 제공하면 전체 기간 동안 적용됩니다.

효과를 더 좋게 만들기 위해 해적이 떨어지는 동안 회전시켜 봅시다.

@keyframes fall {
  from {
    /* keep it's X position */
    transform: translateX(50vw);
    background-image: url('./pirate-falling.png') rotate(0deg);
  }
  to {
    /* keep X position, fall to the bottom end of the screen */
    transform: translateX(50vw) translateY(100vw) rotate(90deg);
    background-image: url('./pirate-falling.png');
  }
}

결합된 결과는 다음과 같습니다.



PNG 대신 해적의 SVG 버전을 사용하면 해적의 각 부분에 애니메이션을 적용할 수 있습니다. 다음과 같은 것:

.pirate .hand {
  animation: raise-up 2s ease-in;
}

물론 그럴 필요는 없습니다. 함께 결합된 몇 줄의 CSS 키프레임도 꽤 좋은 결과를 제공했습니다!

실험해보고 싶다면 here's a codepen link 이 애니메이션으로.

여행에 도움이 되었기를 바랍니다

시드