在Polymer 1.0中使用鐵列表平滑自動滾動

Question

當我單擊一個按鈕時，我希望能夠平滑自動滾動到Polymer 1.0鐵清單中的特定元素。

現在，有了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);
},

它基本上是一種遞歸方法，每次刷新屏幕時都會更新。 該方法采用在與功能的回調對象。開始 ，.progress和.done屬性下。

我對您的代碼做了一些修改：

    _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);
    },

我從Robert Penner的緩動函數獲得了easyInOut：

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

和violá：

http://jsfiddle.net/5uLhu6qa/

這並不是您所要的，但可以繼續。