在聚合物1.0中使用iron-list進行平滑自動滾動

Question

我想點擊一個按鈕時，可以順利地自動滾動到Polymer 1.0 iron-list中的特定元素。

現在我有一個簡單的自動滾動感謝scrollToIndex方法。 但我想有一個流暢的動畫，如jQuery動畫$("#list").animate({ scrollTop: 300 }, 2000);，但沒有jQuery。

我遇到的一個大問題是，由於iron-list並不是一次顯示所有項目，所以我找不到特定項目的scrollTop位置，因爲它尚未在DOM中。

我在這裏開始了的jsfiddle：http://jsfiddle.net/c52fakyf/2/

感謝您的幫助！

Answer 1

我剛剛通過requestAnimationFrame學習了動畫，我想到了這個問題。我做了一個簡單的動畫方法：

animate: function(callbackObj, duration) { 
     var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame; 
     var startTime = 0, percentage = 0, animationTime = 0; 

     duration = duration*1000 || 1000; 

     var animate = function(timestamp) { 

      if (startTime === 0) { 
       startTime = timestamp; 
      } else { 
       animationTime = timestamp - startTime; 
      } 

      if (typeof callbackObj.start === 'function' && startTime === timestamp) { 
      callbackObj.start(); 

      requestAnimationFrame(animate); 
      } else if (animationTime < duration) { 
      if (typeof callbackObj.progress === 'function') { 
       percentage = animationTime/duration; 
       callbackObj.progress(percentage); 
      } 

      requestAnimationFrame(animate); 
      } else if (typeof callbackObj.done === 'function'){ 
       callbackObj.done(); 
      } 
     }; 

     return requestAnimationFrame(animate); 
}, 

它基本上是一種遞歸方法，每次刷新屏幕時都會進行更新。該方法採用具有屬性下的功能的回叫對象。開始,。進度和。完成。

我修改您的代碼位：

_autoScroll: function() { 
     var sequenceObj = {}; 
     var seconds = 2; 
     var rangeInPixels = 500; 

     sequenceObj.progress = (function(percentage) { 
     this.$.itemList.scroll(0, this.easeInOutQuad(percentage)*rangeInPixels); 
     }).bind(this); 

     this.animate(sequenceObj, seconds); 
    }, 

我從羅伯特·彭納的緩和功能得到了easeInOut：

easeInOutQuad: function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t }, 

和中提琴：

http://jsfiddle.net/5uLhu6qa/

這不完全你在問什麼，但這是你可以繼續的一個開始與...相處。