Javascript 如何在anime.js中创建波浪中移动的对象？_Javascript_Html_Canvas

Javascript 如何在anime.js中创建波浪中移动的对象？

javascript html canvas

Javascript 如何在anime.js中创建波浪中移动的对象？,javascript,html,canvas,Javascript,Html,Canvas,如何在anime.js中使移动对象波动？我需要设置一组对象的动画以在波浪中移动。此动画需要在anime.js中完成。已经在TweenLite上完成了，如何只在anime.js上完成同样的操作？这是一个TweenLite代码示例，您需要获得与TweenLite相同的代码，仅在Anime.js上：吐温 var canvas=document.getElementById（'canvas'）； var ctx=canvas.getContext（'2d'）； var canvas=docum

如何在anime.js中使移动对象波动？我需要设置一组对象的动画以在波浪中移动。此动画需要在anime.js中完成。已经在TweenLite上完成了，如何只在anime.js上完成同样的操作？这是一个TweenLite代码示例，您需要获得与TweenLite相同的代码，仅在Anime.js上：


吐温
var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
var canvas=document.getElementById（'canvas'）；
var x=50；
变量y=50；
矩形=函数（x、y、宽度、高度）
{
这个.x=x；
这个。y=y；
这个。宽度=宽度；
高度=高度；
this.draw=函数（ctx）
{
ctx.beginPath（）；
ctx.fillRect（this.x，this.y，this.width，this.height）；
}
}
var-rects；
var-obj；
函数animate（）{
clearRect（0,0，canvas.width，canvas.height）；
draw（）；
请求动画帧（动画）；
}
var rects=[]；
函数init（）
{
对于（变量i=0；i<20；i++）
{
rect=新矩形（50+i*30,70,20,20）；
推挤（rect）；
}
}
函数绘图（）
{
for（var i=0；i=0；i--）
{
tweenSquare（rects[i]，i）；
}
函数tweenSquare（s，i）{
TweenLite.to（s，1+i*0.1，{y:120，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（））{
二次方（s，0.1+i*0.1）；
}})
}});
}

<!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,20);
   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--)
{
 tweenSquare(rects[i],i);
}

 
function tweenSquare(s,i) {  
  
  TweenLite.to(s, 1+i*0.1, {y:120, 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>