在动画运行时获取矩形的坐标答案

【问题标题】：Get coordinations of a rectangle while animation is in action在动画运行时获取矩形的坐标
【发布时间】：2012-08-06 03:11:40
【问题描述】：

我正在尝试在动画运行时获取矩形的坐标。你可以在这里查看动画的代码和类型：http://jsfiddle.net/2UZM3/

正如我们所看到的，在动画结束时会打印坐标。我希望坐标在矩形移动时永久更新。

感谢您的帮助！

PS：源代码最初来自这里：http://www.html5canvastutorials.com/kineticjs/html5-canvas-transition-easing-functions-with-kineticjs/

【问题讨论】：

标签： javascript jquery html html5-canvas kineticjs

【解决方案1】：

您可以为stage.onFrame 添加一个处理程序，用于输出项目的坐标。只需在用户单击按钮开始动画时启动stage，并在执行transitionTo 方法上的回调时停止stage：

window.onload = function() {
    var stage = new Kinetic.Stage({
        container: "container",
        width: 500,
        height: 200
    });
    var layer = new Kinetic.Layer();
    var greenBox = new Kinetic.Rect({
        x: 100,
        y: stage.getHeight() / 2,
        width: 100,
        height: 50,
        fill: 'green',
        stroke: 'black',
        strokeWidth: 4
    });


    layer.add(greenBox);
    stage.add(layer);

    stage.onFrame(function(frame) {
        // Update print coordinates on each frame of animation loop
        jQuery("#coordinates").text(Math.round(greenBox.getX()) + "," + Math.round(greenBox.getY()));      
    });

    jQuery("#StartAnim").click(function() {

        // Start the timer running
        stage.start();

        greenBox.transitionTo({
            x: 300,
            duration: 1,
            easing: 'ease-in-out',
            callback: function() {
                // Stop the stage loop
                stage.stop();
            }
        });

    });
};

更新小提琴here。

【讨论】：

这是个好主意。对于给定的问题，它工作得很好。但我担心效率。我还发现了编写自己的动画函数的可能性 (html5canvastutorials.com/kineticjs/…)。这会更有效还是利润只是微不足道？如果是后者，我很乐意使用您的解决方案，因为我可以使用 KineticJS 良好实现的动画功能。
我认为现阶段的性能差异将很小，但我最初的解决方案确实涉及在我认为 Kinetic 用于使用 transitionTo 方法移动框的动画循环之上添加一个进一步的动画循环您可以通过舞台的 onFrame 方法访问它。你会更好地连接到那个循环中，更积极的结果是生成的代码更干净。请参阅我的更新答案。
太棒了！我还没有看到这种可能性，但它真的很棒。我将在动画运行时实现更多功能。因此，代码必须高效。非常感谢您的帮助和出色的解决方案！
没问题艾米，很高兴我能提供帮助。