Интерполяция строк

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

Основные принципы

Anime.js интерполирует строки, анализируя их на наличие числовых сегментов. Любое число в строке распознается и анимируется от начального значения к конечному. Статические части строки остаются неизменными.

anime({
  targets: { value: '100px' },
  value: '200px',
  round: 1,
  easing: 'linear',
  duration: 1000,
  update: function(anim) {
    console.log(anim.animatables[0].target.value);
  }
});

В этом примере число 100 плавно меняется на 200, а текст px остаётся неизменным. Опция round используется для округления значения до целых чисел.

Поддержка различных форматов

1. Пиксели и проценты

Любые строки с единицами измерения (px, %, em, rem) могут анимироваться. Библиотека автоматически сохраняет единицы при интерполяции числовых значений.

anime({
  targets: '.box',
  width: '300px',
  height: '50%',
  duration: 1500,
  easing: 'easeInOutQuad'
});

2. Цвета

Строки с цветами в формате #HEX, rgb() или hsl() также анимируются. Преобразование цвета в промежуточные значения выполняется автоматически.

anime({
  targets: '.circle',
  backgroundColor: '#ff0000',
  color: 'rgb(0, 255, 0)',
  duration: 2000
});

Библиотека корректно интерполирует каждый компонент цвета (красный, зелёный, синий), создавая плавный переход.

3. Произвольные строки с числами

Строки, содержащие текст и числа одновременно, можно использовать для анимации любых CSS-свойств.

anime({
  targets: '.text',
  translateX: '50px',
  innerHTML: 'Items: 0',
  round: 1,
  duration: 2000,
  easing: 'easeOutCubic',
  update: function(anim) {
    anim.animatables.forEach(item => {
      item.target.innerHTML = `Items: ${item.target.innerHTML}`;
    });
  }
});

В этом примере число внутри строки Items: 0 анимируется, а текстовая часть остаётся неизменной. Это полезно для анимации счетчиков или динамических лейблов.

Настройка интерполяции

1. Опция round

Позволяет округлять числовые значения в строках:

  • true — округление до целого числа.
  • 1, 0.1, 0.01 — задает точность округления.

2. Объекты с несколькими свойствами

Строки можно комбинировать с другими свойствами объекта:

anime({
  targets: '.box',
  translateX: ['0px', '300px'],
  translateY: ['0px', '200px'],
  rotate: '45deg',
  duration: 1500
});

Anime.js интерполирует каждый числовой сегмент отдельно и независимо, сохраняя правильный формат единиц измерения.

Ограничения

  • Интерполяция работает только с числами внутри строки. Любые текстовые символы, не содержащие цифр, остаются статичными.
  • Для сложных текстовых анимаций с разными числами и форматами рекомендуется использовать несколько отдельных анимаций или функции обратного вызова update.
  • Цвета должны быть валидными CSS-значениями. Некорректные форматы могут привести к ошибкам.

Использование функций для динамических строк

Для сложных случаев значение свойства может быть функцией, возвращающей строку. Это позволяет динамически вычислять конечное состояние:

anime({
  targets: '.bar',
  width: function(el, i) {
    return `${50 + i * 20}px`;
  },
  duration: 1000,
  easing: 'easeInOutQuad'
});

Функции дают полный контроль над интерполяцией строк, создавая уникальные анимации для каждого элемента.

Практические примеры

Анимация счетчика

anime({
  targets: { score: 0 },
  score: 100,
  round: 1,
  duration: 3000,
  easing: 'linear',
  update: function(anim) {
    document.querySelector('#score').textContent = anim.animatables[0].target.score;
  }
});

Анимация сложного CSS-свойства

anime({
  targets: '.gradient',
  background: ['linear-gradient(0deg, red, yellow)', 'linear-gradient(180deg, blue, green)'],
  duration: 2500,
  easing: 'easeInOutSine'
});

Интерполяция строк в anime.js — мощный инструмент, позволяющий создавать динамичные и гибкие анимации текста, цветов и любых CSS-свойств, где число встроено в строку. Правильное использование функций, округления и массивов значений позволяет реализовать сложные визуальные эффекты с минимальным количеством кода.

Оглавление