Как сделать плавную анимацию волнами на js?

Katy93 · 29 май 2021

Создаю анимацию использую для этого библиотеку TweenLite. Мне нужно чтобы четыре объекта перемещались вверх вниз, при этом чтобы выглядело как волна. Например один объект оказался внизу, то он должен сразу стартовать вверх потом другой объект оказался внизу и он тоже должен стартовать вверх и так далее. В итоге получается так, сначала все объекты оказываются внизу и уже потом стартуют. Вот код:

Код (Text):

<!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);

}})

}});

}

// 7. Callback functions

function start(){

console.log('start');

}

function update(){

console.log('animating');

}

function complete(){

console.log('end');

}

</script>

</body>

</html>

Быстрый поиск

Как сделать плавную анимацию волнами на js?

Katy93 Активный пользователь