Определите эффект зависания в конструкторе

Question

Я думаю, что получил очень простой вопрос.С Pixijs я создаю несколько объектов с тем же конструктором.Для каждого объекта я определяю тот же эффект от мыши.Как это может быть упрощено?

Конструктор:

function thinarrow(divid,rotation,rendwidth,rendheight,spritewidth,spriteheight){
    var that = this;

    //renderer & stage
    this.rendererstage = new rendererstage("",divid,rendwidth,rendheight)

    //Creating Elements
    this.arrowblurFilter = new blurfilter(0,0);    

    this.arrow = new DisplayObjectContainer(spriteheight,spritewidth,true)
    this.arrowimg = new SpriteFromImage("resources/img/layout/arrowthin.png",0,0,0.5,0.5,125,58,rotation);
    this.arrowblur = new SpriteFromImage("resources/img/layout/arrowthinblur.png",0,0,0.5,0.5,250,116,rotation,true,true);



    this.rendererstage.stage.addChild(this.arrow);
    this.arrow.addChild(this.arrowblur);   
    this.arrow.addChild(this.arrowimg);

    //Animate
    this.animate = function(){
        that.rendererstage.renderer.render(that.rendererstage.stage);
        requestAnimationFrame(that.animate);    
    }
}

.

init.js (вызывается нагрузка для тела)

peoplearrowleft = new thinarrow("peoplearrowleft",Math.PI/2,116,250,125,58);
peoplearrowright = new thinarrow("peoplearrowright",-Math.PI/2,116,250,125,58);

requestAnimationFrame(peoplearrowleft.animate);
requestAnimationFrame(peoplearrowright.animate);

peoplearrowright.arrow.mouseover = function(mouseData){
    peoplearrowright.arrowblur.filters = [peoplearrowright.arrowblurFilter.blurfilter];
    TweenMax.to(peoplearrowright.arrowblurFilter.blurfilter, 0.8, {blurX:70, blurY:70, repeat: -1, yoyo:true});
}
peoplearrowright.arrow.mouseout = function(mouseData){
    TweenMax.to(peoplearrowright.arrowblurFilter.blurfilter, 0.8, {blurX:0, blurY:0, onComplete:function(){
        peoplearrowright.arrowblur.filters = null;
    }});    
}
peoplearrowleft.arrow.mouseover = function(mouseData){
    peoplearrowleft.arrowblur.filters = [peoplearrowleft.arrowblurFilter.blurfilter];
    TweenMax.to(peoplearrowleft.arrowblurFilter.blurfilter, 0.8, {blurX:70, blurY:70, repeat: -1, yoyo:true});
}
peoplearrowleft.arrow.mouseout = function(mouseData){
    TweenMax.to(peoplearrowleft.arrowblurFilter.blurfilter, 0.8, {blurX:0, blurY:0, onComplete:function(){
        peoplearrowleft.arrowblur.filters = null;
    }});    
}

.

Я думаю, что вы можете увидеть, что этот код не очень тонкий, но я просто не знаю, как его уменьшить.Я новый для объекта ориентированный JavaScript.

Answer 1

Если вы хотите сделать это на OOP, вы можете расширить DisplayObjectContainer для создания новой цели стрелки.Что-то вроде этого:

function Arrow(spriteheight, spritewidth) {
    PIXI.DisplayObjectContainer.call(this, spriteheight, spritewidth, true);

    this.arrowimg = new SpriteFromImage("resources/img/layout/arrowthin.png",0,0,0.5,0.5,125,58,rotation);
    this.arrowblur = new SpriteFromImage("resources/img/layout/arrowthinblur.png",0,0,0.5,0.5,250,116,rotation,true,true);

    this.addChild(this.arrowblur);   
    this.addChild(this.arrowimg);

    this.arrowblurFilter = new BlurFilter(0,0);

    this.mouseover = this.onMouseOver;
}

Arrow.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
Arrow.prototype.constructor = Arrow;

// define additional functions after Object.create:
Arrow.prototype.someCustomFunction = function() {
   // this.doSomething();
};

Arrow.prototype.onMouseOver = function() {
    this.arrowblur.filters = [this.arrowblurFilter];
    TweenMax.to(this.arrowblurFilter.blurfilter, 0.8, {blurX:70, blurY:70, repeat: -1, yoyo:true});
};

.

Тогда используйте это так:

this.arrow = new Arrow(spriteheight,spritewidth);
this.rendererstage.stage.addChild(this.arrow);

.