Question

我有一个循环* 20，它会为一组随机选择的png（它们现在是简单的盒子）创建补间。创建后，他们会做一个简单的X轴滑动动画。

在动画过程中，某些盒子会消失/弹出。稍后，补间完成时，其中一些会重新出现/弹出。

我是否想念一些东西阻止他们弹出？我有onStart / onComplete事件，它们应该在应有的时间触发，因此似乎弹出的所有内容并没有尽早完成，只是从显示中删除了。

（我尝试使用jsfiddle / codepen，但脚本根本无法工作）

代码如下：

<head>
<script src="phaser.min.js"></script>
<script>
const config = {
    preload: preload,
    create: create,
    update: update
};

const game = new Phaser.Game(1280, 480, Phaser.auto, '', config)

function preload () {
    game.load.image('qtrf', 'img/quarter_0000_quarter-fade.png');
    game.load.image('qtr', 'img/quarter_0003_quarter.png');
    game.load.image('halff', 'img/half_0001_half-fade.png');
    game.load.image('half', 'img/half_0004_half.png');
    game.load.image('fullf', 'img/full-fade.png');
    game.load.image('full', 'img/full.png');

}

function create () {
    game.stage.backgroundColor = "#90cfc7";

    const bars = [
        // field 1 = name of sprite and sprite definition
        // field 2 = drop rate for random picking
        {"qtr": game.add.sprite(-160,0, 'qtr'), "rate": 15 },
        {"qtrf": game.add.sprite(-160,0, 'qtrf'), "rate": 2},
        {"half": game.add.sprite(-320,0, 'half'), "rate": 20},
        {"halff": game.add.sprite(-320,0, 'halff'), "rate": 2},
        {"full": game.add.sprite(-640,0, 'full'), "rate": 5},
        {"fullf": game.add.sprite(-640,0, 'fullf'), "rate": 5}
    ];

    const barrates = [];
    const barsprites = [];
    bars.forEach(element => {
        barrates.push(element.rate);
        Object.entries(element).forEach(objE => {
            if (objE[0] != "rate") {
                barsprites.push(objE[1]);
            }
        });
    });
    let ratesum = barrates.reduce((a,b) => a+b, 0)
            ratetable = barrates.map(e => (Number.parseFloat(e / ratesum).toFixed(2)) * 100);

    for (let i = 0; i < 10; i++) {
        let randbar = game.rnd.between(1, 100);
        let randtime = game.rnd.between(5000, 20000);
        let randdelay = game.rnd.between(2000, 10000);
        let position = 0;
        for (let j = 0; j < ratetable.length; j++) {
            position += ratetable[j]
            if (randbar < position+1) {
                console.log(j, randtime, randdelay);
                game.add.tween(barsprites[j]).to({ x: game.width }, randtime, Phaser.Easing.Linear.None, true, randdelay, -1, true);
                break;
            }
        }
    }
}

function update () {
}

function getbar () {

}

    </script>

</head>

PhaserJS：动画对象在动画过程中脱落并重新出现

0 个答案: