손으로 구분 된 CSS로 좀비를 재창조 한 60 일부터 배운 교훈

60 일의 순수한 CSS 좀비 애니메이션에서 배운 10 개의 수업

경고 : 고 에너지 경고 앞서, 많은 좀비와 스푸핑 콘텐츠가오고 있습니다! 이 기사는 몇 가지 실용적인 팁을 공유하지만 그 예는 거의 모두 좀비 및 재미있는 농담과 관련이 있습니다. 정신적으로 준비하십시오.

토론에서 개별 애니메이션 작품에 연결하겠습니다. 그러나 전체 프로젝트를 알고 싶다면 언데드 연구소를 방문하여 60 일 애니메이션 시리즈를보십시오. 이 프로젝트는 2020 년 6 월 1 일에 시작하여 8 월 1 일에 끝났는데, 이는 CSS 애니메이션, 유머 및 좀비에 대해 쓴 책의 출판 날짜와 일치하는 8 월 1 일에 끝났습니다. 좀비가 웹 기술을 사용하지 않고 세상을 멈출 것이라는 점은 분명하기 때문입니다. 다이나믹 HTML 요소보다 좀비를 더 잘 때릴 수있는 것은 없습니다!

나는 프로젝트 전체에서 나 자신을 위해 몇 가지 규칙을 만들었습니다.

1. 모든 CSS 코드는 수동으로 작성해야합니다. (나는 단지 마조히스트입니다.)
2. 모든 애니메이션은 사용자가 트리거됩니다. (나는 반쯤에있는 애니메이션을 싫어합니다.)
3. JavaScript를 최대한 적게 사용하고 애니메이션에 사용 하지 마십시오 . (나는 최종 애니메이션에서 한 번만 JavaScript를 사용했는데, 그것은 오디오를 시작하는 것이 었습니다. 나는 JavaScript에 반대하는 것이 아니라 단지 여기서 필요하지 않습니다.)

1 : 80 일이 너무 깁니다.

제목이“60 일”이라고 말하지 않습니까? 그렇습니다. 그러나 나의 초기 목표는 80 일이었고, 첫날이 도착했을 때, 나는 20 미만의 애니메이션이 준비되었고, 각 애니메이션의 평균 제작 시간은 3 일이었고, 나는 당황하여 60 일로 바뀌었다. 이것은 20 일의 준비 시간을 더 많이 주었고 20 개의 애니메이션 작업을 줄였습니다.

레슨 1A : 60 일은 아직 너무 깁니다.

제한된 시간, 창의성 및 더 제한된 예술 기술로 많은 애니메이션을 달성하는 것은 실제로 도전입니다. 30 일로 단축 될 생각을했지만 그렇게하지 않아서 기쁩니다. 60 일 동안 나는 나 자신을 돌파하고 CSS 애니메이션과 CSS 자체가 어떻게 작동하는지에 대한 더 깊은 이해를 얻을 수있었습니다. 또한 기술이 향상 되었기 때문에 나중에 완료 한 많은 작품을 자랑스럽게 생각합니다. 더 혁신적이어야하고 작업을 더 흥미롭게 만드는 방법에 대해 더 깊이 생각해야합니다. 모든 간단한 옵션이 부족하면 실제 작업 및 최상의 결과가 시작됩니다. (예, 6 월 1 일에 시작하여 8 월 1 일에 최종 애니메이션을 마치고 싶었 기 때문에 62 일이됩니다. 6 월 3 일부터 어색합니다.)

그래서, 진정한 레슨 1 : 스스로에게 도전하십시오 .

레슨 2 : 대화식 애니메이션은 제작하기가 어렵고 반응 형 디자인은 더욱 어렵습니다.

요소가 화면을 가로 질러 비행하고 다른 요소와 연결되거나 다른 요소의 움직임을 시작하는 것처럼 보이려면 모든 표준, 융통성 불가능한 장치 또는 모든 유연한 장치를 사용해야합니다.

