Tweenjs在容器内模糊

Question

我已经被困在这个大约一个星期了，不知道为什么在我的容器内的形状实例是模糊的，当它是60 fps动画。我的容器包含一个形状实例。形状实例与一个图形实例相关联。似乎有一个白色的模糊，跟踪方向的动画。有什么方法可以阻止这种模糊现象，还是tweenJS的局限性？这是jsFiddle。

http://jsfiddle.net/1chh2de6/

这里是一些额外的细节，我正在工作的台球游戏，其中涉及许多移动圈。我已经为每个台球创建了一个类，它将在将来保存更多的形状实例。然而，在60 fp时，形状实例在动画中是模糊的。这是'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

这只是画布如何在内容更改时显示内容的症状，而与EaselJS或TweenJS无关。这里是一个使用原始画布API的小提琴。

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，没有改变它的动画方式。

Answer 2

除非我在这里遗漏了一些东西，这只是视觉的持久性，这是正常人类视觉的工作方式，尤其是电脑屏幕上的高对比度图形。

试着在一个黑暗的夜晚出去，来回挥动一束明亮的光，你同样会看到它背后的一条微妙的“小径”。

一个更好的方法来证明这一点，是捕捉屏幕截图时，动画正在发生。看一下静态的框架，你会发现它没有模糊。