Анимация ключевых кадров на основе динамических значений с помощью JavaScript

Как рассчитать и анимировать значения ключевых кадров с помощью JavaScript

При создании динамических веб-приложений сочетание JavaScript с анимацией CSS позволяет создавать плавные и визуально привлекательные переходы. Одной из распространенных проблем является анимация элементов на основе значений данных в реальном времени. Отличным примером является создание анимации ключевых кадров, отражающей текущий процент индикатора выполнения, с использованием SVG и Stroke-DashOffset.

Этот метод может быть особенно полезен, когда вы отображаете динамические значения, такие как количество подписчиков, как в этом примере, где количество подписок обновляется в реальном времени. Чтобы анимация работала без проблем, мы можем преобразовать это число в проценты и применить его непосредственно к CSS-анимации.

Однако JavaScript может сбивать с толку при работе с анимацией CSS, особенно при вычислении таких значений, как проценты, для эффективного управления ключевыми кадрами. В этом случае понимание того, как извлекать динамические данные и манипулировать ими с помощью JavaScript, имеет решающее значение для обеспечения правильного отображения ваших анимаций.

В этой статье вы узнаете, как использовать JavaScript для разделения числовых данных, расчета процентов и применения их к ключевым кадрам с помощью свойства Stroke-dashoffset. К концу вы получите четкое представление о том, как JavaScript и CSS могут работать вместе для создания адаптивной анимации.

Анимация кругов SVG с помощью JavaScript: пошаговое руководство

В этом примере мы создали динамическую анимацию для круга SVG, используя комбинацию JavaScript и CSS. Основная цель — анимировать ход круга, чтобы визуально представить количество подписок в режиме реального времени. В круге используется смещение штриха-тире Свойство CSS, которое определяет, какая часть обводки круга видна. JavaScript используется для получения и расчета процента прогресса, а затем применения этого значения к обводке, что обеспечивает плавную анимацию на основе данных в реальном времени.

Одним из ключевых компонентов является принести функция, которая извлекает данные из файла или сервера, в данном случае счетчик подписок. Скрипт извлекает числовую часть данных, используя методы манипуляции со строками, такие как расколоть()и преобразует результат в полезное число с помощью синтаксический анализ (). Разделив текущее количество подписок на цель, мы вычисляем прогресс в десятичном виде (в процентах). Этот процент затем применяется к смещение штриха-тире для создания визуального эффекта.

Второй скрипт обрабатывает поворот метки, что добавляет на дисплей слой динамического контента. Метки добавляются в DOM с помощью клонУзел() метод, который дублирует существующий шаблон этикетки. Каждая этикетка поворачивается с заданным интервалом, который контролируется setTimeout() функция. Этот метод запускает вращение после заданной задержки, создавая плавный переход между метками, не требуя вмешательства пользователя.

Сочетание смещение штриха-тире для круга и скрипт вращения меток создает привлекательный пользовательский интерфейс. Динамически изменяя ход выполнения круга и отображаемые метки, мы даем пользователям визуальную индикацию прогресса в режиме реального времени. Модульность кода также гарантирует, что эти функции можно легко адаптировать к другим приложениям, управляемым данными, что делает его гибким решением для разработчиков, желающих реализовать динамические элементы пользовательского интерфейса.

// 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));

// 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

Один из важных аспектов использования JavaScript для управления анимацией — это ее способность взаимодействовать с CSS-переменные. Эти переменные позволяют разработчикам создавать более пригодный для повторного использования и легко поддерживаемый код. Например, вместо жесткого кодирования значений анимации, таких как Stroke-dashoffset, непосредственно в JavaScript, вы можете определить их как переменные CSS и манипулировать ими с помощью JavaScript. Это обеспечивает более простой способ управления свойствами анимации и делает ваш код более модульным и масштабируемым.

Еще одна мощная функция при объединении JavaScript с CSS — это использование прослушивателей событий. Анимация, управляемая событиями, может запускаться в зависимости от действий пользователя, например нажатия кнопки или прокрутки страницы вниз. В нашем примере вы можете улучшить анимацию, добавив интерактивности. Например, offset-dashoffset можно пересчитывать и применять динамически всякий раз, когда пользователь подписывается или выполняет другое действие. Это создает очень увлекательный и интерактивный опыт, который реагирует на данные в реальном времени.

Кроме того, объединение запросАнимацияFrame Использование ключевых кадров — еще один способ создания плавной и эффективной анимации. Этот метод гарантирует, что анимация выполняется во время оптимального цикла перерисовки браузера, обеспечивая лучшую производительность по сравнению с традиционными setInterval или setTimeout. Этот метод особенно полезен при работе с частыми анимациями или тяжелыми процессами JavaScript, которые в противном случае могут замедлить работу пользовательского интерфейса.