CSS로 간단한 스프라이트 애니메이션 만들기

9688 단어 htmlanimationspritecss
HTML과 CSS만 사용하여 간단한 스프라이트 애니메이션을 만들려면 애니메이션을 적용하려는 스프라이트의 스프라이트 시트로 시작해야 합니다. 온라인에서 무료 또는 유료 스프라이트 시트 리소스를 찾거나 직접 만들 수 있습니다. Piskelapp은 픽셀 아트의 여러 프레임을 만들고 단일 스프라이트 시트로 가져올 수 있는 편리한 웹 사이트입니다.

시연을 위해 Pixelapp을 사용하여 간단한 캐릭터 워킹 애니메이션을 만들고 4x1 프레임으로 가져왔습니다.



이 정적 스프라이트 시트를 이 애니메이션 스프라이트로 바꾸려면 몇 가지 까다로운 CSS 라인만 있으면 됩니다.

HTML



시작하려면 HTML 에 div 가 있는 상용구body가 필요합니다. 우리는 div에 character의 클래스를 부여할 것입니다. 그 div 안에는 img 클래스의 스프라이트 시트character-spritesheet가 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sprite Animation</title>
</head>
<body>
    <div class="character"> 
        <img class="character-spritesheet" src="sample_sprite_sheet_large.png" alt="Character" />       
     </div>
</body>
</html>


이것이 HTML에 필요한 전부입니다!

CSS



애니메이션에 대한 움직임의 환영을 만들기 위해 스프라이트 시트의 각 프레임을 빠르게 연속적으로 순환하면서 한 번에 하나의 프레임만 보이게 해야 합니다.

이를 달성하기 위한 핵심은 .character-spritesheet 를 사용하여 transform: translate 에 키프레임 애니메이션을 생성하는 동시에 overflow: hidden 를 컨테이너 div .character 에 적용하는 것입니다.
transform: translate를 이미지에 적용하면 이미지가 지정된 x 및 y축에서 자체적으로 이동합니다. 이미지가 0의 x 위치에서 시작하여 100% 가로질러 이동하기를 원하므로 다음과 같이 @keyframes를 생성합니다.

@keyframes moveSpritesheet {
 from {
      transform: translate(0px,0)
  }
  to {
      transform: translate(-100%,0)
  }
}


그런 다음 애니메이션을 .character-spritesheet 에 적용하고 이동하려는 속도, 프레임 수, 애니메이션 이동 시간을 설정합니다.

 .character-spritesheet {
   animation: moveSpritesheet 1s steps(4) infinite;
 }


애니메이션을 만드는 마지막 핵심 단계는 컨테이너.characterdiv의 높이와 너비를 애니메이션의 한 프레임 크기(이 경우 '320px')와 일치하도록 설정하고 overflow: hidden를 설정하는 것입니다. . overflow를 hidden로 설정하는 것이 애니메이션 환상의 핵심입니다. div의 너비와 높이를 넘어서는 요소의 일부를 숨기도록 div에 지시합니다. 우리는 .character div 의 크기를 애니메이션의 한 프레임과 동일하게 설정했기 때문에 애니메이션이 발생하면 다른 모든 프레임이 시야에서 숨겨지고 움직임의 환상을 만듭니다!

.character {
  width: 320px;
  height: 320px;
  overflow: hidden;
  position: relative;
}


참조



piskelapp.com - 픽셀 아트 생성 도구
CSS @keyframes
CSS transform: translate
CSS position

동영상
이 과정을 훨씬 더 자세히 설명하는 훌륭한 YouTube 동영상이 있습니다. 순전히 HTML, CSS 및 JavaScript를 사용하는 게임 디자인에 관심이 있다면 시청할 가치가 있습니다.


전체 코드




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sprite Animation</title>
</head>
<body>
    <div class="character"> 
        <img class="character-spritesheet" src="sample_sprite_sheet_large.png" alt="Character" />       
     </div>
     <style>
         .character {
        width: 320px;
        height: 320px;
        overflow: hidden;
        position: relative;
      }

      .character-spritesheet {
        animation: moveSpritesheet 1s steps(4) infinite;
      }

      @keyframes moveSpritesheet {
        from {
            transform: translate(0px,0)
        }
        to {
            transform: translate(-100%,0)
        }
      }
     </style>
</body>
</html>
벨파스트

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage