Блог

Главная - Вопросы по программированию - CSS3 анимация цепочки

CSS3 анимация цепочки

#animation #css

#Анимация #css

Вопрос:

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

Мой вопрос в том, каков наилучший способ «связать» эти анимации. Должен ли я иметь одну анимацию для перемещения вниз по экрану, отдельную анимацию для выделения текста и третью анимацию для перемещения вниз по остальной части экрана? Затем, должен ли я установить задержку анимации, чтобы запускать вторую и третью анимации только после завершения предыдущих анимаций? Я думаю, что я в порядке с созданием отдельных анимаций, которые будут соединены вместе, но я не уверен, как эти анимации должны запускать следующую анимацию.

Ответ №1:

Существует несколько способов создания цепочки анимаций — есть чистый CSS-способ, использующий -webkit-animation-delay, где вы определяете несколько анимаций и указываете браузеру, когда их запускать, например

 -webkit-animation: First 1s, Second 2s;
-webkit-animation-delay: 0s, 1s;
/* or -moz etc.. instead of -webkit */

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

 $('#id')
  .bind('webkitAnimationEnd',function(){ Animate2() })
  .css('-webkit-animation','First 1s');

Третий способ — установить тайм-ауты в Javascript и изменить свойство css animation. Это то, что я использую большую часть времени, поскольку оно наиболее гибкое: вы можете легко изменять время, отменять последовательности анимации, добавлять новые и разные, и у меня никогда не было проблем с ошибкой, например, с привязкой к событию transitionEnd.

 $('#id').css('-webkit-animation','First 1s');
window.setTimeout('Animate2("id")', 1000);
function Animate2....

Это больше кода, чем привязка, и, конечно, больше, чем CSS, но он более надежный и гибкий, имхо.

Комментарии:

1. Отлично! У меня было ощущение, что мне может понадобиться использовать какой-нибудь js, но меня это устраивает. Я попробую третий вариант.

2. Еще одна вещь, на которую следует обратить внимание — если вам нужно обнаружить событие click() во время последовательности анимации, используйте OnMouseDown() вместо click(), так как некоторые браузеры завершают последовательность анимации перед запуском click(), тогда как все они, похоже, запускают OnMouseDown() во время анимациипросто отлично.

3. это setTimeout не более надежно. Ввод 1000 не означает, что он будет выполнен 1 second . Это означает, что он не будет выполняться, по крайней мере, до 1 second и после этого он может быть выполнен в любое время, если вообще когда-либо. Это будет зависеть от того, что находится в цикле событий.

4. Надежно! = время. Надежный == выполнен.

5. Удалось ли вам определить конкретные случаи, когда webkitAnimationEnd событие было ненадежным? Если да, не могли бы вы поделиться некоторыми подробностями?

Ответ №2:

Пока я искал то же самое, без использования чего-то вроде jQuery, я пришел к той же идее цепочки, слушая webkitAnimationEnd, как предлагали другие. Таким образом, вы могли бы использовать CSS для переходов и для синхронизации анимации.

Вы можете создать массив в виде очереди и добавить в него элемент, который хотите анимировать (с некоторыми параметрами, такими как эффект и тип анимации). Затем вы можете обработать эту очередь, перейдя к следующей анимации, когда анимация заканчивается. Эта анимация может быть либо другим элементом, либо последующей анимацией того же элемента. Не забудьте удалить класс анимации из className , когда анимация заканчивается. Для каждого шага просто добавляйте соответствующие классы CSS, а затем удаляйте их, когда анимация будет завершена. Поскольку мы слушаем animationEnd , синхронизацию можно выполнить только с помощью CSS, оставив только обработку JavaScript.

Это настолько минимальная задача, что, если ваш проект еще не использует библиотеку, подобную jQuery, вам следует просто использовать Vanilla JS.

Я провел некоторое исследование, и мне удалось кое-что собрать. Смотрите эту скрипку для примера:

 var manager = new AnimationManager();
manager.enqueue(animations).animate();

Конечный продукт находится в моем репозитории github.

Надеюсь, это даст вам некоторое представление / помощь.

Ответ №3:

Я просто создавал цепочку анимаций в Chrome 16, используя «правильный» — и самый общий — способ: запускал вторую анимацию в webkitAnimationEnd, причем анимации, определенные ключевыми кадрами, ссылаются на правило класса, которое определяет переменные animation- *, и запускаются путем добавления имени класса к целевым элементам. Это «правильно», потому что оно определяет все временные интервалы относительно, один раз, потому что оно наиболее гибкое (например, каждая анимация может включать отдельные элементы, что вы не можете сделать в пределах одного ключевого кадра), и потому что оно максимально использует CSS3.

Это не удалось. Исправлено путем удаления имени класса завершенного перехода перед запуском следующего!