Animate drawing a stroke along a bezier path

491 Views Asked by At

I have some problems with drawing the animation using Pixi-tween. I want to animate a drawing of a stroke along the bezier path.

My code is based on this example: https://github.com/Nazariglez/pixi-tween/blob/master/examples/easing.html, but it still doesn’t work. Any idea where I went wrong?

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

var path = new PIXI.tween.TweenPath();
path.moveTo(0.4, 0.4);
path.bezierCurveTo(0.4, 360,292, 652, 652, 652);
path.bezierCurveTo(87, 65, 105, 47, 105, 24);
path.closed = true;

var t = new PIXI.Graphics();
app.stage.addChild(t);

// t.lineStyle(10, 0xff0000);
// t.drawPath(path);

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

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

There are 0 best solutions below