使用 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() 针对动画进行了优化，通过将动画与浏览器的重绘周期同步来确保更平滑的过渡。

关于动态关键帧动画的最终想法

组合 JavaScript 使用 CSS 可以实现强大的动态动画，可以响应实时数据。通过了解如何计算百分比等值并将其应用于关键帧动画，您可以创建反映实时进度或数据更新的引人入胜且响应迅速的用户界面。

通过本指南中介绍的技术，您可以轻松操作属性，例如 笔画-短划线偏移 用于 SVG 动画并动态旋转元素。这种组合为希望通过实时数据输入将动态动画集成到其项目中的开发人员提供了可扩展的解决方案。