Пытаюсь сделать анимацию волн со слоями, с помощью математических функций. Мне удалось сделать два примера.
Вот пример 1.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML 5 Canvas</title>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<style type="text/css">
html, body {
margin: 0px;
}
canvas {
display: block;
position: absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<canvas id="canvas">
Your browser does not support HTML5 canvas. If you would
like to view, please update your browser.
</canvas>
<script>
Rectangle = function(x, y, w, h,color)
{
this.x = x;
this.y = y;
this.width = w;
this.height = h;
this.color = color;
this.draw = function(ctx)
{
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
var canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var context = canvas.getContext("2d");
var rect;
var targetY = 100;
var duration = 1000;
var posX = 120;
var posY = 50;
var angle=0;
var angleStep=30;
var angleSpeed=2;
var distance = 60;
var waveHolder = [];
function init()
{
var colors=["#FF0000", "#FF6600", "#FFFF00", "#00FF00", "#00FFFF", "#0000FF", "#FF00FF", "#FF0066"];
waveHolder = [];
var spr;
for (var i = 0; i < colors.length; i++)
{
waveHolder.push(spr = addContent(colors[i]));
}
angle = 0;
angleStep = 30;
angleSpeed = 8;
distance = 60;
update();
}
function addContent(color)
{
var rect = [];
for (var i = 0; i < 5; i++)
{
rect[i] = new Rectangle(i * 35, 30, 30,30,color);
rect[i].draw(context);
}
return rect;
}
init();
var spr = [];
function update()
{
context.clearRect(0, 0, canvas.width, canvas.height);
var currAngle;
for (var i = 0; i < waveHolder.length; i++)
{
for(var j = 0; j < 5; j++)
{
spr = waveHolder[i][j];
currAngle = (angle+angleStep * i) * Math.PI / 180;
spr.x = posX+(j*35 - i * 5);
spr.y = posY+(Math.sin(currAngle) * distance);
spr.draw(context);
}
}
angle+= angleSpeed;
angle %= 360;
requestAnimationFrame(update);
}
</script>
</body>
</html>
Вот пример 2.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML 5 Canvas</title>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<style type="text/css">
html, body {
margin: 0px;
}
canvas {
display: block;
position: absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<canvas id="canvas">
Your browser does not support HTML5 canvas. If you would
like to view, please update your browser.
</canvas>
<script>
Rectangle = function(x, y, w, h,color)
{
this.x = x;
this.y = y;
this.width = w;
this.height = h;
this.color = color;
this.draw = function(ctx)
{
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
var canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var context = canvas.getContext("2d");
var rect;
var targetY = 100;
var duration = 1000;
var posX = 120;
var posY = -70;
var angle=0;
var angleStep=30;
var angleSpeed=2;
var distance = 60;
var waveHolder = [];
var startTime = new Date().getTime();
const letterSpacing = 35;
function init()
{
var colors=["#FF0000", "#FF6600", "#FFFF00", "#00FF00", "#00FFFF", "#0000FF", "#FF00FF", "#FF0066"];
waveHolder = [];
var spr;
for (var i = 0; i < colors.length; i++)
{
waveHolder.push(spr = addContent(colors[i]));
}
angle = 0;
angleStep = 30;
angleSpeed = 8;
distance = 60;
update();
}
function addContent(color)
{
var rect = [];
for (var i = 0; i < 5; i++)
{
rect[i] = new Rectangle(i * 35, 30, 30,30,color);
rect[i].draw(context);
}
return rect;
}
init();
var spr = [];
function update()
{
context.clearRect(0, 0, canvas.width, canvas.height);
var currAngle;
var elapsed = new Date().getTime() - startTime;
var pos = elapsed * 0.2;
for (var i = 0; i < waveHolder.length; i++)
{
for(var j = 0; j < 5; j++)
{
spr = waveHolder[i][j];
var posx = pos + letterSpacing * j;
var posy2 = 100 + Math.sin(posx / 50) * 20;
currAngle = (angle+angleStep * i) * Math.PI / 180;
spr.x = posX+(j*35 - i * 5);
spr.y = posY + (35 + i * 5)+(posy2);
//posY + posy2;
//posY+(Math.sin(currAngle) * distance);
spr.draw(context);
}
}
angle+= angleSpeed;
angle %= 360;
requestAnimationFrame(update);
}
</script>
</body>
</html>
Как сделать анимацию волн при этом чтобы для каждого квадрата тоже происходила анимация из восьми дубликатов (сверху вниз)? То есть, чтобы один ряд (с дубликатами разных цветов) был привязан конкретно к квадрату и для него помимо горизонтальной волны происходила еще и вертикальное перемещение (как в примере 1).
P.S. Оба примера можно запустить, кнопкой "выполнить".
