CSS 애니메이션으로 그림 시퀀스를 부드럽게 재생하는 방법?

CSS 애니메이션을 사용하여 부드러운 그림 시퀀스 재생을 달성하는 방법은 무엇입니까?

많은 장면에는 시뮬레이션 된 비디오 재생 효과가 필요하지만 자료는 일련의 그림입니다. 이미지 경로를 직접 교체하는 방법은 비효율적이며로드 지연으로 인한 블랙 스크린 또는 혼란이 발생하기 쉽습니다. 이 기사는 이러한 문제를 효과적으로 피하기 위해 CSS 애니메이션을 기반으로 한 솔루션을 제공합니다.

모든 이미지를 사전로드하는 것이 최상의 솔루션이 아닙니다. 특히 이미지 수가 엄청날 때 관리 및 로딩 비용이 너무 높습니다.

더 나은 전략은 사진을 긴 그림으로 연결하는 것입니다. 모든 이미지가 동일한 크기 (예 : 500x300 픽셀)라고 가정하면 세 가지 이미지를 1500x300 픽셀의 긴 이미지로 수평으로 스 플라이싱하십시오. CSS 및 @keyframes 애니메이션의 background-position 속성을 사용하여 이미지 재생을 시뮬레이션하십시오.

다음 CSS 코드 예 :

 .Container {
  너비 : 500px;
  높이 : 300px;
  배경 : URL ( "분할 이미지") LEFT / AUTO 100% NO-Repeat;
  애니메이션 : 애니메이션 지속 시간 단계 (1, 시작) 0S 무한 정상 없음;
}

@keyframes play {
  {배경 위치 : 0 0; } /* 사진 1* /
  33.3% {배경 위치 : -500px 0; } /* 사진 2* /
  66.7% {배경 위치 : -1000px 0; } /* 사진 3* /
  {배경 위치 : 0 0; } /* 첫 번째 사진으로 돌아가서 루프를 재생하십시오* /
}

코드에서 .container 컨테이너를 정의하고 배경 이미지는 스티치의 긴 그림입니다. animation 속성은 애니메이션 play 정의하고 steps(1, start) 정의하면 애니메이션이 단계별로 재생되도록하고 사진 수와 재생 속도에 따라动画时长조정해야합니다. background-position 디스플레이 영역을 제어하고 값을 수정하여 그림을 전환합니다. keyframes 의 백분율은 그림의 숫자와 크기에 따라 조정해야하며 각 그림의 표시 시간이 정확하게 제어됩니다.

이 방법은 하나씩로드하는 것을 피하고 재생 유창성을 향상 시키며 코드를 간단하고 이해하기 쉽게 만듭니다. 전제는 모든 사진이 같은 크기라는 것입니다. 크기가 일치하지 않으면 캔버스 또는 기타 이미지 처리 기술을 사용하여 사전 처리를 수행해야합니다.

위 내용은 CSS 애니메이션으로 그림 시퀀스를 부드럽게 재생하는 방법?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!