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

Як обчислити та анімувати значення ключових кадрів за допомогою JavaScript

Під час створення динамічних веб-додатків поєднання JavaScript з анімацією CSS може створити плавні, візуально привабливі переходи. Однією з поширених проблем є анімація елементів на основі значень даних у реальному часі. Чудовим прикладом є створення анімації ключових кадрів, яка відображає поточний відсоток індикатора виконання за допомогою SVG і stroke-dashoffset.

Ця техніка може бути особливо корисною, коли ви відображаєте динамічні значення, як-от кількість підписок, як у цьому прикладі, де кількість підписок оновлюється в реальному часі. Щоб анімація працювала без проблем, ми можемо перетворити це число у відсотки та застосувати його безпосередньо до CSS-анімації.

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

Ця стаття допоможе вам використовувати JavaScript для видалення числових даних, обчислення відсотків і застосування їх до ключових кадрів за допомогою властивості stroke-dashoffset. Наприкінці ви матимете чітке розуміння того, як JavaScript і CSS можуть працювати разом для створення адаптивної анімації.

Анімація кіл SVG за допомогою JavaScript: покроковий посібник

У цьому прикладі ми створили динамічну анімацію для кола SVG, використовуючи комбінацію JavaScript і CSS. Основна мета — анімувати прогрес кола, щоб візуально відобразити кількість підписок у реальному часі. Коло використовує stroke-dashoffset Властивість CSS, яка контролює, яка частина обведення кола є видимою. JavaScript використовується для отримання та обчислення відсотка прогресу, а потім застосування цього значення до штриха, що забезпечує плавну анімацію на основі даних у реальному часі.

Одним із ключових компонентів є принести функція, яка отримує дані з файлу або сервера, у цьому випадку кількість підписок. Сценарій витягує числову частину даних, використовуючи такі методи обробки рядків, як split()і перетворює результат на придатне число за допомогою parseInt(). Розділивши поточну кількість підписок на ціль, ми обчислюємо прогрес як десяткову частку (відсоток). Потім цей відсоток застосовується до stroke-dashoffset для створення візуального ефекту.

Другий сценарій обробляє обертання міток, що додає до відображення шар динамічного вмісту. Мітки додаються до DOM за допомогою cloneNode() метод, який дублює існуючий шаблон мітки. Кожна мітка обертається із заданим інтервалом, який контролюється setTimeout() функція. Цей метод запускає обертання після визначеної затримки, створюючи плавний перехід між мітками без участі користувача.

Поєднання stroke-dashoffset для кола та сценарію обертання міток створює привабливий інтерфейс користувача. Динамічно змінюючи прогрес кола та мітки, що відображаються, ми даємо користувачам візуальну індикацію прогресу в режимі реального часу. Модульність коду також гарантує, що ці функції можна легко адаптувати до інших програм, керованих даними, що робить його гнучким рішенням для розробників, які хочуть реалізувати динамічні елементи інтерфейсу користувача.

// 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 є використання прослуховувачів подій. Анімація на основі подій може запускатися на основі взаємодії користувача, як-от натискання кнопки або прокручування сторінки вниз. У нашому прикладі ви можете покращити анімацію, додавши інтерактивність. Наприклад, stroke-dashoffset можна перерахувати та динамічно застосовувати щоразу, коли користувач підписується або виконує іншу дію. Це створює дуже привабливий та інтерактивний досвід, який реагує на дані в реальному часі.

Додатково комбінування requestAnimationFrame за допомогою ключових кадрів — ще один спосіб створення плавної та ефективної анімації. Цей метод гарантує, що анімація виконується під час оптимального циклу перемальовування браузера, забезпечуючи кращу продуктивність порівняно з традиційними методами setInterval або setTimeout. Ця техніка особливо корисна під час частої анімації або інтенсивних процесів JavaScript, які інакше можуть уповільнити інтерфейс користувача.