JavaScript를 사용하여 동적 값을 기반으로 키프레임에 애니메이션 적용

JavaScript 및 CSS 키프레임을 사용하여 SVG 진행률 표시줄 애니메이션

이 솔루션은 프런트 엔드 동적 진행률 표시줄 애니메이션을 위해 바닐라 JavaScript 및 SVG를 사용합니다. 스크립트는 값을 추출하고 백분율을 계산한 후 부드러운 애니메이션을 위해 SVG 요소의 스트로크-대시 오프셋에 적용합니다.

// HTML and SVG structure
<div id="labels"></div>
<svg width="200" height="200">
<circle id="circle" cx="100" cy="100" r="90" />
</svg>
// JavaScript to animate stroke-dashoffset
let labels = document.getElementById("labels");
const SubGoal = 50; // Total subscription goal
function updateProgress(data) {
  const SubCount = parseInt(data.split('/')[0]); // Extract number
  const SubPercent = SubCount / SubGoal; // Calculate percentage
  const SubPercentStroke = 450 - 450 * SubPercent; // Set stroke offset
  document.getElementById('circle').style.strokeDashoffset = SubPercentStroke;
}
// Example usage
fetch('subscribers.txt').then(response => response.text())
.then(data => updateProgress(data));

JavaScript를 사용한 동적 라벨 회전

이 솔루션은 JavaScript를 사용하여 설정된 간격으로 다양한 라벨을 동적으로 회전합니다. 사용자 설정에 따라 정적 디스플레이와 회전 디스플레이를 모두 지원합니다.

// Label rotation logic
var displaySettings = "RotatingDisplays";
var displayRotationSeconds = 2;
var displayRotationIndex = 0;
function rotateLabelDisplay() {
  if (displayRotationIndex >= labels.children.length) {
    displayRotationIndex = 0;
  }
  for (const label of labels.children) {
    label.style.visibility = 'hidden';
  }
  let label = labels.children[displayRotationIndex];
  label.style.visibility = 'visible';
  displayRotationIndex++;
  setTimeout(rotateLabelDisplay, displayRotationSeconds * 1000);
}
// Trigger rotation if display setting is enabled
if (displaySettings === "RotatingDisplays") {
  rotateLabelDisplay();
} else {
  labels.children[0].style.visibility = "visible";
}

JavaScript 및 CSS 애니메이션에 대해 자주 묻는 질문

1. 어떻게 strokeDashoffset SVG 애니메이션에 영향을 미치나요?
2. 그만큼 strokeDashoffset SVG 경로 획이 표시되는 정도를 제어합니다. 값을 변경하면 진행과 같은 부드러운 애니메이션이 가능해집니다.
3. 역할은 무엇입니까? fetch() 실시간 애니메이션에서?
4. fetch() API 또는 파일에서 데이터를 검색하는 데 사용됩니다. 애니메이션에서는 구독자 수와 같은 동적 값을 로드하여 화면에 애니메이션으로 표시할 수 있습니다.
5. 할 수 있다 setTimeout() 애니메이션 간격을 제어하는 ​​데 사용됩니까?
6. 예, setTimeout() 간격으로 레이블을 회전하는 등 애니메이션에 지연을 도입하는 데 사용할 수 있습니다.
7. 목적은 무엇입니까? parseInt() JavaScript 애니메이션 스크립트에서?
8. parseInt() 문자열(예: "42/50")을 동적 애니메이션의 백분율을 계산하는 데 필요한 정수로 변환합니다.
9. 왜 사용해야합니까? requestAnimationFrame() 대신에 setInterval()?
10. requestAnimationFrame() 애니메이션에 최적화되어 브라우저의 다시 그리기 주기와 동기화하여 보다 부드러운 전환을 보장합니다.

동적 키프레임 애니메이션에 대한 최종 생각

결합 자바스크립트 CSS를 사용하면 실시간 데이터에 응답할 수 있는 강력하고 역동적인 애니메이션이 가능합니다. 백분율과 같은 값을 계산하고 이를 키프레임 애니메이션에 적용하는 방법을 이해하면 실시간 진행 상황이나 데이터 업데이트를 반영하는 매력적이고 반응이 빠른 사용자 인터페이스를 만들 수 있습니다.

이 가이드에서 다루는 기술을 사용하면 다음과 같은 속성을 쉽게 조작할 수 있습니다. 획-대시 오프셋 SVG 애니메이션의 경우 요소를 동적으로 회전합니다. 이 조합은 실시간 데이터 입력을 통해 동적 애니메이션을 프로젝트에 통합하려는 개발자에게 확장 가능한 솔루션을 제공합니다.