세 가지 변수는 애니메이션 프로세스 중에 애니메이션 요소의 시간과 위치, 즉 지속 시간, 속도 및 거리를 결정합니다. 애니메이션 기간은 animation 속성에 설정되어 있으며 화면 크기에 따라 변경할 수 없습니다. 애니메이션 시간 기능은 속도를 결정합니다. 화면 크기는 이것을 변경할 수 없습니다. 따라서 거리가 화면 크기에 따라 변하면 특정 화면 너비 및 높이를 제외한 타이밍 편차가 발생합니다.

탱크를 확인하십시오! 넓고 좁은 화면에서 애니메이션을 실행하십시오. 비교하면 매우 가깝게 예약했지만 마지막 좀비가 떨어지면 좀비와 관련된 탱크의 위치가 다르다는 것을 알 수 있습니다.

이러한 시간 문제를 피하기 위해 고정 장치 및 2000 또는 5000 픽셀 이상과 같은 더 많은 숫자를 사용할 수 있으므로 애니메이션이 최대 디스플레이를 제외한 모든 디스플레이의 너비 (또는 높이)를 커버 할 수 있습니다.

레슨 3 : 반응 형 애니메이션을 원한다면 모든 것을 (중 하나) 뷰포트 장치에 넣으십시오.

단위 비율 (예 : 픽셀의 폭과 높이 설정이지만 뷰포트 장치의 위치 및 이동을 설정)에 대한 타협 솔루션을 취하면 예측할 수없는 결과가 발생할 수 있습니다. 또한 vw 와 vh 동시에 사용하지 말고 그 중 하나를 사용하십시오. 이것이 주요 방향입니다. vh 와 vw 유닛이 혼합되어 애니메이션이 "이상한"것으로 만들 것입니다. 저는 전문적인 용어라고 생각합니다.

예를 들어, 매우 Zomborrific을 살펴보십시오. 픽셀, vw 및 vh 장치의 혼합을 사용합니다. 전제는 슈퍼 좀비가 위쪽으로 날아가고 "카메라"가 뒤 따른다는 것입니다. 슈퍼 좀비는 카메라가 계속 움직이는 동안 난간에 부딪히고 떨어지지 만 화면이 충분히 높으면 이해하지 못할 것입니다.

이것은 또한 당신이 정상에서 갈 무언가가 필요하다면 - 내가 여기서 우리 인간 이외의 사람과 마찬가지로 닌자 좀비가 대부분의 종횡비에서 보이지 않도록 vw 높이를 충분히 높게 설정해야한다는 것을 의미합니다.

레슨 3A : SVG 요소 내부의 움직임에 픽셀 장치를 사용하십시오.

즉, SVG 요소 내에서 요소를 변환하는 것은 뷰포트 장치를 사용해서는 안됩니다. SVG 태그는 그들 자신의 비례 우주입니다. SVG "픽셀"은 SVG 요소 내의 다른 모든 SVG 요소의 비율을 유지 하지만 뷰포트 장치는 그렇지 않습니다. 따라서 변환을 위해 SVG 요소 내에 픽셀 장치를 사용하지만 다른 곳에서는 뷰포트 장치를 사용하십시오.

레슨 4 : SVG는 런타임에서 제대로 확장되지 않습니다.

oops…와 같은 애니메이션의 경우, 좀비의 SVG 이미지를 원본의 5 배로 확대했지만 이로 인해 가장자리가 흐려졌습니다. [ "확장 가능한"벡터 그래픽에 파도가 주먹. ]]

 /* 가장자리가 흐려지는 원래 코드*/
.Zombie {
 변환 : 스케일 (1);
 너비 : 15VW;
}

.Toggle-Checkbox : 확인 ~ .Zombie {
 애니메이션 : 5S Ease-in-out 0s ReverseshRinkyDink Forward;
}

