加速器/鈦 - 與動畫保持倒計時？

Question

我想創建一個奇特的「保持刷新」，其中一個泡沫的大小增長，直到例如3秒過去。

當3秒過後，用戶可以釋放指紋並刷新頁面。

現在，我有執行許多這些事情的代碼，但我正在用定時器和大小來構造。

// HOLD REFRESH 
     var holdTime = 2000, timeout, startTime = 0, timer = 0, timerOk = false; 
     var overLay = Ti.UI.createView({ 
      backgroundColor: '#D9266BAF', 
      zIndex: '50', 
      left: 0, 
      top: 0, 
      width: '100%', 
      height: '100%' 
     }); 
     var overLayText = Ti.UI.createLabel({ 
      text: 'Hold to update content..', 
      color: 'white', 
     }); 
     var overLayImage = Ti.UI.createImageView({ 
      image: '/images/pullRefresh_white.png', 
      height: '30', 
      bottom: '40' 
     }); 
     overLay.add(overLayText); 

     TileData.addEventListener('touchstart', function(e){ 

      TileData.add(overLay); 

      timeout = setTimeout(function(e){ 
       timerOk = true; 
       overLayText.text = 'Release to update content'; 
       overLay.add(overLayImage); 
      }, holdTime); 

     }); 

     TileData.addEventListener('touchmove', function(e){ 
      clearTimeout(timeout); 
      timer = 0; 
      TileData.remove(overLay); 
      overLay.remove(overLayImage); 
      overLayText.text = 'Hold to update content..'; 
     }); 

     TileData.addEventListener('touchend', function() { 
      clearTimeout(timeout); 
      timer = 0; 
      if(timerOk){ 

       MainController.openView('dashboard'); 
      }else{ 
       TileData.remove(overLay); 
       overLay.remove(overLayImage); 
       overLayText.text = 'Hold to update content..'; 
      } 
     }); 
     // 

Answer 1

您的描述不完全清楚。我想我明白你想實現什麼，你可以實現它在幾個方面：

1. 內touchstart事件創建時間與您保持時間的動畫。爲高度/寬度設置適當的值，Appcelerator將管理縮放比例。在startend事件中清除該動畫。您也可以使用animationcomplete事件來調用刷新功能。
2. 期間touchstart，用於可變ifClicked並使用小的間隔/超時touchend事件設置爲真/假值（最好是使用setInterval函數比setTimeout）檢查是否用戶仍然觸摸它。在這段時間內，你也可以做小動畫。