0

Я хочу, чтобы звездочки мигали с разной амплитудой. На пару секунд включается гифка, а потом назад статичное изображение. Прикрепляю ссылку на пример.

https://codepen.io/misha-web00/pen/ZERedBb

(подождите пару секунд, пока картинки с имгура в кеш не сохранятся)

Проблема в том, что когда одна звездочка, то всё нормально, но если их 2 и больше, то они начинают конфликтовать и "перебивать" анимацию друг друга. Почему это происходит, если я везде использую только this, который должен брать заложеную в клас переменную?

Уверен, я не учел какуе-то очевидную вещь, но не могу понять что именно :(

Снизу прикрепляю сам код

//STAR FUNCTIONs

//рандомне число
function getRandomInt(max) {
  return Math.trunc(Math.random() * max);
}

//схема така: ми включаєм гіфку, а потім на рандомну кількість секунд вимикаємо гіфку.

class star{
    //e = elm
    constructor(e){
        this.e = e;
    }
    
    star_light_method(){
        setTimeout(() => {
            this.e.src = 'https://i.imgur.com/yaqgXRr.gif';
            setTimeout(() => {
                //gif анімація триває приблизно 2,5s
                this.e.src = 'https://i.imgur.com/eBFYlUI.png';
                this.star_light_method();
            },2490)
        }, getRandomInt(5000))
    }
}

function star_light_start_func(){
    //спочатку запишемо усі картинки в массив.
    star_element_container = document.querySelectorAll('.star');
    star_container = [];
    i = 0;
    for (let elm of star_element_container){
    //присвоїмо їм клас і зразу запустимо метод, який потім буде сам себе запускати.
        star_container[i] = new star(elm);
        star_container[i].star_light_method();
        i += 1;
    }
}
star_light_start_func();
.img_star{
  height:90px;
  width:90px;
}
body{
  background-color:rgba(0,0,0,1);
}
<img class="img_star star" src="https://https://i.imgur.com/eBFYlUI.png">
<img class="img_star star" src="https://https://i.imgur.com/eBFYlUI.png">
<img class="img_star star" src="https://https://i.imgur.com/eBFYlUI.png">

1 ответ 1

0

Понятно, оказывается, сам код рабочий, но одинаковые гиф сбивают друг другу анимацию. Но стоит указать, к примеру, версию (например img.gif?v=1), или ссылку на другую гиф, как эта проблема исчезает. Я лично проверил это, вот ссылка https://codepen.io/misha-web00/pen/eYKWZJQ - уберите в js версию, и крайние звезды будут лагать/одновременно воспроизводиться, что невозможно из-за указаного в setTimeout времени (разница начала цикла анимации в 600мс).

Поэтому я решил эту проблему просто передавая в конструктор класса также версию (номер массива), а версию добавлял к названию ресурса гифки.

//при создании объектов
star_container[i] = new star(elm,i);

//конструктор класса
constructor(e,number){
  this.e = e;
  this.version = number + 1;
}

//в setTimeout
this.e.src = 'https://i.imgur.com/yaqgXRr.gif?v=' + this.version;

(Это изменение уже сохранено на кодепен, который в вопросе. То есть истинную проблему можно увидеть только в приложеном к вопросу коде. Впрочем, вряд-ли это кому-то понадобиться...)

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.