Question

有人告诉我，补间对象中的.to（）方法会将图形对象移动到画布上的精确点。但是，当我运行下面的代码时，.to（）方法会向圆的原始x位置（即165）添加400个像素。因此，圆圈将达到565但我希望它转到400像素在画布上。任何人都知道为什么会发生这种情况以及我可以做些什么来让它在画布上达到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（）方法）不工作

1 个答案: