Как правильно анимировать элементы при помощи setInterval?
Всем привет
Столкнулся с такой проблемой:
Хочу анимировать несколько изображений поочередно. Суть анимации состоит в том, что изначально все изображения скрыты (visibility:hidden), но по истечению определенного времени, каждое изображение по порядку получает через js (visibility:visible) и появляется на странице, а потом снова исчезает. Т.е. например, изображение первое появляется через 2 сек после загрузки страницы, второе появляется через 2.5, а через 3 сек пропадает, третье изображение появляется через 3 сек (т.е. как пропало второе), и через 3.5 сек пропадает, четвертое появляется через 3,5 сек и через 4 пропадает. Также через 4 сек исчезает и первое изображение. В общем, такая анимация в виде лесенки некой, что-ли.
Написал функцию, которая добавляет visibility:visible методом setInterval к каждой картинке по отдельности. Т.е setInterval через 2 сек показал первую картинку, через 2,5 вторую, через 3 сек третью и тд. Также методом setInterval я и спрятал их снова, когда это было необходимо. Первая итерация срабатывает на ура, т.е. все картинки появились и исчезли в заданном порядке. Но уже вторая и далее итерации начинают лажать. Сначала картинки появляются не через пол секунды, как это было задано, а заметно позже. А через пару итераций вся конструкция вообще превращается в кашу и изображения появляются когда захотят.
В общем, всю голову сломал, а сделать не сделал. Надо чтобы изображения появлялись в строго заданном промежутке времени, исчезали также, а потом снова появлялись через тот же промежуток времени и так до бесконечности.
Если кто-то делал подобное, поделитесь, пожалуйста, кодом и подскажите куда копать.
Без js все равно не получится сделать интервалы, или я ошибаюсь?
Я, кстати, сначала пытался на css чистом сделать, используя keyframes. Столкнулся ровно с такой же проблемой: итерации отрабатывают криво)
Но спасибо за ссылку, библиотека действительно достойна внимания
...методом setInterval к каждой картинке по отдельности...
Вот здесь просчёт.
Нужно отсчитывать временной интервал следующей картинки от предыдущей, а не от общего начала. Потому что на самом деле нет гарантии, сколько времени будет длится очередной таймаут. Если вы укажете 500мс, то это лишь означает не менее 500с, а в теории может быть и 1 сек, и 2 сек, и вообще сколько угодно. И чем дольше анимация, тем больше накапливается мелких ошибок, и тем заметнее визуальный рассинхрон.
Подойдёт единый setInterval с общей логикой внутри. Либо цепочка из setTimeout, в которой одновременно запланирован только один.
Vasya-prijevalskij, я не это сказал. Почитайте правила, там более чётко расписано. :)
Пока меня не накрыла лень, скопипастю сюда для ленивых:
5.12. Задачи и задания.
В отличие от вопроса, задача и задание представляют собой частную проблемную ситуацию с явно заданной целью, которую необходимо достичь. Пользу от достижения этой цели получает, как правило, лишь её автор. И даже автору решение задачи или задания будет полезно лишь кратковременно (до тех пор, пока он не использует полученное решение). Все остальные пользователи, которые будут просматривать вопрос, сведенный к решению частной задачи, в надежде найти ответ на свой, лишь понапрасну затратят время. Поэтому, чтобы такие вопросы-задания не мешали другим пользователям искать ответы на вопросы, нам приходится их удалять. А для поиска помощи в решении задач и выполнения заданий мы рекомендуем использовать специализированные сервисы, например «Хабр Фриланс».
На email пришло уведомление о том, что кто-то ответил на вопрос и посоветовал библиотеку GSAP, но в этой ветке я почему-то ответа найти этого не могу
GSAP - отличная библиотека и я решил с её помощью свою проблему. Чекайте, рекомендую. Автору совета большое спасибо
