时间戳

首页 > 解决方案 > 无限滑块 PIXI JS

javascript - 无限滑块 PIXI JS

问题描述

你好 :) 我试图创建一个无限滑块，如下面的这个网站： https ://www.lamadone.studio/

我几乎要重新创建它，但我有一个问题，滚动太快了，我无法停止它。我不知道下面这段代码中我的问题在哪里：

class Sketch{
    constructor(){
 
        document.body.appendChild(this.app.view);
        this.margin = 50;
        this.scroll = 0;
        this.scrollTarget = 0;
        this.width=(window.innerWidth -2*this.margin)/3;
        this.height = window.innerHeight*0.8;
        this.container = new PIXI.Container();
        this.app.stage.addChild(this.container);
        this.images = [t1, t2, t3, t4, t5];
        this.WHOLEWIDTH = this.images.length*(this.width + this.margin)

        loadImages(this.images, (images)=>{
            this.loadImages = images;
            this.add()
            this.render()
            this.scrollEvent();
        })

  
    }


    scrollEvent(){
        document.addEventListener('mousewheel', (e)=>{
            this.scrollTarget = e.wheelDelta/3
        })
    }

    add(){
        let parent = {
            w: this.width,
            h: this.height,
        }
        this.thumbs = []
        this.loadImages.forEach((img,i)=>{
            let texture = PIXI.Texture.from(img.img)
            const sprite = new PIXI.Sprite(texture);
            let container = new PIXI.Container();
            let spriteContainer = new PIXI.Container();

            let mask = new PIXI.Sprite(PIXI.Texture.WHITE)
            mask.width = this.width;
            mask.height = this.height;

            sprite.mask = mask;


            sprite.anchor.set(0.5);
            sprite.position.set(
                sprite.texture.orig.width/2,
                sprite.texture.orig.height/2,
            )

            let image = {
                w: sprite.texture.orig.width,
                h: sprite.texture.orig.height,
            }

            let cover = fit(image, parent)

            spriteContainer.position.set(cover.left, cover.top)
            spriteContainer.scale.set(cover.scale, cover.scale)

            container.x = (this.margin + this.width)*i;
            container.y = this.height/10

            spriteContainer.addChild(sprite);
            container.interactive = true;
            container.on('mouseover', this.mouseOn)
            container.on('mouseout', this.mouseOut)

            container.addChild(spriteContainer)
            container.addChild(mask);
            this.container.addChild(container);
            this.thumbs.push(container);


        })
    }

    mouseOut(e){

        let e1 = e.currentTarget.children[0].children[0];
        gsap.to(e1.scale,{
            duration:1,
            x:1,
            y:1
        })

    }

    calcPos(scr, pos){

        let temp = (scr + pos + this.WHOLEWIDTH + this.width + this.margin)%this.WHOLEWIDTH - this.width - this.margin

        return temp;

    }

    mouseOn(e){
        let e1 = e.target.children[0].children[0];
        gsap.to(e1.scale,{
            duration:1,
            x:1.1,
            y:1.1
        })
    }

    render(){
        this.app.ticker.add(() => {
            this.app.renderer.render(this.container);

            this.scroll -= (this.scroll - this.scrollTarget)*0.1;
            this.scroll *=0.9
            this.thumbs.forEach(th=>{
                th.position.x = this.calcPos(this.scroll, th.position.x)
            })
        });
    }


}

new Sketch();

提前感谢您的回归:)

标签： javascriptpixi.js

解决方案

我怀疑这this.scrollTarget是你的滚动动画的速度，对吧？

如果是，那么我想你想在使用鼠标滚轮后减速动画 - 为此你应该减少this.scrollTarget价值。

尝试替换这一行：

this.scroll *=0.9

和：

this.scrollTarget *= 0.9

另一件事：使用时请小心e.wheelDelta - 请参阅：Normalizing mousewheel speed across browsers

推荐阅读