javascript - Tweenjs 在容器内模糊

Question

我已经在这个问题上坚持了大约一周，无法弄清楚为什么容器内的形状实例在以 60 fps 的速度制作动画时变得模糊。我的容器包含一个形状实例。形状实例与一个图形实例相关联。似乎有一个白色的模糊物追随着动画的方向。有没有办法阻止这种模糊或者这是 tweenJS 的限制？这是 jsFiddle。

http://jsfiddle.net/1chh2de6/

这里有一些额外的细节，我正在开发一款台球游戏，其中涉及很多移动圆圈。我为每个台球创建了一个类，将来它将容纳更多形状实例。然而，在 60 fps 下，动画期间形状实例会变得模糊。这是“poolBall”类。

function poolBall(number, posX, posY) {
    this.number = number;
    this.shapesArray = []; 
    this.shapesArray.push(new createjs.Shape()); 
    this.containerInstance = new createjs.Container();
    this.containerInstance.addChild(this.shapesArray[0]);
    this.containerInstance.x = posX;
    this.containerInstance.y = posY;
    this.drawGraphic = function(){
        this.shapesArray[0].graphics.beginFill('white')
            .setStrokeStyle(1)
            .beginStroke("#000000")
            .drawCircle(14, 14, 14)
            .endFill()
            .endStroke();
    };
};

Answer 1

这只是 Canvas 在内容更改时如何显示内容的症状，与 EaselJS 或 TweenJS 无关。这是一个使用原始 Canvas API 的 fiddle 。

http://jsfiddle.net/lannymcnie/97vLu9q9/1/

圆圈代码

context.beginPath();
context.arc(0,0,20,0,2* Math.PI,false);
context.fillStyle = "white";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "black";
context.stroke();    

请注意，我使用 RequestAnimationFrame 来更新舞台。我也使用 EaselJS 测试了 RAF，其动画方式没有改变。