Плавная автопрокрутка с железным списком в Polymer 1.0

Question

Я хотел бы иметь плавную автоматическую прокрутку к определенному элементу в списке железа Polymer 1.0, когда я нажимаю на кнопку.

На данный момент у меня есть простая автоматическая прокрутка благодаря методу scrollToIndex. Но я хотел бы иметь плавную анимацию, такую ​​как анимация jQuery $("#list").animate({ scrollTop: 300 }, 2000);, но без jQuery.

Одна из самых больших проблем, с которыми я столкнулся, заключается в том, что, так как в железном списке не отображаются все элементы сразу, я не могу найти позицию 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);
},

Это в основном рекурсивный метод, который обновляется каждый раз, когда обновляется экран. Метод принимает объект обратного вызова с функциями в свойствах .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);
    },

Я получил EasyInOut от функций замедления Роберта Пеннера:

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

И виола:

http://jsfiddle.net/5uLhu6qa/

Это не совсем то, что вы просите, но это начало, с которого вы можете продолжить.