Как реализовать смену src плавно через JavaScript?

Question

[gazes12]

const image_1 = document.getElementById('site_1');
const image_2 = document.getElementById('site_2');
const image_3 = document.getElementById('site_3');
const image_4 = document.getElementById('site_4');

let key = ["image_1.png", "image_2.png", "image_3.png"];

let Changer = setTimeout(function ChangerFunction() {
	const rand = (min, max) => min + Math.floor(Math.random() * (max - min));

	image_1.style.opacity = 0;
	image_1.src = `img/works/works1/${key[rand(0, 3)]}`;
	/*Картинка должна стать видимая через секунду после image_2.src = `img/works/works2/${key[rand(0, 3)]}`;*/
	image_1.style.opacity = 1;



	image_2.style.opacity = 0;
	image_2.src = `img/works/works2/${key[rand(0, 3)]}`;
	/*Картинка должна стать видимая через секунду после image_2.src = `img/works/works2/${key[rand(0, 3)]}`;*/
	image_2.style.opacity = 1;


	image_3.style.opacity = 0;
	image_3.src = `img/works/works3/${key[rand(0, 3)]}`;
	/*Картинка должна стать видимая через секунду после image_2.src = `img/works/works2/${key[rand(0, 3)]}`;*/
	image_3.style.opacity = 1;



	image_4.style.opacity = 0;
	image_4.src = `img/works/works4/${key[rand(0, 3)]}`;
	/*Картинка должна стать видимая через секунду после image_2.src = `img/works/works2/${key[rand(0, 3)]}`;*/
	image_4.style.opacity = 1;

	Changer = setTimeout(ChangerFunction, 2000);
}, 2000);

Сверху код не работает, не знаю как выставить задержку для opacity.
Подскажите пожалуйста как можно реализовать такую идею?

В css я указал transition: opacity .2s ease; для image_1, image_2, image_3, image_4

Comments

[Надим]

Что ты имеешь в виду под плавностью? Плавность чего??? Опиши нормально, чего ты хочешь добиться.

[Adamos]

не знаю как выставить задержку для opacity

Погуглить "opacity анимация".

[imko]

setInterval в котором опасити меняешь не полностью а с шагом небольшим. Ну или не маяться фигней и в css указать transition

[gazes12]

Надим Закиров, Сверху код выполняет изменение картинки очень резко, так как для src нету transition, я хочу сделать через opacity, а opacity выполняется очень быстро что даже не заметно:

image_1.style.opacity = 0;
  image_1.src = `img/works/works1/${key[rand(0, 3)]}`;
  /*Картинка должна стать видимая через секунду после image_2.src = `img/works/works2/${key[rand(0, 3)]}`;*/
  image_1.style.opacity = 1; /*opacity 0 и opacity 1 выполняются очень быстро что даже не заметно разницы*/

[Сергей Сергей]

-в css плавность нужно задавать для #site_1, ... #site_4.
-файлы изображений следует предварительно загрузить.
-setTimeout откладывает введённую функцию целиком, а для срабатывания плавного изменения css-свойств необходимо разделить во времени style.opacity = 0 и style.opacity = 1, то есть понадобятся две функции с отложенным запуском одна за другой.
-четырёхкратное дублирование можно сжать в функцию.
-можно пересмотреть код на использование setInterval.

[Надим]

gazes12, вам нужно переписать всю логику используя async / await. Никаких setTimeout или setInterval при анимациях не должно быть, так как анимации не всегда точно столько времени выполняются, сколько вы ожидали - компы у всех разные, у кого-то мощнее, у кого-то слабее.

Плавную смена opacity на JS можно сделать через цикл do while:

image_1.style.opacity = 0;
image_1.src = `img/works/works1/${key[rand(0, 3)]}`;
do {
    image_1.style.opacity = image_1.style.opacity + 0.05;
    await new Promise(function(s) { setTimeout(s, 50); });
} while (image_1.style.opacity < 1);

Параметр opacity будет увеличиваться каждые 50 мс. на 0.05 единиц, пока не станет равной единице.

[gazes12]

Надим Закиров, Правильно?

const image_1 = document.getElementById('site_1');
const image_2 = document.getElementById('site_2');
const image_3 = document.getElementById('site_3');
const image_4 = document.getElementById('site_4');

let key = ["image_1.png", "image_2.png", "image_3.png"];

let Changer = setTimeout(function ChangerFunction() {
	const rand = (min, max) => min + Math.floor(Math.random() * (max - min));


	image_1.style.opacity = 0;
	image_2.style.opacity = 0;
	image_3.style.opacity = 0;
	image_4.style.opacity = 0;

	image_1.src = `img/works/works1/${key[rand(0, 3)]}`;
	image_2.src = `img/works/works2/${key[rand(0, 3)]}`;
	image_3.src = `img/works/works3/${key[rand(0, 3)]}`;
	image_4.src = `img/works/works4/${key[rand(0, 3)]}`;
	do {
	    image_1.style.opacity = image_1.style.opacity + 0.05;
	    image_2.style.opacity = image_1.style.opacity + 0.05;
	    image_3.style.opacity = image_1.style.opacity + 0.05;
	    image_4.style.opacity = image_1.style.opacity + 0.05;
	    await new Promise(function(s) { setTimeout(s, 50); });
	} while (image_1.style.opacity && image_2.style.opacity && image_3.style.opacity &&  image_4.style.opacity < 1);

	Changer = setTimeout(ChangerFunction, 2000);
}, 2000);

[Kvason]

gazes12, так погунли про анимации, вообще я немног не понимаю зачем оно тебе надо, поставь в css transition и потом в жс меняй путь

[gazes12]

Kvason, Точняк, можно же сделать анимацию в css которая с каким то промежутком времени будет менять прозрачность, и такой же промежуток времени установить на смену картинки в js, спасибо за идею!

Answer 1

[Надим]

(async function() {
	
	// Массив с именами картинок:
	var names = [ 'image_1.png', 'image_2.png', 'image_3.png'];
	
	// Ищем все картинки имеющие атрибут id начинающийся
	// со слова site_ и сохраняем результат в переменную images:
	var images = document.querySelectorAll('img[id^="site_"]');
	
	// Запускаем бесконечный цикл:
	
	while (true) {
		
		// Перебираем найденные картинки:
		
		images.forEach(function(image) {
			
			// Каждой картинке
			// назначаем прозрачность:
			image.style.opacity = 0;
			
			// И также присваиваем случайную картинку из массива с именами:
			image.src = 'img/works/works1/' + names[Math.round(Math.random() * links.length - 0.5)];
			
		});
		
		// Добавляем анимацию
		// для этого использует цикл
		// с прерыванием по условию:
		
		do {
			
			// Увеличиваем opacity на 0.05
			// всем картинкам в переменной:
			
			images.forEach(function(image) {
				image.style.opacity = Number(image.style.opacity) + 0.05;
			});
			
			// Ждем 50 мс:
			await new Promise(function(s) { setTimeout(s, 50); });
			
			// И далее повторяем пока opacity не станет равной единице...
			
		} while (images[0].style.opacity < 1);
		
		// После завершения анимации ждем 2 секунды:
		await new Promise(function(s) { setTimeout(s, 2000); });
		
		// После чего бесконечный цикл повторится вновь и вновь...
		
	}
	
})();

Comments

[gazes12]

Спасибо!

[Надим]

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

[gazes12]

Надим Закиров, Нет, это не учебное задание. Спасибо большое, я много чего узнал.