Question

我在Adobe的Animate框架中。当我向补间添加“更改”监听器时，当我点击名为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中，部分未定义。

Answer 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。

希望有所帮助。

CreateJS / TweenJS在Tween上使用“更改”丢失范围

1 个答案: