Nervously Practice Multithreading

    pixi-apngandgif

    1.0.2 • Public • Published

    Pixi-apngAndGif

    Let Pixi.js support apng, gif images. And allow control of its operation.

    DEMO

    USE

    ES6

    # Support pixi4.0 
    npm install pixi-apngandgif@1.0.0
     
    # Support pixi5.0+ 
    npm install pixi-apngandgif
    import PixiApngAndGif from 'pixi-apngandgif'
     
    const app = new PIXI.Application();
    const loader = PIXI.Loader.shared,
        loadOption = {
            loadType: PIXI.LoaderResource.LOAD_TYPE.XHR,
            xhrType: PIXI.LoaderResource.XHR_RESPONSE_TYPE.BUFFER,
            crossOrigin:''
        },
        imgs = {
            gif:'http://isparta.github.io/compare/image/dongtai/gif/1.gif',
            apng:'http://isparta.github.io/compare/image/dongtai/apng/1.png'
        };
     
    loader.add(imgs.gif,loadOption);
    loader.add(imgs.apng,loadOption);
    loader.load((progress,resources)=>{
        window.gif = new PixiApngAndGif(imgs.gif,resources);
        window.apng = new PixiApngAndGif(imgs.apng,resources);
     
        let gifSprite = window.gif.sprite,
            apngSprite = window.apng.sprite;
     
        gifSprite.x = 100;
        apngSprite.x = 450;
     
        gifSprite.y = 160;
        apngSprite.y = 160;
     
        app.stage.addChild(gifSprite);
        app.stage.addChild(apngSprite);
    });
     
    document.body.appendChild(app.view);

    Browser

    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>
    <script src="https://cdn.rawgit.com/sbfkcel/pixi-apngAndGif/master/dist/PixiApngAndGif.js"></script>

    Application code

    const app = new PIXI.Application();
    const loader = PIXI.Loader.shared,
        loadOption = {
            loadType: PIXI.LoaderResource.LOAD_TYPE.XHR,
            xhrType: PIXI.LoaderResource.XHR_RESPONSE_TYPE.BUFFER,
            crossOrigin:''
        },
        imgs = {
            gif:'https://isparta.github.io/compare/image/dongtai/gif/1.gif',
            apng:'https://isparta.github.io/compare/image/dongtai/apng/1.png'
        };
     
    loader.add(imgs.gif,loadOption);
    loader.add(imgs.apng,loadOption);
    loader.load((progress,resources)=>{
        window.gif = new PixiApngAndGif(imgs.gif,resources);
        window.apng = new PixiApngAndGif(imgs.apng,resources);
     
        let gifSprite = window.gif.sprite,
            apngSprite = window.apng.sprite;
     
        gifSprite.x = 100;
        apngSprite.x = 450;
     
        gifSprite.y = 160;
        apngSprite.y = 160;
     
        app.stage.addChild(gifSprite);
        app.stage.addChild(apngSprite);
    });
     
    document.body.appendChild(app.view);

    API

    .play(bout,callback)

    Play animation boutUsed to specify the number of plays callbackCallback executed after the specified number of plays has been completed

    .pause()

    Pause animation

    .stop()

    Stop animation

    .jumpToFrame(frame)

    Jump to the specified frame

    .getDuration()

    Get the total duration of an animation single play

    .getFramesLength()

    Get the number of animation frames

    .on(status,callback)

    Used to invoke the specified method in the specified phase of the animation statusFour states(playingplayedpausestop) callbackCallback, there is a parameter. The status of the current animation is recorded.

    Install

    npm i pixi-apngandgif

    DownloadsWeekly Downloads

    15

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    2.58 MB

    Total Files

    23

    Last publish

    Collaborators

    • sbfkcel