在JS中完成動畫的回調

-1

我已經編寫了在JS中爲動畫生成框架的函數，並且我想通過完成動畫來使用鏈接方式來調用回調函數。爲此我寫了下面的代碼：在JS中完成動畫的回調

var _proto = Array.prototype; 

var Animation = function(duration, callback) { 
var begin = new Date(), delta, then = [] 
    , cid = setInterval(function(){ 
     delta = (new Date() - begin)/duration; 
     delta > 1 && (delta = 1) 
     callback(delta) 
     if(delta === 1) { 
     clearInterval(cid); 
      if(then.length) { 
      var i = 0; 
      for(; i < then.length; i++) { 
       then[i].call(this) 
      } 
      } 
     } 
     }, 10); 
    return { 
    then : function(){ 
     _proto.push.apply(then , _proto.slice.call(arguments)); 
     return this; 
    } 
    } 
};

，並使用這種方式：

Animation(450 , function(delta){ 
// frames 
}).then(function(){ 
    // after finish 
})

是在這種情況下，以創建「然後」方法好辦法嗎？或者你可以給任何建議。

來源

2014-09-13 user3807481

這不支持promises庫中常見的一些功能：如果您在動畫運行完成後調用，則不會調用回調，那麼您的回調就不會收到錯誤回調等。如果我是你，我將保持簡單並使用原始回調對動畫進行編碼。如果你想'然後'，你可以使用其中的許多promise庫 - 它們都提供了一種方法來將回調代碼轉換爲承諾對象。 – hugomg 2014-09-13 12:48:34

我想方法的名稱告訴我即將實現延期對象。不是這樣。這只是一種使用鏈接方式完成動畫後必須調用的方法。這在老版本的jQuery中是很成功的。 – user3807481 2014-09-13 13:47:51

這是一個很有趣的事情，但我不喜歡僅僅爲語法使用鏈接，就像你正在做的那樣。我寧願保持簡單，只是將回調作爲常規參數傳遞。如果我想要在動畫完成後能夠添加回調（如果您在開始時將回調作爲參數傳遞的話，這是不可能的），我只會使用單獨的然後方法對其進行編碼。 – hugomg 2014-09-13 13:52:51

如果你的目標是modern browsers你可以創建沒有任何庫的承諾。您的代碼應該是這樣的：

var Animation = function(duration, callback) { 
    return new Promise(function (fulfill, reject) { 
     // Your code ... 
     setInterval(function(){ 
      // More of your code ... 
      if (something) { 
       // When it's done ... 
       fulfill() 
      } 
     }, 10) 
    }) 
}

的承諾對象返回應該有一個then方法。

來源

2014-09-13 13:11:17 parchment

在JS中完成動畫的回調

回答

相關問題