Демонстрация анимаций

В моем предыдущем посте Time Uniform For CSS Animation я рассказал о способе создания CSS-анимации с использованием тиков вместо ключевых кадров. Он был ограничен в применении, поскольку в CSS отсутствовала возможность выполнять сложные математические вычисления.

После долгих лет ожидания в CSS теперь поддерживается достаточное количество математических функций, в частности, mod(), round() и тригонометрические функции. Пришло время вернуться к анимации, основанной на времени, надеюсь, на этот раз она будет более полезной.

Основная идея

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

@property --t {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true
}
@keyframes tick {
  from { --t: 0 }
  to   { --t: 86400000 }
}
:root {
  animation: tick 86400000ms linear infinite
}

За каждую миллисекунду переменная --t увеличивается на 1, что составляет 1000 за одну секунду. Есть хитрость в том, чтобы задать переменную с помощью функции counter().

Другие значения, основанные на --t, будут меняться вместе с ним. Так мы получаем эффект анимации.

div {
  /* 1 оборот в секунду */
  rotate: calc(var(--t) * .001turn);
}

Управление частотой кадров

Для плавной анимации достаточно поддерживать частоту обновления на уровне 60 кадров в секунду (FPS). Браузеры часто оптимизируют рендеринг, поэтому не будет никаких проблем, если частота будет выше 60 FPS. Но при необходимости можно вручную регулировать частоту кадров с помощью функции step().

:root {
  animation: tick;
  animation-duration: 86400000ms;
  animation-iteration-count: infinite;

  /* 8 fps */
  animation-timing-function: step(calc(86400000/(1000/8)));

  /* 24 fps */
  animation-timing-function: step(calc(86400000/(1000/24)));

  /* 60 fps */
  animation-timing-function: step(calc(86400000/(1000/60)));
}

Время преобразования

Значение параметра --t постоянно увеличивается в одном направлении. Это нормально для angle, значения, которого, превышает 360deg, однако не все свойства CSS обрабатывают свои значения как циклические.

Допустим, я хочу анимировать движение квадрата слева направо, если смещение translate связано с --t, оно будет постоянно увеличиваться без остановки.

translate: calc(var(--t) * .001px);

min()

Ожидаемый результат - когда смещение достигает определенного значения, оно немедленно останавливается. Именно так может быть полезна функция min().

translate: min(270px, calc(var(--t) * .5px));

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

/* 270px за 3 секунды */
translate: calc(min(3000, var(--t)) * (270px / 3000));

mod()

После того как квадрат переместился вправо, можно запустить смещение с самого начала. Теперь у нас есть функция mod() для достижения этой цели.

translate: calc(mod(var(--t)/4, 270) * 1px);

sin()

Или совершать движения взад-вперед.

translate: calc(sin(mod(var(--t)/135, 270)) * 135px);

Пользовательская функция упрощения

Мы можем создавать пользовательские функции упрощения, используя математические функции и переменную --t, что может быть недостижимо с помощью cubic-bezier().

ease-out-cubic

На начальном этапе необходимо привязать значение --t между 0 и 1.

/* от 0 к 1 за 1 секунду */
--t01: calc(min(1000, var(--t)) / 1000);

/* 1 - pow(1 - t, 3) */
--ease-out-cubic: calc(
  1 - pow(1 - var(--t01), 3)
);

translate: calc(var(--ease-out-cubic) * 270px);

ease-out-elastic

/* от 0 к 1 за 1 секунду */
--t01: calc(min(1000, var(--t)) / 1000);

/* pow(2, -10t) * sin((10t - .75) * 2/3 * PI) + 1 */
--ease-out-elastic: calc(
  pow(2, -10 * var(--t01)) *
  sin((var(--t01) * 10 - .75) * 2/3 * PI) + 1
);

translate: calc(var(--ease-out-elastic) * 270px);

Эксперименты с CSS Doodle

По мере усложнения выражений var() и calc() делают код менее читабельным. Поэтому я добавил функцию @t для представления переменной --t. Последняя версия css-doodle также принимает простые математические выражения непосредственно внутри аргументов.

/* rotate: calc(mod(var(--t) / 1000, 10) * 5deg); */
rotate: @t(/1000, %10, *5deg);

Без написания ключевых кадров код получается коротким.

@grid: 20x1 / 280x 60px;
@gap: 1px;
@size: 100% 20%;
background: #000;
margin: auto;
translate: 0 calc(20px * sin(4*@t(/20, +@i(*6), %360deg)));

Кроме того, можно быстро опробовать новые параметры.

translate: 0 calc(20px * sin(3*@t(/50, *@i(*2), %360deg)));

Функции @T и @TS

В дополнение к функции @t, функция @T в верхнем регистре обозначает еще один отсчет времени с начала дня. Функция @TS - это сокращение от @t(/1000), которая отслеживает время в секундах.

Вот часы, реализованные в css-doodle. (CodePen link)

/* секунда */
rotate: @TS(*6, %360deg);

/* минута */
rotate: @TS(/60, *6, %360deg);

/* час */
rotate: @TS(/60, /12, *6, %360deg);

round()

Как сделать прыгающее движение для секундной стрелки? Прямой подход - использовать функцию round(), где третий параметр задает интервал округления. В контексте часов каждый шаг равен 360 / 60 = 6deg.

rotate: round(down, @TS(*6, %360deg), 6deg);

Больше примеров

Анимированные цвета и их расположение. (CodePen link).

@grid: 100x1 / 100% auto (4/3) / #10153e;
@size: @rn(1vmin, 5vmin, 10);
margin: auto;
border-radius: 50%;

background: @p(
  hsl(@t(/10, +@i(*2), %360), 90%, 80%)
);
box-shadow: @m5(
  @r(±23vmin) @r(±23vmin) @r(2vmin) @r(-40px) @p
);
translate: @M2(
  calc(100px * tan(6*cos(@t(/10, +@i(*10), /6, %360deg))))
);

Анимированный цвет текста. (CodePen link).

@grid: 32 / 400px / #000 ^.95;
@content: @pn([a-z0-9.]);

--x: abs(@dx/@X);
--y: abs(@dy/@Y);

line-height: 0;
font-size: 12px;
font-family: monospace;
color: hsl($(480x), 100%, calc(tan($x/tan($y*4)*50 - @t(/400))*100%));

Заключение

Я в восторге от этого подхода. Хотя использование ключевых кадров кажется гораздо более простым, для демонстрационной сцены, полной математических вычислений и входных переменных, использование времени в качестве переменной с большей вероятностью даст разнообразные результаты.

Если вас заинтересовала статья, приглашаем в наш телеграм-канал WebWeavers, в котором мы изучаем frontend и дизайн. В нём мы выкладываем интересные и поучительные посты.

Анимации CSS, основанные на времени