Главная » Полезные статьи » HTML-верстка » animation-direction – хорошая идея?
Распечатать статью

animation-direction – хорошая идея?

animation-direction?

Давайте предположим, что у вас есть CSS анимация для background-color, которая меняет цвет от желтого (#cc0) к голубому (#079) в бесконечном цикле. Код для этого может выглядеть примерно так:

@keyframes color {
  from { background: #cc0 }
  to { background: #079 }
}

div {

  animation: color 3s infinite;
}

Представим последовательность анимации в линейном виде (на рисунке три итерации):

 

Как видно, переход между конечным состоянием одной итерации цикла и начальным состоянием новой очень резкий. Можно было бы, конечно, изменить ключевые кадры, чтобы смягчить его. Но есть способ лучше. Свойство с именем animation-direction дает некоторую степень контроля над порядком проигрывания анимации, что позволяет избавиться от резких переходов. Оно также действует на временные функции (timing-function), что позволяет сделать переходы еще плавней.

В ранних вариантах спецификации были доступны только значения normal и alternate. Результат действия первого можно наблюдать на примере выше. alternate же изменяет направление проигрывания в каждой второй итерации, в результате получается следующая последовательность (обратите внимание как была инвертирована вторая итерация):

Последнее изменение, внесенное в черновик спецификации, добавляет еще два значения: reverse, которое переворачивает каждую итерацию, и alternatereverse, которое по сути является комбинацией alternate и reverse. Вот обобщение того, как эти четыре значения влияют на анимацию:

Проблема

Я была рада увидеть, что reverse и alternate-reverse наконец-то добавлены в спецификацию, но что-то в синтаксисе не сходилось. Изначально я думала, что четыре значения по сути вляют на два переключателя:

  • Проигрывать в обратном порядке все итерации? Да/нет
  • Проигрывать в обратном порядке четные итерации? Да/нет

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

Предложение было хорошо встречено одним из соавторов спецификации по анимации (Sylvain Galineau), но возник вопрос, не будет ли сочетание normal c alternate или reverse путать еще больше, вместо того, чтобы упростить понимание. И это вопрос, в котором ваше мнение было бы очень полезно. Как вы думаете, нижеприведенные примеры выглядят работоспособными и логичными, или же вызывают лишние вопросы?

  • animation-direction: normal alternate; /*эквивалент animation-direction: alternate; */
  • animation-direction: alternate normal; /*эквивалент animation-direction: alternate; */
  • animation-direction: normal reverse; /*эквивалент animation-direction: reverse; */
  • animation-direction: reverse normal; /*эквивалент animation-direction: reverse; */

Идея получше(?)

Пока я писала этот пост и рассматривал примеры выше, меня осенило. Эти значения – не комбинация двух состояний! Все четыре значения влияют на то, какие итерации проигрываются в обратном порядке:

  • normal – не реверсирует ни одной итерации
  • reverse – реверсирует все итерации
  • alternate – реверсирует четные итерации
  • alternate-reverse – реверсирует нечетные итерации

Я сама не сразу поняла, в чем причина такой запутанности. Дело в том, что модель, построенная на этих ключевых словах, оторвана от конечного результата, особенно в случае alternate-reverse. Нужно сообразить, что это значение работает как последовательно примененные alternate и reverse. reverse переворачивает все итерации, а alternate – только четные. Таким образом, четные переворачиваются дважды, что аналогично оригинальному направлению воспроизведения, а нечетные оказываются перевернутыми и проигрываются в обратном порядке. Простое двойное отрицание, но тем не менее затрудняющее мысленную визуализацию и понимание.

Я подумала, что проще было бы сделать свойство animation-reverse (или animation-iteration-reverse), которое бы принимало одно из следующих значений:

  • none (эквивалент animation-direction: normal)
  • all (эквивалент animation-direction: reverse)
  • even (эквивалент animation-direction: alternate)
  • odd (эквивалент animation-direction: alternate-reverse)

Этот вариант не только лучше описывает конечный результат, но и более гибкий. Например, если в будущем окажется, что проигрывание в обратном направлении каждой третьей итерации распростанено, то можно было бы легко добавить выражения для этого, аналогичные тем, которые принимает селектор :nth-child().

Еще до того, как предлагать это, я знала, что уже слишком поздно для таких радикальных изменений в модуле анимации, но идея кажется настолько хорошей, что за нее стоит побороться. К тому же, animation-direction еще не нашло широкого применения.

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

Для тех, кто не читал

  1. Удобнее ли использование alternate reverse и reverse alternate (в обоих вариантах), чем alternate-reverse в качестве значений для animation-direction?
  2. Если да, должны ли быть доступны избыточные сочетания normal c alternate и reverse, например normal alternate?
  3. Или, может, отказаться от всего этого разом и ввести свойство animation-reverse, принимающее значения none, all, even, odd?
Источник:  css-live.ru
Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

Похожие статьи