Quantcast
Channel: Pixi.js Latest Topics
Viewing all articles
Browse latest Browse all 3978

Animate drawing along a bezier path

$
0
0

Hey,
I have some problems with drawing the animation using pixi-tween. I want to animate a drawing along the bezier path. I am basis on this example -> https://github.com/Nazariglez/pixi-tween/blob/master/examples/easing.html
 but my code still doesn’t work. Any idea where am I wrong?

That's the code:

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

var raf;
    function animate(){
      raf = window.requestAnimationFrame(animate);
      app.render(app.stage);
      PIXI.tweenManager.update();
    }
    function stop(){
      window.cancelAnimationFrame(raf);
    }
  
var path = new PIXI.tween.TweenPath();
  path.moveTo(0.4,0.4);
  path.bezierCurveTo(0.4,360.5,292.29,652.4,652.4,652.4);
  path.bezierCurveTo(87.5,65.4,105.9,47,105.9,24.89);
  path.closed = true;
  
var t = new PIXI.Graphics();
app.stage.addChild(t);

var tween = PIXI.tweenManager.createTween(t);
tween.on('update', function(delta){
 tween.path = path;
 tween.time = 13000;
 tween.easing = PIXI.tween.Easing.outBounce();
 tween.loop = true;
 tween.lineStyle(10, 0xff0000);
 tween.drawPath(path);
 tween.start();
});

 


Viewing all articles
Browse latest Browse all 3978

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>