pixi tween bezier

by Majitoo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.6.2/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/pixi-tween.min.js"></script>

JavaScript

var app = new PIXI.Application(750, 390, {
  antialias: true
});
document.body.appendChild(app.view);

onAssetsLoaded();
function onAssetsLoaded(){
		background = PIXI.Sprite.fromImage("https://dl.dropboxusercontent.com/s/n0tu8pbesnq8oia/game_day_bg.png?dl=1");
		app.stage.addChild(background);
}

var raf;

function animate() {
  raf = window.requestAnimationFrame(animate);
  app.render(app.stage);
  PIXI.tweenManager.update();
}

function stop() {
  window.cancelAnimationFrame(raf);
}


var t = new PIXI.Graphics();
app.stage.addChild(t);
t.lineStyle(10, 0xff0000);
//t.drawPath(path);
t.drawCircle(0,0,20);
t.x=0;
t.y=350;
var tween = PIXI.tweenManager.createTween(t);

var path = new PIXI.tween.TweenPath();
path.moveTo(0,t.y);
path.bezierCurveTo(700,50+t.y, 
  700, -200+t.y,
  350, -300+t.y);
//path.closed = true;


tween.path = path;
tween.time = 2000;
tween.loop = true;
tween.on('update', function() {
 // t.lineStyle(10, 0xff0000);
//  t.drawPath(path);
});
tween.on('end', function() {
 // t.lineStyle(10, 0xff0000);
//  t.drawPath(path);
console.log("end");
});
tween.start();


app.ticker.add(function(delta) {
  
  PIXI.tweenManager.update();
});