Phaser 3 - How to create smooth zooming effect - phaser-framework

Question

How can I make a zooming effect instead of instant zooming?
Hi there, i'm currently developing a game, which will zoom in when the condition is true. To do that, i followed this link.
https://rexrainbow.github.io/phaser3-rex-notes/docs/site/camera/
camera = this.cameras.main;
if (condition) {
camera.setZoom(3);
camera.zoom = 3;
}
It works, but there's no transition/animation of the zooming. It just simply zoomed.
How can I make a zooming effect instead of instant zooming?

Answer 1

You can play with the pan call and replace 'Power2' by :
Elastic
Sine.easeInOut
Or leave it blank
var config = {
type: Phaser.AUTO,
parent: 'phaser-example',
width: 800,
height: 600, loader: {
baseURL: 'https://raw.githubusercontent.com/nazimboudeffa/assets/master/',
crossOrigin: 'anonymous'
},
scene: {
preload: preload,
create: create
}
};
var game = new Phaser.Game(config);
function preload ()
{
this.load.image('map', 'pics/hyrule.png');
}
function create ()
{
this.cameras.main.setBounds(0, 0, 1024, 1024);
this.add.image(0, 0, 'map').setOrigin(0);
this.cameras.main.setZoom(1);
this.cameras.main.centerOn(0, 0);
this.input.on('pointerdown', function () {
var cam = this.cameras.main;
cam.pan(500, 500, 2000, 'Power2');
cam.zoomTo(4, 3000);
}, this);
}
<script src="//cdn.jsdelivr.net/npm/phaser#3.17.0/dist/phaser.min.js"></script>