Форум

Katy93 · #1 (**permalink**) 29.05.2021, 16:09

Делаю перемещение объектов с эффектом волн. Четыре объекта перемещается вниз и вверх. Чтобы получился эффект волны я установила интервал по "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>

рони · #2 (**permalink**) 29.05.2021, 16:21

Katy93,
делайте макет целиком, а не кусками.
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Katy93 · #3 (**permalink**) 29.05.2021, 16:47

Все отформатировала текст, теперь можно запустить кнопкой "Посмотреть". Как сделать функцию ослабления, при этом чтобы остался эффект волны?

рони · #4 (**permalink**) 29.05.2021, 18:30

Katy93,

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>HTML 5 Canvas</title>
    <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.yy = y;
            this.width = w;
            this.height = h;
            this.to = [205, 15];
            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");
        function anim(a) {
            function e(b) {
                context.clearRect(a.x, a.y, a.width, a.height)
                var k = .03;
                a.yy += (a.to[0] - a.yy) * k;
                a.y = Math.trunc(a.yy)
                a.draw(context);
                if (Math.abs(a.yy - a.to[0]) < .5) {
                    a.to.reverse();
                    anim(a)
                } else requestAnimationFrame(e)
            }
            requestAnimationFrame(e)
        }
        for (var i = 0; i < 10; i++) {
            var rect = new Rectangle(15 + i * 52, 45 + (Math.cos(i) * 70 | 0), 50, 40)
            anim(rect)
        }
    </script>
</body>
</html>

Katy93 · #5 (**permalink**) 29.05.2021, 19:33

Мне не нужно выбирать из середины, перемещение должно происходить с первой квадрата по последний по очереди делая эффект волны.
Примерно вот так, выполнено с помощью 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>

рони · #6 (**permalink**) 29.05.2021, 19:56

Katy93,

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>HTML 5 Canvas</title>
    <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.yy = y;
            this.width = w;
            this.height = h;
            this.to = [205, 15];
            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");
        function anim(a) {
            function e(b) {
                context.clearRect(a.x, a.y, a.width, a.height)
                var k = .03;
                a.yy += (a.to[0] - a.yy) * k;
                a.y = Math.trunc(a.yy)
                a.draw(context);
                if (Math.abs(a.yy - a.to[0]) < .05) {
                    a.to.reverse();
                    anim(a)
                } else requestAnimationFrame(e)
            }
            requestAnimationFrame(e)
        }
        for (var i = 0; i < 10; i++) {
            let rect = new Rectangle(50 + i * 30, 50, 20, 40);
            window.setTimeout(_ => anim(rect), i * 100)

        }
    </script>
</body>
</html>

Katy93 · #7 (**permalink**) 29.05.2021, 20:55

Хорошо получилось, только вот объекты выстраиваются в линию. Нельзя ли сделать, так чтобы они сразу стартовали когда они достигнут конечной оси координат по y. Мне удалось, это сделать с помощью TweenLite, но хотелось бы увидеть анимацию, без этой библиотеке. Мой вариант 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 rects;
var obj;
function animate() {
   ctx.clearRect(0,0,canvas.width,canvas.height);
  
   draw();
   requestAnimationFrame(animate);
}
var rects = [];
function init()
{
 for(var i=0; i < 20; i++)
 {
   rect = new Rectangle(50+i*30,70,20,40);
   rects.push(rect);
 }
}
function draw()
{
  for(var i=0; i < rects.length; i++)
   {
         rects[i].draw(ctx);
   }
}
init();
animate();

for(var i = rects.length-1; i >=0; i--)
{
  console.log(rects[i]);
 tweenSquare(rects[i],i);
 
}

 
function tweenSquare(s,i) {  
  
  TweenLite.to(s, 1+i*0.1, {y:100, ease: Cubic.easeInOutCubic,delay:0.1+i*0.1, onComplete: function() {
    TweenLite.to(s, 1+i*0.1, {y:50, ease: Cubic.easeInOutCubic, onComplete: function() {
      tweenSquare(s,0.1+i*0.1);
    }})
  }});
}
</script>  
</body>
</html>

рони · #8 (**permalink**) 29.05.2021, 22:21

Katy93,
пока без вариантов, может гугла расспросить?

Katy93 · #9 (**permalink**) 31.05.2021, 04:58

Мне удалось добиться своего, только вот проблема не могу исправить скролинг текста, он почему-то все время уезжает за пределами экрана и появляется с другой стороны, а должен оставаться на месте, нужно сохранить
эффект волн, но чтобы текст оставался на месте. Я понимаю что дело в стиле left, но не знаю как исправить может кто подскажет? Вот рабочий код.

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>Text Wave</title>
	<style type="text/css">
	.letter {
		font-family: sans-serif;
		font-size: 40px;
		font-weight: bold;
		position: absolute;
		top: -100px; 
		left: 0px;
	}
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	$(document).ready(function() {
	  const width = $(window).width();
    const letterSpacing = 35; 
    var startTime = new Date().getTime();
    const waveText = 'Мой текст';
  
		var elements = $('#elements');
		for (i = 0; i < waveText.length; i++) {
			$('<div>', {
				html: waveText[i]
			})
			.addClass('letter')
			.appendTo(elements);
		}
    
    
		
		function runWave() {
      
      var elapsed = new Date().getTime() - startTime;
		   
      
       var pos = elapsed * 0.05;
			
			$('div.letter').each(function(index, letter) {
      
				var posx = ((pos + letterSpacing * index) % width);
        
        var posy = 100 + Math.sin(posx / 50) * 20;
				$(letter).css('left', posx + 'px');
				$(letter).css('top', posy + 'px');
			});
		}
		
		setInterval(runWave, 30);
	});
	</script>
</head>
<body>
	<div id="elements"></div>
</body>
</html>

рони · #10 (**permalink**) 31.05.2021, 07:59

Сообщение от Katy93

чтобы текст оставался на месте.

Скрипт для эффекта волны

Форум

Справочник

Discord чат

Курсы javascript