Animating body shape depending of sprite frame

Phaser 3
4

@smjn Thanks for your reply, It was very helpful. I did it, but I fount little bugs when we try to change body shape:

class Boot extends Phaser.Scene {
	player: Phaser.GameObjects.Sprite;
	pigShapes: any;


	preload() {
		//? Load sprite sheet generated with TexturePacker
		this.load.atlas('pig-sprites', './assets/spritesheets/pig/pig-sprites.png', './assets/spritesheets/pig/pig-sprites.json');

		// Load body shapes from JSON file generated using PhysicsEditor?
		this.load.json('pig-shapes', './assets/spritesheets/pig/pig-shapes.json');

	}

	create() {
		this.pigShapes = this.cache.json.get('pig-shapes');

		this.anims.create({
			key: "fly-player",
			frames: this.anims.generateFrameNames("pig-sprites", { prefix: 'pig_0', suffix: '.png', start: 0, end: 6 }),
			repeat: -1,
			frameRate: 15
		});

		this.player = this.matter.add.sprite(400, 100, 'pig-sprites', 'pig_01.png', { shape: this.pigShapes.pig_01 }).setScale(.3).play('fly-player');


		this.player.on('animationupdate-fly-player', (anim, frame, gameObject )  => {
			let nextFrameId = frame.nextFrame.textureFrame.slice(0, frame.nextFrame.textureFrame.indexOf('.')); // get next frame id
			let nextShape = this.pigShapes[nextFrameId]; // get next shape
			
			/* These 2 methods must be run because:
			1) On every body chagne sprite go to the starting points. In my example (y: 100)
			2) Before change body if we scaled before our sprite we must set the scale to the start value
			*/
			let playerY = gameObject.y+1; // get current object Y
			gameObject.setScale(1);
			
			
			gameObject.setBody(nextShape, {shape:this.pigShapes[nextFrameId]} ); // set new  shape
			gameObject.setScale(.3); //again scale
			gameObject.y = playerY; //set last sprite Y position
		})

	}

}

And the result is:
chrome-capture (1)

Edit:
I found other solution fot this in: Matter.js, change body shape

this.player.on('animationupdate-fly-player', (anim, frame, gameObject )  => {
		var sx = gameObject.x;
		var sy = gameObject.y;
		var sav = gameObject.body.angularVelocity;
		var sv = gameObject.body.velocity;

		let nextFrameId = frame.nextFrame.textureFrame.slice(0, frame.nextFrame.textureFrame.indexOf('.')); // get next frame id
		let nextShape = this.pigShapes[nextFrameId]; // get next shape

		/* These 2 methods must be run because:
		1`) Before change body if we scaled before our sprite we must set the scale to the start value
		*/
		gameObject.setScale(1);


		gameObject.setBody(nextShape, { shape: this.pigShapes[nextFrameId] }); // set new  shape

		gameObject.setPosition(sx, sy);
		gameObject.setVelocity(sv.x, sv.y);
		gameObject.setAngularVelocity(sav);
		gameObject.setScale(.3); //again scale
	})