@keyframes ReverseshRinkyDink {
 0% {
  변환 : 스케일 (1);
 }
 100% {
  변환 : 스케일 (5);
 }
}

나는 애니메이션 끝에서 적용되는 최종 크기로 크기를 설정 한 다음 줌 변환을 사용하여 애니메이션 시작시 크기로 줄입니다.

 /* 수정 된 코드*/
.Zombie {
 변환 : 스케일 (0.2);
 너비 : 75VW;
}

.Toggle-Checkbox : 확인 ~ .Zombie {
 애니메이션 : 5S Ease-in-out 0s ReverseshRinkyDink Forward;
}

@keyframes ReverseshRinkyDink {
 0% {
  변환 : 스케일 (0.2);
 }
 100% {
  변환 : 스케일 (1);
 }
}

요컨대, 수정 된 코드는 감소 된 버전의 이미지에서 전체 너비 및 높이로 이동합니다. 브라우저는 항상 1로 렌더링되므로 가장자리는 1의 스케일로 선명하고 날카 롭습니다. 따라서 1에서 5로 스케일링하는 대신 0.2에서 1에서 1로 확장되었습니다.

교훈 5 : 축은 보편적 인 진실이 아닙니다.

요소의 축은 페이지가 아닌 자체와 동기화됩니다. translateX 전에 90도 회전을 수행하면 translateX 의 방향이 수평에서 수직으로 변경됩니다. 우리 인간 외에는 아무도 없습니다… 2, 나는 180도 회전을 사용하여 좀비를 뒤집었다. 그러나 긍정적 인 y 값은 닌자를 상단으로 옮기고 음수 값은 (정상과 반대로) 하단으로 이동합니다. 회전이 후속 변환에 어떤 영향을 미치는지 주목하십시오.

레슨 6. 복잡한 애니메이션을 동심 요소로 분해하여 쉽게 조정하십시오.

여러 방향으로 이동하는 복잡한 애니메이션을 만들 때 마무리 div 또는 상위 요소를 추가하고 각 요소를 개별적으로 애니메이션하면 변환 충돌이 줄어들고 충돌을 방지 할 수 있습니다.

예를 들어, 우주 생도에는 세 가지 다른 변환이 있습니다. 첫 번째는 우주 비행사와 좀비의 위아래 운동입니다. 두 번째는 수평 운동입니다. 세 번째는 회전입니다. 한 번의 변형으로 모든 것을 시도하는 대신 두 개의 랩핑 요소를 추가하고 각 요소에 애니메이션을 만들었습니다 (또한 머리카락을 저장했습니다 ... 적어도 일부는 그 부분). 이것은 가장 안쪽 요소에서 회전하여 부모와 조부모의 축을 유지하기 때문에 이전 수업에서 논의 된 축 문제를 피하는 데 도움이됩니다.

레슨 7 : SVG 및 CSS 변환은 동일합니다.

일부 경로, 그룹 및 기타 SVG 요소는 이미 이에 대한 변환을 정의했습니다. 이는 최적화 알고리즘으로 인해 발생하거나 그림이 코드를 생성하는 방식 일 수도 있습니다. SVG의 경로, 그룹 또는 기타 요소에 이미 SVG 변환이있는 경우, 변환이 요소를 재설정하는 경우, 일반적으로 다른 도면과 비교하여 위치 또는 크기의 단수 변화가 있습니다.

SVG 및 CSS 변환이 동일하므로 SVG 변환을 대체하는 CSS 변환이므로 CSS 변환이 SVG의 위치 또는 크기가 아닌 단수 위치 또는 크기에서 시작됩니다.

변환을 SVG 요소에서 CSS로 복사하여 CSS의 시작 위치로 설정할 수 있습니다 (먼저 CSS 구문으로 업데이트). 그런 다음 CSS 애니메이션에서 수정할 수 있습니다.

예를 들어, 내 사무실 작업자 공물 작품에서 Uhhh, 그렇습니다…

