javascript - 如何使用 JavaScript 测量动画发生的时间

Question

让我解释一下这个问题。我正在创建一个 phonegap 应用程序，并且正在运行一些 css 动画。有问题的动画是一只手移到屏幕上，当它到达屏幕下方 300 像素时，然后向后动画。

CSS:

   .handmovedown{

      transform: translateY(300px);
        -webkit-transform: translateY(300px); /** Safari & Chrome **/
        -o-transform: translateY(300px); /** Opera **/
        -moz-transform: translateY(300px); /** Firefox **/
    }

    .handmoveup{

      transform: translateY(-300px);
        -webkit-transform: translateY(-300px); /** Safari & Chrome **/
        -o-transform: translateY(-300px); /** Opera **/
        -moz-transform: translateY(-300px); /** Firefox **/
    }

.objecttransition{

    transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear; /** Chrome & Safari **/
    -moz-transition: all 0.5s linear; /** Firefox **/
    -o-transition: all 0.5s linear; /** Opera **/
}

正如我们所见，handmovedown 使手向下移动，handmoveup 使手向上移动。现在 objecttransition 确保每个运行的动画需要 0.5 秒。这是我的 JS:

$(document).ready(
    function()
    {
        $("#Hand").addClass("handmovedown");
        $("#Logo").addClass("logomove");
        setInterval(function(){$("#Hand").addClass("handmoveup");},700);
});

现在上面的代码添加了 handmovedown 然后在 700 毫秒后将 handmoveup 添加到手上，手向后移动。 BROWSER 中的一切工作正常。当我将它放入 phonegap 并在 Android 上运行时。 handmovedown 运行时间超过 0.5 秒，然后 handmoveup 开始，动画看起来很奇怪。我的问题是我如何测量 handmovedown 花费了多长时间，以便 handmoveup 可以在触发之前等待适当的时间？

Answer 1

您可以监听转换完成时触发的事件，然后安排下一个转换。 This answer涵盖了跨浏览器实现这一目标的所有障碍。

这是只适用于 webkit 的简化版本，只是为了给你一个想法:

$(document).ready(
    function()
    {
        $("#Hand").addClass("handmovedown").on("webkitTransitionEnd", function() {
            // This will get fired at the end of each transition.
            // (Your code wasn't doing it, but I assume we have to remove the
            // handmovedown class here as well as adding handmoveupm, so toggle
            // works)
            setTimeout(function() {
                $(this).toggleClass("handmovedown handmoveup");
            }, 200); // 200ms later
        });
        $("#Logo").addClass("logomove");
    }
);

How to measure the amount of time an animation took place using JavaScript

如果你真的想知道花了多长时间(我不明白你真的这么做了)，那么:

$(document).ready(
    function()
    {
        var started = new Date();
        $("#Hand").addClass("handmovedown").on("webkitTransitionEnd", function() {
            // This will get fired at the end of each transition.
            console.log("Completed after " + (new Date() - started) + "ms");

            // (Your code wasn't doing it, but I assume we have to remove the
            // handmovedown class here as well as adding handmoveupm, so toggle
            // works)
            setTimeout(function() {
                started = new Date();
                $(this).toggleClass("handmovedown handmoveup");
            }, 200); // 200ms later
        });
        $("#Logo").addClass("logomove");
    }
);