Свойство timeScale для изменения скорости

Свойство timeScale в GSAP является мощным инструментом для управления скоростью анимации без необходимости вручную корректировать все временные параметры. Оно позволяет динамически ускорять, замедлять или полностью останавливать анимацию, сохраняя при этом все остальные её параметры и синхронизацию с другими анимациями.

Основные принципы работы timeScale

timeScale работает как множитель стандартного времени анимации. Его поведение можно описать так:

  • timeScale = 1 — анимация идёт с нормальной скоростью.
  • timeScale > 1 — анимация ускоряется. Например, timeScale = 2 делает анимацию в два раза быстрее.
  • 0 < timeScale < 1 — анимация замедляется. Например, timeScale = 0.5 замедляет её вдвое.
  • timeScale = 0 — анимация останавливается, но не завершается.
  • timeScale < 0 — анимация воспроизводится в обратном направлении.

Это свойство применимо как к отдельным твинам (Tween), так и к целым таймлайнам (Timeline), что делает его чрезвычайно гибким инструментом для комплексной анимации.

Применение к одиночному твину

Для одиночной анимации изменение скорости выглядит следующим образом:

gsap.to(".box", { x: 400, duration: 5 });
let tween = gsap.to(".box", { y: 200, duration: 5 });

// Ускоряем анимацию в 3 раза
tween.timeScale(3);

// Замедляем анимацию в 2 раза
tween.timeScale(0.5);

// Полная пауза
tween.timeScale(0);

В этом примере timeScale позволяет гибко управлять воспроизведением без пересчета duration или других параметров.

Управление таймлайнами

Для сложных последовательностей часто используют Timeline. timeScale применяется ко всему таймлайну:

let tl = gsap.timeline();
tl.to(".box", { x: 300, duration: 2 });
tl.to(".box", { y: 150, duration: 2 });

// Ускоряем весь таймлайн в 1.5 раза
tl.timeScale(1.5);

// Замедляем весь таймлайн вдвое
tl.timeScale(0.5);

Преимущество такого подхода — возможность контролировать все вложенные анимации одновременно, сохраняя их относительные задержки и синхронизацию.

Динамическое изменение скорости во время воспроизведения

GSAP позволяет изменять timeScale на лету, что особенно полезно для интерактивных эффектов или игр:

let tween = gsap.to(".circle", { x: 500, duration: 10 });

// Через 3 секунды ускоряем анимацию
setTimeout(() => {
  tween.timeScale(2);
}, 3000);

// Через 6 секунд замедляем
setTimeout(() => {
  tween.timeScale(0.5);
}, 6000);

В этом случае анимация адаптируется к новым условиям без перезапуска и без потери прогресса.

Интерактивные примеры

timeScale отлично сочетается с событиями пользователя, например, колесиком мыши или кнопками управления:

let tl = gsap.timeline({ repeat: -1 });
tl.to(".slider", { x: 800, duration: 5 });

// Управление скоростью через input range
document.querySelector("#speedControl").addEventListener("input", e => {
  let scale = parseFloat(e.target.value);
  tl.timeScale(scale);
});

Это позволяет создавать плавные и отзывчивые интерфейсы, где анимация подстраивается под действия пользователя.

Комбинирование с другими свойствами времени

timeScale хорошо работает вместе с:

  • delay — задержки остаются пропорциональными текущей скорости.
  • repeat и yoyo — повторения и эффект «обратного хода» сохраняют свою логику при изменении скорости.
  • progress — можно изменять прогресс анимации независимо от timeScale.

Например, комбинация timeScale и динамического progress позволяет создавать эффекты ускорения или замедления в середине анимации без пересчета времени.

Особенности использования

  • Изменение timeScale не влияет на duration, а лишь масштабирует скорость воспроизведения.
  • При timeScale = 0 анимация останавливается, но остаётся активной и может быть продолжена в любой момент.
  • Для таймлайнов изменение timeScale действует рекурсивно на все вложенные твины, что обеспечивает удобное глобальное управление сложной анимацией.

timeScale — это инструмент, который превращает обычные анимации в динамичные и управляемые процессы, давая полный контроль над временем их воспроизведения без изменения исходных параметров.

Оглавление