Tweenjs 在容器内模糊

Question

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

http://jsfiddle.net/1chh2de6/

这里有一些额外的细节，我正在开发一个涉及很多移动圆圈的台球游戏。我为每个台球创建了一个 class，将来会包含更多形状实例。但是，在 60 fps 下，形状实例在动画期间会变得模糊。这是 'poolBall' class。

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

Answer 2

除非我在这里遗漏了什么，否则这只是视觉暂留，这正是人类视觉的正常工作方式，尤其是在计算机屏幕上显示高对比度图形时。

尝试在漆黑的夜晚外出，来回挥动强光，你同样会看到它背后有一个微妙的"trail"。

证明这一点的更好方法是在动画发生时捕获屏幕截图。查看静态帧，您会发现它没有模糊。

Tweenjs 在容器内模糊

Tweenjs Blurring inside Container

javascript

easeljs

tween.js