CSS 애니메이션 상태 및 재생 시간을 해킹합니다

이 기사는 CSS 애니메이션을 감독하는 데 도움이됩니다. JavaScript 사용. 저자는 CSS 전용 Wolfenstein 3D에서 영감을 얻은 게임을 구축 한 경험에 대해 이야기하며, 특히 두 가지 까다로운 애니메이션 문제를 강조합니다. 적의 클릭으로 무기 발사 애니메이션을 트리거하고 보스의 최종 히트를 위해 극적인 슬로우 모션을 구현합니다.

핵심 문제는 브라우저의 애니메이션 상태를 처리합니다. 애니메이션 속성을 이미 추가하거나 수정하는 동안 애니메이션 속성을 이미 추가하거나 수정하는 것은 항상 예상대로 다시 시작하거나 속도를 늦추지 않습니다.

문제 1 : 애니메이션 재생

저자는 애니메이션 재생에 대한 여러 접근법을 탐색합니다.

애니메이션 복제 : 각 방아쇠 작업에 대해 별개의 애니메이션 이름 ( spin1 , spin2 ) 생성 (

가 필요합니다. 속성은 또한 기능하지만 애니메이션-필드 모드 : Forwards . 새로운 것을 추가해야합니다.

문제 2 : 슬로우 모션

단순히 애니메이션 기간 를 변경하면 애니메이션이 실행되는 동안 Jarring 점프가 발생합니다. 브라우저는 현재 상태가 아닌 애니메이션의 시작부터 새로운 지속 시간을 적용합니다.

몇 가지 접근 방식이 탐색됩니다 :

• Direct 애니메이션 변경 (비효율적) : 애니메이션 시간 중간 애니메이션 원인. 애니메이션 :

원래 애니메이션을 일시 중지하고 동일한 출발점을 가진 느린 애니메이션을 추가하면 예측할 수없는 일시 정지 지점으로 인해 여전히 점프가 계속됩니다.

사용자 정의 속성 사용 : 보다 정교한 방법은 사용자 정의 특성 (-<code2>)을 사용하여 애니메이션의 트래픽을 추적합니다. 기간. 그러나 <code> @property 에 대한 브라우저 지원이 필요합니다.

"기어 변속"기술 : 이 영리한 기술은 각각 애니메이션과 함께 중첩 된 div를 사용하여 애니메이션 속도 사이를 전환합니다.

JavaScript 솔루션 : JavaScript는 애니메이션 진행 상황을 처리하고 다양한 애니메이션 속도를 완벽하게 전환하는 데 더 강력한 솔루션을 제공하여 복잡한 애니메이션에 대한 유연성을 제공합니다. CSS 애니메이션 조작과 관련된 솔루션. 저자는 독자들이 제공된 예를 탐색하고 그들의 생각을 공유하도록 권장합니다.

위 내용은 CSS 애니메이션 상태 및 재생 시간을 해킹합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!