如何使用JavaScript測量動畫發生的時間量

讓我來解釋一下這個問題。我正在創建一個phonegap應用程序，並且我正在運行一些css動畫。有問題的動畫是一隻手移動到屏幕上，當它沿着屏幕向下達到300px時，然後向後動畫。如何使用JavaScript測量動畫發生的時間量

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.5s。這裏是我的JS：

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

現在上面的代碼添加handmovedown然後700毫秒後的handmoveup加到手向後移動手。 BROWSER中的所有內容都能正常工作。當我把它放在phonegap中並在Android上運行它。手動移動需要超過0.5秒的時間才能運行，然後手動移動，動畫看起來很奇怪。我的問題是，我將如何衡量移動花費多長時間，以便handmrowup可以在觸發前等待適當的時間？

來源

2014-01-15 user481610

您可以監聽轉換完成時觸發的事件，然後計劃下一個轉換。 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"); 
    } 
);

如何使用測量時間的動畫發生量的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"); 
    } 
);

來源

2014-01-15 09:41:01

我想要計時的原因是想知道如何去做，所以我可以讓其他函數等待很長時間使用setTimeout。但是你對這個事件的解決方案是現貨！謝謝 – user481610

問題，您爲什麼不使用帶有關鍵幀的動畫呢？如：

@-webkit-keyframes handMove { 
    50% { -webkit-transform: translateY(300px); /** Safari & Chrome **/ } 
    100% { -webkit-transform: translateY(-300px); /** Safari & Chrome **/ } 
}

除非您需要動畫由於其他原因完成所需的時間，否則這將完成元素向上移動然後向後移動。

來源

2014-01-15 09:43:18

如何使用JavaScript測量動畫發生的時間量

回答

相關問題