pixi latest version test
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.5/pixi.min.js"></script>
JavaScript
var app = new PIXI.Application();
document.body.appendChild(app.view);
var spritesheetJSON = {"frames": {
"panel/linetest.png":
{
"frame": {"x":0,"y":0,"w":26,"h":38},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":26,"h":38},
"sourceSize": {"w":26,"h":38}
}},
"meta": {
"app": "https://www.codeandweb.com/texturepacker",
"version": "1.0",
"image": "panel.png",
"format": "RGBA8888",
"size": {"w":32,"h":64},
"scale": "1",
"smartupdate": "$TexturePacker:SmartUpdate:5c86804902bd7012fe58804e759a2a25:a341d10d5bc28495404d24429a901fcd:112f8546830365ed43109446294968d5$"
}
}
;
const baseTexture = PIXI.BaseTexture.from("https://i.imgur.com/7yWBvbD.png");
const spritesheet = new PIXI.Spritesheet(baseTexture, spritesheetJSON);
spritesheet.parse(function () {
setup();
});
function setup() {
var segments = 100;
var points = [];
var radius = 50;
var timer = new PIXI.mesh.Rope(PIXI.Texture.from('https://i.imgur.com/tNcVkYE.png'), points);
var timer2 = new PIXI.mesh.Rope(PIXI.Texture.from('panel/linetest.png'), points);
timer.rotation = Math.PI;
timer2.rotation = Math.PI;
var container = new PIXI.Container();
container.x = 400;
container.y = 300;
app.stage.addChild(container);
container.addChild(timer);
container.addChild(timer2);
timer2.x = -200;
var fullAngle = Math.PI * 2;
var progress = 0;
for (var i = 0; i < segments; i++) {
points.push(new PIXI.Point(0, 0));
}
app.ticker.add(function() {
if(progress === 1) {
points[points.length - 1].x = points[0].x;
points[points.length - 1].y = points[0].y;
return;
}
progress = Math.min(1, progress + 0.002);
var angleStep = (fullAngle * progress)/segments;
for (var i = 0; i < segments; i++) {
points[i].x = radius * Math.sin(i * angleStep);
points[i].y = radius * Math.cos(i * angleStep);
}
});
}