在 Polymer 1.0 中使用 Iron-list 平滑自动滚动答案

【问题标题】：Smooth auto scroll with iron-list in Polymer 1.0在 Polymer 1.0 中使用 Iron-list 平滑自动滚动
【发布时间】：2017-07-03 13:33:45
【问题描述】：

我希望在单击按钮时平滑地自动滚动到 Polymer 1.0 铁杆列表中的特定元素。

感谢 scrollToIndex 方法，现在我有了一个简单的自动滚动功能。但是我想要一个流畅的动画，比如jQuery动画$("#list").animate({ scrollTop: 300 }, 2000);，但是没有jQuery。

我遇到的一个大问题是，由于 iron-list 不会一次显示所有项目，因此我找不到特定项目的 scrollTop 位置，因为它还没有在 DOM 中。

我在这里创建了一个 JSFiddle：http://jsfiddle.net/c52fakyf/2/

感谢您的帮助！

【问题讨论】：

标签： javascript polymer infinite-scroll autoscroll iron-list

【解决方案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);
},

它基本上是一种递归方法，每次屏幕刷新时都会更新。该方法接收一个回调对象，该对象具有 .start、.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 的缓动函数中得到了 easeInOut：

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

还有中提琴：

http://jsfiddle.net/5uLhu6qa/

这并不完全符合您的要求，但这是您可以继续的开始。

【讨论】：