円形状のアニメーションを示すデモをセットアップしましたが、レンダリング中に円が揺れるようです。アニメーションが遅くなる原因は何ですか? どうすればスムーズにできますか?
コメント付きのコードに見られるように、の使用を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);