atta chaudhury

Make zoom images slideshow on canvas pixijs

Recommended Posts

i am trying to making zoomin images slideshow using pixijs on canvas from three images below this

I tried but not succeed. My question in how to add zoomin or zoomout image in pixijs for specific width and height, then second image and so on. I am writing this code

var pixiapp;
var pixiloader = PIXI.Loader.shared;
initpixiapp();

function initpixiapp() {
    pixiapp = new PIXI.Application({ width: 1280, height: 720 });
    document.getElementById('canvas-container').appendChild(pixiapp.view);
    pixiloader.add('images/img1.png').add('images/img2.png').add('images/img3.png').load(handleimagesload);
}
function handleimagesload() {
    var imagessprites=[]
    var img1 = new PIXI.Sprite(pixiloader.resources['images/img1.png'].texture);
    var img2 = new PIXI.Sprite(pixiloader.resources['images/img2.png'].texture);
    var img3 = new PIXI.Sprite(pixiloader.resources['images/img3.png'].texture);
    imagessprites.push(img1)
    imagessprites.push(img2)
    imagessprites.push(img3);
    for (let index = 0; index < imagessprites.length; index++) {
        const element = imagessprites[index];
        pixiapp.stage.addChild(element);
        // here will the the code to run zoom image to specific width and heigth and then move to next image,
        // here is my code, its only display zooming third image
        var ticker = new PIXI.Ticker();
        ticker.add(() => {
            console.log('ticker called')
            element.width += 1;
            element.height += 1;
            if(element.width==1500)
            {
                ticker.stop()
            }
        })
        ticker.start()
    }
}

One more things, how to display a box with text for three seconds before slideshow start.

ezgif.com-video-to-gif.gif

Share this post


Link to post
Share on other sites

Hello, and welcome to the forums!

Looks like a general JS problem. Someone will help you with code, I'm sure :)

My two bits:

1. you can just add handler to pixiapp.ticker and remove it afterwards , instead of creating new one. IT doesnt matter in your case, but I want to make sure you know about that option

2. store images in array, store current image in a variable. 

3. Usually scale is not by width/height, its by "scale" parameter and its exponential. Read up what "element.scale" is.

4. Usually people use tweens for that kind of stuff. Praise GSAP ( https://pixijs.io/examples/#/gsap3-interaction/gsap3-basic.js , google GSAP) . Its  totally fine to write on your own first, because you need to understand how such things work.

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.