如何在 pixi.js 中为多个生长圈设置动画？答案

【问题标题】：How to animate multiple growing circles in pixi.js?如何在 pixi.js 中为多个生长圈设置动画？
【发布时间】：2018-06-26 01:39:50
【问题描述】：

我一直在研究代码并学习算法以及不同的方法和概念。我目前正在研究圆形包装并试图通过第一阶段。我对 javascript 比较陌生，只处理过 Java 和最小的 c++。

我编写了一个名为CircleShape 的class，并将class 初始化为一个数组，这样我就可以使用如下代码在屏幕上绘制多个圆圈：

var renderer;
var graphics;

var widthOfScreen = 800;
var heightOfScreen = 400;

var circles = [];

function initRenderer() {

    console.log("initializing renderer 2..");

    renderer = new PIXI.Application(widthOfScreen, heightOfScreen, { antialias: true });
    document.getElementById("pixidisplay-1").appendChild(renderer.view);

    graphics = new PIXI.Graphics();

    for (var i = 0; i < 500; i++) {
        circles[i] = new CircleShape(Math.floor((Math.random() * widthOfScreen) + 1), Math.floor((Math.random() * heightOfScreen) + 1), Math.floor((Math.random() * 2) + 1));
    }       
}

function draw() {
    console.log("drawing 2..");

    for (var i = 0; i < 500; i++) {
        circles[i].drawCircleShape();
    }    
}

function CircleShape(_x, _y, _s) {

    this.x = _x;
    this.y = _y;
    this.s = _s;

    var str = '#1C3144', num = parseInt(str.substring(1), 16);

    this.drawCircleShape = function drawCircleShape() {

    graphics.lineStyle(0);
    graphics.beginFill(num, 1);
    graphics.drawCircle(this.x, this.y,this.s);
    graphics.endFill();

    renderer.stage.addChild(graphics);

    }
}

initRenderer();
draw();

在之前的实验中，我设法通过以下方法使单个圆圈的大小变大：

app.ticker.add(function(delta) {
  circle.scale.set(size);
  size = size + 0.1 * delta;
});

这将在绘制圆本身之后执行，圆是一个分配有PIXI.Graphics() 的变量。

最初我有circle.drawCircle(0,0,this.s)，并尝试通过在ticker.add(function(delta) 中增加s 变量。因为我没有任何成功，所以我决定改用circle.scale.set(s)。我仍然不确定哪个是最好的方法。我不确定将 PIXI.Graphics 初始化放在 Circle class 外部还是内部更好。（我会假设在课堂上，但我真的不知道 javascript）

基本上，我的目标是采用类和数组方法，在屏幕上以随机位置绘制圆圈，一次或连续，圆圈随着时间的推移而增长，并且能够调整圆圈的增长量。

最终我将使用某种条件来使圆在接触另一个圆或画布边缘时停止增长。

任何帮助将不胜感激。温斯顿

我稍后会发布一些我正在做的事情的例子。谢谢。

【问题讨论】：

标签： javascript arrays pixi.js

【解决方案1】：

所以经过几次尝试后，我设法达到了我的目标，如果有人想看看，我写的代码如下。仍在进行中。

code here

【讨论】：