0

我已经设置了一个演示，说明圆形上的动画，并且圆形在渲染时似乎动摇了。是什么导致动画卡顿？我怎样才能使它顺利？

正如注释代码中所见，我试图用对setInterval()的调用来替换使用，但无济于事。animate()

var WINDOW_HEIGHT = 400;
var WINDOW_WIDTH = 600;

var paper = Raphael(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT);

Circle = function(paper, x, y, r, color) {
    this.paper = paper;
    this.x = x;
    this.y = y;
    this.r = r;
    this.color = color;
    this.xd = 1;
    this.yd = 1;
    this.elem;
}

Circle.prototype.create = function() {
    this.elem = this.paper.circle(this.x, this.y, this.r);
    this.elem.attr("fill", this.color);
    this.elem.attr("stroke", this.color);
}

Circle.prototype.move = function() {

    if (this.x < 0 || this.x > WINDOW_WIDTH) {
        this.xd = -this.xd;
    }
    if (this.y < 0 || this.y > WINDOW_HEIGHT) {
        this.yd = -this.yd;
    }
    this.x += this.xd;
    this.y += this.yd;

    this.elem.attr("cx", this.x);
    this.elem.attr("cy", this.y);
}

Circle.prototype.animate = function(x, y) {
    this.elem.animate({
        cx: x,
        cy: y
    }, 1000, "linear");
}

var circle = new Circle(paper, 0, 0, 30, "#f00");

circle.create();

window.setInterval(function() {
    circle.move();
}, 1);

//circle.animate(300, 300);​​
4

1 回答 1

3

这是您的副作用，setInterval间隔为 1 毫秒。浏览器无法真正处理。相反，根据时间计算位置，并且仅在最后一帧完成时才请求新帧：

var _requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function(f) { setTimeout(f, 16); };

var lastUpdate = new Date().getTime();

var update = function() {
    // How many milliseconds has it been since the last update?
    var now = new Date().getTime();
    var d = now - lastUpdate;
    lastUpdate = now;

    // Now, move the ball based on the difference.
    // Looping is not the right way to go about this, mind.
    var amountBallMoved = d / 33;

    for(var i = 0; i < amountBallMoved; i++)
        circle.move();

    // And finally, request the next animation frame.
    _requestAnimationFrame(update);
};

update();​​​

这是一个更新的 jsFiddle。

于 2012-06-13T13:34:06.070 回答