<path d="M0 171h9v9H0z" fill="#91c1a3" fill-rule="nonzero" transform="translate(0 -343) scale(4 3.55)"></path>

다음과 같이 변환을 CSS로 이동하십시오.

<path d="M0 171h9v9H0z" fill="#91c1a3" fill-rule="nonzero"></path>

 #arm2 {
 변환 : 번역 (0, -343px) 척도 (4, 3.55);
}

... 그런 다음 우연히 위치와 스케일을 재설정하지 않는 애니메이션을 만들 수 있습니다.

 .Toggle-Checkbox : 확인 ~ .z #arm2 { 
 애니메이션 : 6S Ease-In-At-in-out 0.15S ARM2Vove Forwards;
}

@keyframes arm2move {
 0%, 100% {
  변환 : 번역 (0, -343px) 척도 (4, 3.55);
 }
 40%, 60% {
  변환 : 번역 (0, -403px) 척도 (4, 3.55);
 }
 50% {
  변환 : 번역 (0, -408px) 스케일 (4, 3.55);
 }
}

이 프로세스는 SVG 코드를 생성하는 도구가 매트릭스로 변환을 "단순화"하려고 시도 할 때 훨씬 어렵습니다. 매트릭스 변환을 CSS에 복사하여 매트릭스 변환을 재현 할 수 있지만 원하는 방식으로 정확히 스케일링, 회전 또는 패닝하는 것은 어려운 작업입니다.

또는 번역, 회전 및 스케일링을 사용하여 매트릭스 변환을 재현 할 수 있지만 경로가 복잡한 경우 자신을 곤경에 빠지지 않고 시간이 지남에 따라 재현 할 수있는 가능성은 낮습니다.

마지막으로 가장 쉬운 옵션은 그룹을 사용하는 것입니다. ) 태그 랩핑 요소. CSS에 쉽게 액세스 할 수 있도록 클래스 나 ID를 추가하고 그룹 자체를 변환하여 이전 수업에서 논의 된 바와 같이 변환을 분리하십시오.

레슨 8 : SVG의 일부를 변환 할 때 제정신을 유지하십시오.

CSS transform-origin 속성은 변환이 발생하는 지점을 이동합니다. Clubbin 'It에서했던 것처럼 팔을 돌리려고한다면 - 어깨 중앙에서 팔을 돌리면 애니메이션이 더 자연스럽게 보이지만 그 경로의 자연스러운 변형 원점은 왼쪽 상단에 있습니다. transform-origin 사용하여 더 매끄럽고 자연스러운 느낌을 위해 이것을 고치십시오… 당신은 매우 자연스러운 픽셀 아트 모습을 알고 있습니다…

축소 할 때는 콧수염 흡사에서했던 것처럼 원점을 변형시키는 것이 유용하거나 맛있는 공룡의 턱처럼 입 운동을 회전 할 때 유용합니다. 원점을 변경하지 않으면 변환은 SVG 요소의 왼쪽 상단에있는 원점을 사용합니다.

레슨 9 : 스프라이트 애니메이션은 반응 할 수 있습니다

나는이 프로젝트를 위해 많은 스프라이트 애니메이션을 만들었습니다 (즉, 여러 증분 프레임을 사용하여 캐릭터를 빠르게 전환하여 캐릭터가 움직입니다). 넓은 파일로 이미지를 만들어 단일 프레임 크기의 요소에 배경 이미지로 추가하고 배경 이미지를 background-size 사용하여 이미지 너비로 설정하고 오버플로를 숨 깁니다. 그런 다음 background-position 및 애니메이션 시간 기능 step() 사용하여 이미지를 반복합니다. 예를 들면 다음과 같습니다. 포스트 아포 칼립스 축하.

