Как сделать эффект пульсации js

Question

Как сделать эффект пульсации js

Dlzder Dlzder Ученик (138), на голосовании 1 год назад

Нужно сделать небольшую пульсацию фона красноватым оттенком при смерти, я для этого использовал простые изменения свойств css но Есть ли способ симпатичнее и более гибкий?

 canvasOuter.style.backgroundColor = '#120c0c'; 
setTimeout(function() {canvasOuter.style.transition = '1s'}, 100) 
setTimeout(function() {canvasOuter.style.backgroundColor = '#101010'}, 100);

Answer 1

В ссылке пробел убери
<script src=" https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/ gsap.min.js"></script>

var canvasOuter = document.getElementById('canvas-outer');

var tl = gsap.timeline();

tl.to (canvasOuter, {duration: 0.5, backgroundColor: '#ff0000'})
.to(canvasOuter, {duration: 0.5, backgroundColor: '#120c0c'})
.to(canvasOuter, {duration: 0.5, backgroundColor: '#ff0000'})
.to(canvasOuter, {duration: 0.5, backgroundColor: '#120c0c'})
.to(canvasOuter, {duration: 0.5, backgroundColor: '#ff0000'})
.to(canvasOuter, {duration: 0.5, backgroundColor: '#101010'});

Answer 2

гугли функцию рандом. Она выбрасывает значение от -0,5 до 0.5, можно и пределы задать от 0 до 100 например. Затем надо тактировать скорость генерации..
В итоге у тебя будут значения от и до с определённой частотой, можно и туда запихнуть рандом и будет даже время рандомноным. Написать код не сложно, тебе же надо, гугли реально рандом.

Answer 3

Максим Искусственный Интеллект (213341) 1 год назад

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

Dlzder DlzderУченик (138) 1 год назад

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

Максим Искусственный Интеллект (213341) Dlzder Dlzder, ну да, это будет чуток сложнее, потому что придется прописывать покадровую логику, но это будет в логике самого канваса.

Answer 4

При использовании канваса нет смысла работать напрямую с элементом DOM. Можно попробовать сделать прямоугольник во весь размер холста и покрасить его в радиальный градиент с легкой прозрачностью, за изменение которой будет отвечать функция на основе requestAnimationFrame().