CreateJS/TweenJS теряет область действия с изменением Tween

Я на кадре в Animate от Adobe. Когда я добавляю прослушиватель «change» в свою анимацию, я теряю область действия, когда нажимаю функцию изменения, называемую animateParticle. Также связано с тем, что анимация, прикрепленная к частице, не распознает функцию .setPaused(true).

this.stop();

that = this;

var particleCount = 0;
var aParticle;
var mySpeed = 12;
var myRotation = 4;
var totalParticles = 5;
var stopParticles = false;
var particleHolder = new createjs.Container();
var mc_coll1 = this.parent.mc_coll0;
mc_coll1.setBounds(0,0,156,34);

var collission_ar = [this.parent.mc_coll0, this.parent.mc_coll1, this.parent.mc_coll2, this.parent.mc_coll3, this.parent.mc_coll4, this.parent.mc_coll5, this.parent.mc_coll6, this.parent.mc_coll7, this.parent.mc_coll8, this.parent.mc_coll9, this.parent.mc_coll10, this.parent.mc_coll11, this.parent.mc_coll12, this.parent.mc_coll13, this.parent.mc_coll14];
var totalCollisions = collission_ar.length;
this.addChild(particleHolder);


var xRange = width;
var yRange = height;

var scaleNum = 1;
//var collisionMethod = ndgmr.checkPixelCollision;

this.scaleX = 1;
this.scaleY = 1;

createParticles()

setTimeout(function(){
    removeTimer();
    //clearTimeout(that.pauseVar);
}, 2000)

function createParticles(){

    var particle_ar = [];
    var randNum = Math.ceil(Math.random() * totalParticles);

    aParticle = new lib['MC_leaf'+randNum]();
    aParticle.name = 'aParticle'+particleCount;
    aParticle.x = Math.random() * xRange;
    aParticle.y = -Math.random() * 15;

    theNum = Math.random() * scaleNum;
    aParticle.scaleX = theNum
    aParticle.scaleY = theNum
    aParticle.alpha = 1;
    aParticle.collision = Math.floor(Math.random() * 2);
    particleHolder.addChild(aParticle);
    particleCount++;
    var tween2 = createjs.Tween.get(aParticle).wait(0).to({y:yRange}, 2000, createjs.Ease.easeOut).call(removeObj,[aParticle], that).addEventListener('change', animateParticle.bind(that));
    aParticle.tween = tween2;
    if(!stopParticles){
        timer = setTimeout(function() { createParticles() }, 100);
    }

}

function animateParticle (event){
    var part = event.currentTarget;
    var mc_newColl;
    console.log('part '+part.name);


    for(var i=0; i < totalCollisions; i++){
        // collision checking
        mc_newColl = collission_ar[i];
        var intersection = checkIntersection(part,mc_newColl); 

        if (intersection){ 
            part.tween.setPaused(true);
            //part.removeEventListener("tick", animateParticle.bind(that));
        }
    }

}

function checkIntersection(part, coll) {
    if ( part.x >= coll.x + coll.width || part.x + part.width <= coll.x || part.y >= coll.y + coll.height || part.y + part.height <= coll.y ) return false;
        return true;
}

function removeObj(part){
    particleHolder.removeChild(part);
}

function removeTimer() {
    stopParticles = true;
    timer = clearInterval();

    //var tween2 = createjs.Tween.get(particleHolder).wait(0).to({alpha:0}, 2000, createjs.Ease.easeOut);
}

//var timer = setInterval(function() { createParticles() }, 200, that);
var timer = setTimeout(function() { createParticles() }, 100, this);

В animateParticle часть не определена.


person 4n6design    schedule 16.09.2016    source источник


Ответы (1)


Целью события изменения будет не частица, а сам твин, так как он является объектом отправки.

createjs.Tween.get(particle).to({x:1000}, 2000)
  .on("change", function(event) {
    console.log(event.target);             // Tween
    console.log(event.target.name);        // undefined
    console.log(event.target.target);      // particle
    console.log(event.target.target.name); // particle's name
  }, that);

Неопределенное, которое вы видите, — это не частица, а имя, которое вы регистрируете.

Обратите внимание, что использование on вместо addEventListener позволяет передать область в качестве параметра вместо использования bind.

Надеюсь, это поможет.

person Lanny    schedule 19.09.2016