프로젝트 전에 융통성없는 이미지를 사용하고 있습니다. 나는 적어도 약간의 반응 형 효과가 있도록 약간의 규모를 낮추 겠지만, 당신이 그것을 완전히 유연한 너비로 만들 수 있다고 생각하지 않습니다. 그러나 SVG를 배경 이미지로 사용하는 경우 뷰포트 장치를 사용하여 화면 크기가 변경 될 때 요소를 확장 할 수 있습니다. 유일한 문제는 배경 위치입니다. 그러나이를 위해 뷰포트 장치를 사용하면 동기화됩니다. 마침내 내 샌드위치로 혼자서 이것을 확인하십시오….

레슨 9A : 반응 형 스프라이트 애니메이션을 만들 때 뷰포트 장치를 사용하여 이미지의 배경 크기를 설정

이 프로젝트에서 배운 것처럼 단일 유형의 장치를 사용하는 것은 거의 항상 가능합니다. 처음에는 스프라이트의 배경 크기를 설정하기 위해 백분율을 사용했습니다. 계산은 간단하며 (100% * (1 단계)) 대부분의 경우 잘 작동합니다. 그러나 더 긴 애니메이션에서는 정확한 프레임 추적이 잘못 될 수 있으며 잘못된 스프라이트 프레임의 일부를 표시 할 수 있습니다. 더 많은 프레임이 스프라이트에 추가되면 문제가 악화 될 것입니다.

이것이 왜 문제가 발생하는지 정확히 잘 모르겠지만 스프라이트 테이블 길이에 반올림 오류가 축적 되었기 때문이라고 생각합니다 (프레임 수가 증가함에 따라 변위량이 증가 함).

마지막 애니메이션에서 좀비가 노래를 부르기 전까지는 끝나지 않았습니다. 공룡이 입을 열어 좀비 바이킹 노래를 드러 냈습니다 (백그라운드에서 레이저가 발사되고 물론 춤, 아코디언 연주 및 좀비가 대포에서 발사되었습니다). 예, 파티를 주최하는 방법을 알고 있습니다. 괴짜 파티.

공룡과 바이킹은 프로젝트를 위해 만든 가장 긴 엘프 애니메이션 중 하나입니다. 그러나 백분율을 사용하여 백그라운드 크기를 설정하면 사파리 오류로 일부 크기의 추적을합니다. 애니메이션의 끝에서, 다른 프레임의 공룡 코의 일부가 오른쪽에 나타나는 반면, 코의 비슷한 부분은 왼쪽에 누락됩니다.

Chrome에서 잘 작동하는 것처럼 보이기 때문에 진단하기가 매우 어렵고 Safari에서 고정하고 약간 다른 화면 크기를보고 프레임 편차가 다시 보입니다. 그러나 일관된 단위를 사용하는 경우, 즉 background-size , 프레임 너비 및 background-position 의 경우 vw 모든 것이 잘 작동합니다. 다시 말하지만, 이것은 일관된 장치를 사용하는 것입니다!

레슨 10 : 사람들이 프로젝트에 참여하도록 초대하십시오.

나는 그 과정에서 많은 것을 배웠지 만, 나는 대부분의 시간을 벽에 부딪히는 데 보냈다 (종종 벽이 부러 지거나 머리가 부러 질 때까지… 차이를 말할 수 없다). 이것은 방법이지만, 완고한 경우에도 두통을 겪게됩니다. 조언을 구하거나, 놓친 분명한 사각 지대를 지적하거나, 피드백 제공, 프로젝트에 도움을 주거나, 범위가 너무 크다고 느낄 때 계속 진행하도록 격려하십시오.

이 교훈을 실제로 실천하겠습니다. 당신의 생각은 무엇입니까? CSS 애니메이션으로 좀비를 어떻게 차단 하시겠습니까? 자신에게 도전하기에는 너무 큰 프로젝트를 수행 하시겠습니까?

위 내용은 손으로 구분 된 CSS로 좀비를 재창조 한 60 일부터 배운 교훈의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!