javascript - 使用 requestAnimationFrame 的简单球动画 HTML5

Question

我刚刚开始尝试使用 HTML5 和 JavaScript 制作一些动画。 目前我已经为球创建了一个 JavaScript 类。它有一个更新函数来更新球的位置，还有一个绘制函数来绘制球:

 /*global Vector*/
var Ball = (function () {
function Ball(pPostion) {
    this.setPosition(pPostion);
}

Ball.prototype.getPosition = function () {
    return this.mPosition;
};
Ball.prototype.setPosition = function (pPosition) {
    this.mPosition = pPosition;
};
Ball.prototype.draw = function (pContext) {
    pContext.save();
    pContext.beginPath();
    pContext.arc(100, 100, 20, 0, Math.PI * 2, true);
    pContext.closePath();
    pContext.fillStyle = '#ff0000';
    pContext.stroke();
    pContext.restore();
};

Ball.prototype.update = function () {
    this.getPosition().add(new Vector(10, 0));
};

return Ball;
}());

在我的主要部分中，我创建了以下方法:

function ballGameLoop() {
    ball.draw(mainContext);
    ball.update();
    requestAnimationFrame(ballGameLoop);
}

当被调用时，它确实会吸引球，但它似乎根本没有移动。我没有特定类型的方式让球具有动画效果，任何类型的运动都可以。谁能就我可能出错的地方提出任何建议？

Answer 1

从表面上看，您似乎只是在同一坐标处一遍又一遍地绘制圆弧(中心位于(100,100))。

将球的位置纳入其中将是使渲染位置依赖于对象位置的方法。从表面上看，类似以下内容的东西会产生运动:

Ball.prototype.draw = function (pContext) {
    var coordinates = this.getPosition();
    pContext.save();
    pContext.beginPath();
    pContext.arc(coordinates.X, coordinates.Y, 20, 0, Math.PI * 2, true);
    pContext.closePath();
    pContext.fillStyle = '#ff0000';
    pContext.stroke();
    pContext.restore();
};

我当然假设你如何设置 Vector 对象，所以我猜测 x 和 y 可以分别通过 (Vector).X 和 (Vector).Y 访问。

无论如何，这只是我的方法。