TweenJS 绝对位置（to（）方法）不起作用

Question

有人告诉我补间对象中的 .to() 方法将图形对象移动到 canvas 上的精确点。但是，当我运行下面的代码时，.to() 方法将 400 像素添加到圆的原始 x 位置，即 165。因此，圆将变为 565，但我希望它变为 400 像素在 canvas 上。任何人都知道为什么会发生这种情况以及我可以做些什么来让它在 canvas?

上达到 400 像素

<html>
    <title>Pool Game</title>
    <head>
    <script src="https://code.createjs.com/easeljs-0.8.0.min.js"></script>
    <script src="https://code.createjs.com/tweenjs-0.6.1.min.js"></script>

    <script>

    function init(){
        stage = new createjs.Stage("myCanvas");
        var circle = new createjs.Shape();
        circle.graphics.beginFill("blue");
        circle.graphics.drawCircle(165, 250, 25);
        stage.addChild(circle);
        stage.update();
        createjs.Tween.get(circle, {loop: false})
                .to({ x: 400}, 1000);
        createjs.Ticker.setFPS(60);
        createjs.Ticker.addEventListener("tick", stage);
    }

    </script>

    </head>
    <body onload="init();">
        <canvas id="myCanvas" width="1000" height="500"></canvas>
    </body>

</html>

Answer 1

这是因为您通过 drawCircle 调用的第一个参数将圆的中心点设置为 165。在此处查看文档：http://www.createjs.com/docs/easeljs/classes/Graphics.html#method_drawCircle

你应该做类似

的事情

circle.graphics.drawCircle(0, 0, 25);
circle.x = 165;
circle.y = 250;

TweenJS 绝对位置（to（）方法）不起作用

TweenJS Absolute Position (to() method) Not Working

html

javascript

css

easeljs