Делаю перемещение объектов с эффектом волн. Четыре объекта перемещается вниз и вверх. Чтобы получился эффект волны я установила интервал по "y" каждого объекта на +10 пикселей. Мне нужно чтобы они перемещались используя функцию ослабление (замедление), однако когда они достигаю нижней планки, то сразу перемещаются вверх. Для теста решила над одним объектом сделать функцию ослабление, в итоге объект прыгает по канвасу и улетает за границу. Как сделать перемещение с эффектом ослабления, разумеется, чтобы они перемещались волнами?
Код:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML 5 Canvas</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/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)
{
this.x = x;
this.y = y;
this.width = w;
this.height = h;
this.draw = function(ctx)
{
ctx.fillStyle = "#000";
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 rect1 = new Rectangle(15,15,50,40);
var rect2 = new Rectangle(75, 25, 50, 40);
var rect3 = new Rectangle(135, 35, 50, 40);
var rect4 = new Rectangle(195, 45, 50, 40);
var movement1 =-2;
var movement2 =-2;
var movement3 =-2;
var movement4 =-2;
var startTime = new Date();
var time = new Date() - startTime;
var changeY = 100 - rect1.y;
setInterval(function()
{
var time = new Date() - startTime;
context.clearRect(0, 0, canvas.width, canvas.height);
rect1.y += movement1;
rect2.y += movement2;
rect3.y += movement3;
rect4.y += movement4;
if(rect1.y >= 70 || rect1.y < 15)
{
rect1.y = easeInOutQuad(time, rect1.y, changeY, 1000);
}
if(rect2.y >= 70 || rect2.y < 15)
movement2 *= -1;
if(rect3.y >= 70 || rect3.y < 15)
movement3 *= -1;
if(rect4.y >= 70 || rect4.y < 15)
movement4 *= -1;
rect1.draw(context);
rect2.draw(context);
rect3.draw(context);
rect4.draw(context);
},33);
function linearTween(t, b, c, d) {
return c * t / d + b;
}
function easeInQuad(t, b, c, d) {
return c*(t/=d)*t + b;
};
function easeOutQuad(t, b, c, d) {
return -c *(t/=d)*(t-2) + b;
};
function easeInOutQuad(t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
};
</script>
</body>
</html>