Анимированные картинки на JavaScript, проблема: мерцание экрана и изменение размера

Как я уже упоминал в заголовке, у меня проблема с правильным встраиванием анимации в мой Django проект.

В какой-то момент я решил обновить логотип, используемый моей веб-страницей, встроенной в Django. Имея небольшой опыт работы с JavaScript, я искал подходы, которые соответствовали бы моим потребностям. Я создал движок анимации, вдохновившись этим ответом StackOverflow. (Спасибо пользователю gilly3).

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

function* indexGenerator() {
    let index = 1;
    while (index < 28) {
        yield index++;
    }
    if (index = 28)
        yield* indexGenerator();
  };

var number = indexGenerator();


setInterval(function animationslider()
{
    var file = "<img src=\"../../../static/my_project/logos/media/slides_banner_f/slide_" + number.next().value + ".jpg\" />";
    document.getElementById("animation-slider").innerHTML = file;
    
    $("#animation-slider").fadeIn(1000);
    
    
}, 100);

$("#animation-slider").fadeIn(1000); не делает трюк со значениями от 10-1000. Я записываю, как это выглядит: https://youtu.be/RVBtLbBArh0

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

Мигание/мерцание анимации, вероятно, вызвано загрузкой всех этих изображений по одному. В приведенном выше примере видео их 28. Интересно, если этот контент будет загружаться асинхронно (например, с помощью Ajax), решит ли это проблему? Возможно ли загрузить все и после того, как все загрузится, затем показать анимацию (что-то вроде предварительной загрузки)? Буду благодарен за любые предложения и подсказки.

На данный момент, из того, что я проверил, лучшим методом будет преобразование изображений в формат:

  • APNG
    • .
  • WebP, который кажется более качественным.
  • GIF
    • .

Имея такой файл, нет проблем с загрузкой и мерцанием.

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

Чтобы решить эту проблему, предварительно загрузите все изображения. В этом преимущество спрайта - по своей природе он загружает все изображения сразу. Но если у вас есть отдельные изображения, вы все равно можете предварительно загрузить их. Просто сначала спрячьте их все, а затем показывайте по одному.

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

#animation-slider img ~ img {
    display: none;
}

const animationContainer = document.getElementById("animation-slider");
for (let i = 0; i < 28; i++) {
    const img = document.createElement("img");
    img.src = `../../../static/my_project/logos/media/slides_banner_f/slide_${i}.jpg`;
    animationContainer.appendChild(img);
}

setInterval(() => animationContainer.appendChild(animationContainer.children[0]), 100);

Вот рабочий пример, использующий мое собственное изображение:

const animationContainer = document.getElementById("animation-slider");
for (let i = 1; i < 16; i++) {
    const img = document.createElement("img");
    img.src = `https://jumpingfishes.com/dancingpurpleunicorns/charging${i.toString().padStart(2, "0")}.png`;
    animationContainer.appendChild(img);
}

setInterval(() => animationContainer.appendChild(animationContainer.children[0]), 100);
#animation-slider img ~ img {
    display: none;
}
<div id="animation-slider"></div>

Вернуться на верх