Мне не нужно выбирать из середины, перемещение должно происходить с первой квадрата по последний по очереди делая эффект волны.
Примерно вот так, выполнено с помощью TweenLite, только проблема в коде заключается в том что происходит выстраивание в линию, а потом продолжается движение. В моем случае движение должно происходить постоянно как только достиг нижней или верхней границы, тут же отправляется дальше движение без выстраивания в линию. Как это можно сделать?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Tween</title>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenLite.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/CSSPlugin.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/easing/EasePack.min.js'></script>
</head>
<body>
<canvas id="canvas" width="670" height="500" style="background-color:#eee; border:1px solid #ccc;"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var canvas = document.getElementById('canvas');
var x = 50;
var y = 50;
Rectangle = function(x,y,width,height)
{
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.draw = function(ctx)
{
ctx.beginPath();
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
var rect1;
var rect2;
var rect3;
var rect4;
var obj;
function animate() {
ctx.clearRect(0,0,canvas.width,canvas.height);
rect1.draw(ctx);
rect2.draw(ctx);
rect3.draw(ctx);
rect4.draw(ctx);
requestAnimationFrame(animate);
}
function init()
{
rect1 = new Rectangle(50,50,20,40);
rect2 = new Rectangle(80,70,20,40);
rect3 = new Rectangle(110,90,20,40);
rect4 = new Rectangle(140,110,20,40);
}
init();
animate();
tweenSquare(rect1);
tweenSquare2(rect2);
tweenSquare3(rect3);
tweenSquare4(rect4);
function tweenSquare(s) {
TweenLite.to(s, 2, {y:250, ease: Cubic.easeInOut,delay:0.4, onComplete: function() {
TweenLite.to(s, 2, {y:50, ease: Cubic.easeInOut, onComplete: function() {
tweenSquare(s);
}})
}});
}
function tweenSquare2(s) {
TweenLite.to(s, 2, {y:250, ease: Cubic.easeInOut,delay:0.3,onComplete: function() {
TweenLite.to(s, 2, {y:50, ease: Cubic.easeInOut,onComplete: function() {
tweenSquare(s);
}})
}});
}
function tweenSquare3(s) {
TweenLite.to(s, 2, {y:250, ease: Cubic.easeInOut,delay:0.2,onComplete: function() {
TweenLite.to(s, 2, {y:50, ease: Cubic.easeInOut, onComplete: function() {
tweenSquare(s);
}})
}});
}
function tweenSquare4(s) {
TweenLite.to(s, 2, {y:250, ease: Cubic.easeInOut,delay:0.1, onComplete: function() {
TweenLite.to(s, 2, {y:50, ease: Cubic.easeInOut, onComplete: function() {
tweenSquare(s);
}})
}});
}
function start(){
console.log('start');
}
function update(){
console.log('animating');
}
function complete(){
console.log('end');
}
</script>
</body>
</html>